/* rui-custom-ui v2 */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&family=IBM+Plex+Mono:wght@400;600&display=swap");

:root {
  --rui-bg-1: #0b1020;
  --rui-bg-2: #111a33;
  --rui-bg-3: #182752;
  --rui-accent: #38bdf8;
  --rui-accent-2: #14b8a6;
  --rui-text-main: #e6edf7;
  --rui-text-muted: #b9c6df;
  --rui-surface: rgba(14, 22, 46, 0.72);
  --rui-border: rgba(148, 163, 184, 0.24);
  --rui-bg-base-layer: linear-gradient(130deg, var(--rui-bg-1) 0%, var(--rui-bg-2) 52%, var(--rui-bg-3) 100%);
  --rui-bg-texture-layer: radial-gradient(900px 480px at 88% 3%, color-mix(in oklab, var(--rui-accent-2) 22%, transparent), transparent 56%);
  --rui-bg-interaction-layer: radial-gradient(540px 340px at 50% 40%, color-mix(in oklab, var(--rui-accent) 14%, transparent), transparent 72%);
  --rui-bg-noise-opacity: 0.1;
  --rui-bg-depth-blur: 6px;
  --rui-bg-frame-ms: 42ms;
  --rui-parallax-x: 0px;
  --rui-parallax-y: 0px;
  --rui-hero-glow: 0.3;
  --rui-hero-saturation: 1.02;
  --rui-readability-max-saturation: 0.68;
  --rui-bg-interaction-opacity: 0.16;
  --rui-bg-brightness-cap: 0.92;
  --rui-code-bg: rgba(2, 6, 23, 0.78);
  --rui-code-border: rgba(148, 163, 184, 0.28);
  --rui-code-text: #e2e8f0;
  --rui-code-inline-bg: rgba(15, 23, 42, 0.36);
  --rui-motion-duration-multiplier: 1;
  --rui-motion-cadence-multiplier: 1;
  --rui-vt-duration: 380ms;
}

:root {
  color-scheme: dark light;
}

:root[data-rui-color-mode="dark"],
html.dark:root {
  --rui-bg-1: #0b1020;
  --rui-bg-2: #111a33;
  --rui-bg-3: #182752;
  --rui-accent: #38bdf8;
  --rui-accent-2: #14b8a6;
  --rui-text-main: #e6edf7;
  --rui-text-muted: #b9c6df;
  --rui-surface: rgba(14, 22, 46, 0.72);
  --rui-border: rgba(148, 163, 184, 0.24);
  --rui-code-bg: rgba(2, 6, 23, 0.78);
  --rui-code-border: rgba(148, 163, 184, 0.28);
  --rui-code-text: #e2e8f0;
  --rui-code-inline-bg: rgba(15, 23, 42, 0.36);
}

:root[data-rui-color-mode="light"] {
  --rui-bg-1: #f8fafc;
  --rui-bg-2: #eaf2ff;
  --rui-bg-3: #d9e9ff;
  --rui-accent: #0284c7;
  --rui-accent-2: #0d9488;
  --rui-text-main: #0f172a;
  --rui-text-muted: #334155;
  --rui-surface: rgba(255, 255, 255, 0.86);
  --rui-border: rgba(15, 23, 42, 0.15);
  --rui-code-bg: rgba(226, 232, 240, 0.92);
  --rui-code-border: rgba(15, 23, 42, 0.2);
  --rui-code-text: #0f172a;
  --rui-code-inline-bg: rgba(148, 163, 184, 0.18);
}

html.light:root {
  --rui-bg-1: #f8fafc;
  --rui-bg-2: #eaf2ff;
  --rui-bg-3: #d9e9ff;
  --rui-accent: #0284c7;
  --rui-accent-2: #0d9488;
  --rui-text-main: #0f172a;
  --rui-text-muted: #334155;
  --rui-surface: rgba(255, 255, 255, 0.86);
  --rui-border: rgba(15, 23, 42, 0.15);
  --rui-code-bg: rgba(226, 232, 240, 0.92);
  --rui-code-border: rgba(15, 23, 42, 0.2);
  --rui-code-text: #0f172a;
  --rui-code-inline-bg: rgba(148, 163, 184, 0.18);
}

@media (prefers-color-scheme: light) {
  :root[data-rui-color-mode="auto"] {
    --rui-bg-1: #f8fafc;
    --rui-bg-2: #eaf2ff;
    --rui-bg-3: #d9e9ff;
    --rui-accent: #0284c7;
    --rui-accent-2: #0d9488;
    --rui-text-main: #0f172a;
    --rui-text-muted: #334155;
    --rui-surface: rgba(255, 255, 255, 0.86);
    --rui-border: rgba(15, 23, 42, 0.15);
  }
}

@media (prefers-color-scheme: dark) {
  :root[data-rui-color-mode="auto"] {
    --rui-bg-1: #0b1020;
    --rui-bg-2: #111a33;
    --rui-bg-3: #182752;
    --rui-accent: #38bdf8;
    --rui-accent-2: #14b8a6;
    --rui-text-main: #e6edf7;
    --rui-text-muted: #b9c6df;
    --rui-surface: rgba(14, 22, 46, 0.72);
    --rui-border: rgba(148, 163, 184, 0.24);
  }
}

body {
  font-family: "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-variation-settings: "wght" var(--rui-font-wght, 460), "opsz" var(--rui-font-opsz, 16);
  background: var(--rui-bg-texture-layer), var(--rui-bg-base-layer);
  background-attachment: fixed;
  color: color-mix(in oklab, var(--rui-text-main) 92%, #0f172a 8%);
}

.rui-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;
}

:where(
  #rui-theme-lock,
  #rui-focus-toggle,
  #rui-bg-tune-toggle,
  #rui-bg-gallery-toggle,
  #rui-qa-fab,
  #rui-color-mode-toggle,
  #rui-motion-toggle,
  #rui-motion-density-toggle,
  #rui-privacy-toggle,
  #rui-typography-controls button,
  #rui-timeline-search button,
  #rui-year-rail button,
  .rui-code-copy,
  .rui-image-lightbox-close,
  .rui-qa-form button,
  .rui-bg-panel-head button,
  .rui-bg-panel-actions button,
  .rui-bg-gallery-form button
) {
  min-inline-size: 24px;
  min-block-size: 24px;
}

#rui-skip-link {
  position: fixed;
  left: 14px;
  top: -44px;
  z-index: 120;
  border-radius: 0.52rem;
  padding: 0.45rem 0.66rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #041221;
  background: linear-gradient(120deg, #67e8f9, #34d399);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.32);
  transition: top 170ms ease;
}

#rui-skip-link:focus-visible {
  top: 10px;
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--rui-accent) 82%, #fff 18%);
  outline-offset: 2px;
}

:target,
:where(main, article, section, [id]):focus {
  scroll-margin-top: 92px;
}

@media (forced-colors: active) {
  body,
  #rui-dynamic-hero,
  .rui-metric-card,
  #rui-timeline-search,
  #rui-year-rail button,
  .rui-code-copy,
  .rui-image-lightbox-close,
  .rui-qa-form input,
  .rui-qa-form button,
  #rui-ui-toast {
    forced-color-adjust: auto;
    background: Canvas;
    color: CanvasText;
    border-color: ButtonText;
    box-shadow: none;
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--rui-bg-noise-opacity);
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
  background-size: 28px 28px;
  transform: translateZ(0);
  animation: ruiGridDrift 22s linear infinite;
}

body::after {
  content: "";
  position: fixed;
  inset: -6%;
  z-index: -1;
  pointer-events: none;
  opacity: var(--rui-bg-interaction-opacity);
  background: var(--rui-bg-interaction-layer);
  filter: blur(var(--rui-bg-depth-blur)) saturate(var(--rui-readability-max-saturation)) brightness(var(--rui-bg-brightness-cap));
  transform: translate3d(var(--rui-parallax-x), var(--rui-parallax-y), 0);
  transition: transform var(--rui-bg-frame-ms) linear;
}

:root[data-rui-bg-template="conic-radial-v1"] body {
  background: var(--rui-bg-texture-layer), var(--rui-bg-base-layer);
}

@keyframes ruiGridDrift {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 28px 14px, 14px 28px;
  }
}

#rui-dynamic-hero {
  position: relative;
  margin: 0 0 1.6rem;
  border-radius: 1.1rem;
  overflow: hidden;
  background:
    radial-gradient(1200px 420px at 10% -15%, rgba(56, 189, 248, 0.34), transparent 60%),
    radial-gradient(900px 360px at 85% 15%, rgba(20, 184, 166, 0.28), transparent 58%),
    linear-gradient(126deg, var(--rui-bg-1) 0%, var(--rui-bg-2) 52%, var(--rui-bg-3) 100%);
  box-shadow: 0 22px 50px rgba(2, 6, 23, 0.35);
  filter: saturate(var(--rui-hero-saturation));
}

#rui-dynamic-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: calc(0.14 + var(--rui-hero-glow));
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
  background-size: 24px 24px;
}

.rui-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 1rem;
  padding: 1.3rem 1.3rem;
}

.rui-hero-track {
  padding: 0.25rem 0.25rem 0.2rem;
}

.rui-track-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.18rem 0.56rem;
  border-radius: 999px;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  font-size: 0.73rem;
  color: #cbd5e1;
  background: rgba(30, 41, 59, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

.rui-track-title {
  margin: 0.7rem 0 0.35rem;
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  letter-spacing: 0.01em;
  line-height: 1.18;
}

.rui-track-sub {
  margin: 0;
  color: var(--rui-text-muted);
  font-size: 0.95rem;
  min-height: 1.45rem;
}

.rui-track-sub strong {
  color: #f8fafc;
}

.rui-hero-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

.rui-metric-card {
  background: var(--rui-surface);
  border: 1px solid var(--rui-border);
  border-radius: 0.92rem;
  padding: 0.75rem 0.9rem;
  backdrop-filter: blur(5px);
}

.rui-metric-label {
  font-size: 0.74rem;
  color: #b6c4de;
  margin-bottom: 0.3rem;
}

.rui-metric-value {
  color: #fff;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.1;
}

.rui-metric-hint {
  font-size: 0.74rem;
  color: #9fb0cf;
  margin-top: 0.18rem;
}

.rui-today-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.42rem;
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #041221;
  background: linear-gradient(125deg, #67e8f9, #34d399);
}

#post-list > div {
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: 420px;
  transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease;
}

#post-list > div.rui-onstage {
  transform: translateX(8px);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
}

#post-list > div.rui-onstage::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 18px;
  width: 5px;
  height: calc(100% - 36px);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--rui-accent), var(--rui-accent-2));
}

#post-list > div.rui-selected {
  transform: translateX(10px);
  box-shadow: 0 22px 40px rgba(2, 6, 23, 0.2);
  border-color: color-mix(in oklab, var(--rui-accent) 54%, transparent);
}

#rui-year-rail {
  position: fixed;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: grid;
  gap: 0.42rem;
}

#rui-active-month {
  border-radius: 999px;
  padding: 0.24rem 0.56rem;
  font-size: 0.7rem;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  color: #041221;
  background: linear-gradient(125deg, var(--rui-accent), var(--rui-accent-2));
  text-align: center;
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.24);
}

#rui-year-rail button {
  border: 1px solid rgba(148, 163, 184, 0.36);
  border-radius: 999px;
  padding: 0.25rem 0.58rem;
  font-size: 0.72rem;
  color: #dbeafe;
  background: color-mix(in oklab, var(--rui-bg-1) 76%, #0f172a 24%);
  cursor: pointer;
}

#rui-year-rail button.active {
  color: #041221;
  border-color: transparent;
  background: linear-gradient(125deg, var(--rui-accent), var(--rui-accent-2));
}

#rui-year-rail button.disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

#rui-timeline-search {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto auto auto auto;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 0.95rem;
  padding: 0.62rem 0.72rem;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 0.86rem;
  background: color-mix(in oklab, var(--rui-bg-1) 76%, #0f172a 24%);
}

#rui-timeline-toggle-read,
#rui-timeline-share {
  white-space: nowrap;
}

#rui-timeline-search label {
  font-size: 0.76rem;
  color: #cbd5e1;
  white-space: nowrap;
}

#rui-timeline-search input {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 0.56rem;
  padding: 0.42rem 0.58rem;
  font-size: 0.86rem;
  color: #e2e8f0;
  background: color-mix(in oklab, var(--rui-bg-2) 74%, #0f172a 26%);
}

#rui-timeline-search button {
  border: 1px solid rgba(148, 163, 184, 0.36);
  border-radius: 0.56rem;
  padding: 0.4rem 0.62rem;
  font-size: 0.76rem;
  color: #dbeafe;
  background: color-mix(in oklab, var(--rui-bg-2) 68%, #0f172a 32%);
  cursor: pointer;
}

#rui-timeline-search-meta {
  font-size: 0.76rem;
  color: #cbd5e1;
  white-space: nowrap;
}

#rui-timeline-empty {
  margin: 0 0 0.9rem;
  border: 1px dashed rgba(148, 163, 184, 0.34);
  border-radius: 0.78rem;
  padding: 0.82rem;
  color: #cbd5e1;
  text-align: center;
  background: color-mix(in oklab, var(--rui-bg-1) 72%, #0f172a 28%);
}

#post-list > div.rui-filtered-out {
  display: none !important;
}

#post-list > div.rui-read-muted {
  opacity: 0.5;
  filter: saturate(0.72);
}

#post-list > div.rui-read-muted.rui-selected,
#post-list > div.rui-read-muted.rui-onstage {
  opacity: 0.86;
}

.rui-streak-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.42rem;
  border-radius: 999px;
  padding: 0.08rem 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  background: linear-gradient(125deg, #fb923c, #ef4444);
}

#rui-qa-fab {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 70;
  border: 0;
  border-radius: 999px;
  padding: 0.74rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
  background: linear-gradient(125deg, #67e8f9, #34d399);
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.35);
  cursor: pointer;
}

#rui-theme-lock {
  position: fixed;
  right: 20px;
  bottom: 30px;
  z-index: 68;
  border: 1px solid rgba(148, 163, 184, 0.46);
  border-radius: 999px;
  padding: 0.46rem 0.75rem;
  font-size: 0.78rem;
  color: #dbeafe;
  background: color-mix(in oklab, var(--rui-bg-1) 78%, #0f172a 22%);
  backdrop-filter: blur(5px);
  cursor: pointer;
}

#rui-color-mode-toggle,
#rui-motion-toggle,
#rui-motion-density-toggle,
#rui-privacy-toggle {
  position: fixed;
  right: 20px;
  z-index: 68;
  border: 1px solid rgba(148, 163, 184, 0.46);
  border-radius: 999px;
  padding: 0.46rem 0.75rem;
  font-size: 0.78rem;
  color: #dbeafe;
  background: color-mix(in oklab, var(--rui-bg-1) 78%, #0f172a 22%);
  backdrop-filter: blur(5px);
  cursor: pointer;
}

#rui-color-mode-toggle {
  bottom: 324px;
}

#rui-motion-toggle {
  bottom: 362px;
}

#rui-motion-density-toggle {
  bottom: 400px;
}

#rui-privacy-toggle {
  bottom: 438px;
}

#rui-color-mode-toggle[data-mode="dark"],
#rui-motion-toggle[data-mode="reduce"],
#rui-motion-density-toggle[data-mode="high"],
#rui-privacy-toggle[data-mode="private"] {
  color: #041221;
  border-color: transparent;
  background: linear-gradient(126deg, var(--rui-accent), var(--rui-accent-2));
}

#rui-theme-lock[aria-pressed="true"] {
  color: #041221;
  border-color: transparent;
  background: linear-gradient(122deg, var(--rui-accent), var(--rui-accent-2));
}

#rui-focus-toggle {
  position: fixed;
  right: 20px;
  bottom: 210px;
  z-index: 68;
  border: 1px solid rgba(148, 163, 184, 0.46);
  border-radius: 999px;
  padding: 0.46rem 0.75rem;
  font-size: 0.78rem;
  color: #dbeafe;
  background: color-mix(in oklab, var(--rui-bg-1) 78%, #0f172a 22%);
  backdrop-filter: blur(5px);
  cursor: pointer;
}

#rui-focus-toggle[aria-pressed="true"] {
  color: #041221;
  border-color: transparent;
  background: linear-gradient(125deg, var(--rui-accent-2), var(--rui-accent));
}

#rui-bg-tune-toggle,
#rui-bg-gallery-toggle,
#rui-ff-toggle {
  position: fixed;
  right: 20px;
  z-index: 68;
  border: 1px solid rgba(148, 163, 184, 0.46);
  border-radius: 999px;
  padding: 0.46rem 0.75rem;
  font-size: 0.78rem;
  color: #dbeafe;
  background: color-mix(in oklab, var(--rui-bg-1) 78%, #0f172a 22%);
  backdrop-filter: blur(5px);
  cursor: pointer;
}

#rui-bg-tune-toggle {
  bottom: 248px;
}

#rui-bg-gallery-toggle {
  bottom: 286px;
}

#rui-ff-toggle {
  bottom: 476px;
}

#rui-bg-tune-toggle[aria-expanded="true"],
#rui-bg-gallery-toggle[aria-expanded="true"],
#rui-ff-toggle[aria-expanded="true"] {
  color: #041221;
  border-color: transparent;
  background: linear-gradient(126deg, var(--rui-accent), var(--rui-accent-2));
}

#rui-bg-tune-panel,
#rui-bg-gallery-panel,
#rui-ff-panel {
  position: fixed;
  right: 20px;
  width: min(460px, calc(100vw - 24px));
  z-index: 74;
  display: none;
  border-radius: 0.95rem;
  overflow: hidden;
  border: 1px solid rgba(100, 116, 139, 0.28);
  background: color-mix(in oklab, var(--rui-bg-1) 82%, #0f172a 18%);
  color: #e2e8f0;
  box-shadow: 0 24px 48px rgba(2, 6, 23, 0.32);
}

#rui-bg-tune-panel {
  bottom: 334px;
}

#rui-bg-gallery-panel {
  bottom: 372px;
  max-height: min(72vh, 680px);
}

#rui-ff-panel {
  bottom: 410px;
  max-height: min(56vh, 520px);
}

#rui-bg-tune-panel.open,
#rui-bg-gallery-panel.open,
#rui-ff-panel.open {
  display: grid;
}

#rui-bg-gallery-panel.open {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.rui-bg-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.72rem 0.88rem;
  color: #e2e8f0;
  background: linear-gradient(130deg, #0f172a, #1f3a8a);
}

.rui-bg-panel-head strong {
  font-size: 0.9rem;
}

.rui-bg-panel-head button {
  border: 0;
  background: transparent;
  color: #e2e8f0;
  font-size: 1.1rem;
  cursor: pointer;
}

.rui-bg-panel-body {
  display: grid;
  gap: 0.58rem;
  padding: 0.74rem 0.86rem 0.84rem;
}

.rui-bg-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.8rem;
  color: #cbd5e1;
}

.rui-bg-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.38rem 0.55rem;
}

.rui-bg-field > span {
  grid-column: 1 / -1;
  font-size: 0.76rem;
  color: #cbd5e1;
}

.rui-bg-field input[type="range"] {
  width: 100%;
  accent-color: #38bdf8;
}

.rui-bg-field output {
  min-width: 64px;
  text-align: right;
  font-size: 0.74rem;
  color: #dbeafe;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
}

.rui-bg-panel-actions {
  display: flex;
  justify-content: flex-end;
}

.rui-bg-panel-actions button,
.rui-bg-gallery-form button {
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.56rem;
  padding: 0.36rem 0.62rem;
  min-height: 30px;
  font-size: 0.76rem;
  color: #dbeafe;
  background: color-mix(in oklab, var(--rui-bg-2) 68%, #0f172a 32%);
  cursor: pointer;
}

.rui-bg-gallery-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.52rem;
  align-items: end;
  padding: 0.7rem 0.86rem;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.rui-bg-gallery-form label {
  display: grid;
  gap: 0.22rem;
}

.rui-bg-gallery-form label span {
  font-size: 0.74rem;
  color: #cbd5e1;
}

.rui-bg-gallery-form input,
.rui-bg-gallery-form select {
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 0.56rem;
  padding: 0.38rem 0.52rem;
  font-size: 0.82rem;
  color: #e2e8f0;
  background: color-mix(in oklab, var(--rui-bg-2) 74%, #0f172a 26%);
}

.rui-bg-gallery-meta {
  min-height: 1.2rem;
  padding: 0.55rem 0.86rem 0;
  font-size: 0.75rem;
  color: #cbd5e1;
}

.rui-bg-gallery-grid {
  overflow: auto;
  display: grid;
  gap: 0.55rem;
  padding: 0.58rem 0.86rem 0.84rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.rui-bg-gallery-empty {
  margin: 0;
  border: 1px dashed rgba(148, 163, 184, 0.36);
  border-radius: 0.72rem;
  padding: 0.72rem;
  font-size: 0.8rem;
  color: #cbd5e1;
  text-align: center;
}

.rui-bg-gallery-card {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.75rem;
  overflow: hidden;
  background: color-mix(in oklab, var(--rui-bg-1) 84%, #0b1220 16%);
}

.rui-bg-gallery-thumb {
  aspect-ratio: 16 / 10;
  background-color: #0f172a;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.rui-bg-gallery-card-body {
  display: grid;
  gap: 0.24rem;
  padding: 0.5rem 0.58rem 0.56rem;
}

.rui-bg-gallery-card-body strong {
  font-size: 0.78rem;
  color: #f8fafc;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
}

.rui-bg-gallery-card-body span {
  font-size: 0.72rem;
  color: #a5b4cf;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
}

.rui-bg-gallery-card-body p {
  margin: 0;
  font-size: 0.74rem;
  color: #cbd5e1;
  line-height: 1.45;
}

#rui-reading-progress {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  z-index: 90;
  background: rgba(15, 23, 42, 0.18);
  pointer-events: none;
}

#rui-reading-progress-inner {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--rui-accent), var(--rui-accent-2));
  box-shadow: 0 0 12px color-mix(in oklab, var(--rui-accent) 68%, transparent);
  transition: width 120ms linear;
}

#rui-ui-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  z-index: 110;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  font-size: 0.8rem;
  color: #e2e8f0;
  background: color-mix(in oklab, var(--rui-bg-1) 76%, #0f172a 24%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 180ms ease;
}

#rui-ui-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

#rui-reading-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.9rem 0 0.7rem;
}

.rui-reading-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 0.72rem;
  padding: 0.24rem 0.64rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.92), rgba(241, 245, 249, 0.88));
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.08);
}

html.dark .rui-reading-pill {
  color: #e2e8f0;
  border-color: rgba(148, 163, 184, 0.36);
  background: color-mix(in oklab, var(--rui-bg-1) 74%, #0f172a 26%);
  box-shadow: none;
}

article#content {
  --rui-article-font-scale: 1;
  --rui-article-line-height: 1.82;
  font-size: calc(1rem * var(--rui-article-font-scale));
  line-height: var(--rui-article-line-height);
}

article#content pre,
article#content code {
  line-height: 1.52;
}

article#content pre {
  background: var(--rui-code-bg) !important;
  color: var(--rui-code-text) !important;
  border: 1px solid var(--rui-code-border) !important;
}

article#content code {
  color: var(--rui-code-text);
}

article#content :not(pre) > code {
  background: var(--rui-code-inline-bg);
  border-radius: 0.35rem;
  padding: 0.08rem 0.3rem;
}

.rui-article-hero-image {
  display: block;
  width: 100%;
  max-height: min(52vh, 480px);
  object-fit: cover;
  border-radius: 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.26);
  box-shadow: 0 20px 44px rgba(2, 6, 23, 0.32);
}

#rui-typography-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.9rem;
  padding: 0.52rem 0.62rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.88rem;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
}

html.dark #rui-typography-controls {
  background: color-mix(in oklab, var(--rui-bg-1) 76%, #0f172a 24%);
  box-shadow: none;
}

.rui-typography-label {
  display: inline-flex;
  align-items: center;
  font-size: 0.74rem;
  color: #475569;
}

html.dark .rui-typography-label {
  color: #cbd5e1;
}

.rui-typography-group {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}

#rui-typography-controls button {
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.52rem;
  padding: 0.2rem 0.45rem;
  min-height: 28px;
  font-size: 0.75rem;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

html.dark #rui-typography-controls button {
  color: #e2e8f0;
  background: color-mix(in oklab, var(--rui-bg-2) 72%, #0f172a 28%);
}

#rui-typography-controls button:hover {
  border-color: color-mix(in oklab, var(--rui-accent) 62%, transparent);
  transform: translateY(-1px);
}

#rui-typography-controls .rui-typography-reset {
  color: #0b3b5b;
  background: color-mix(in oklab, var(--rui-accent) 16%, #ffffff 84%);
}

html.dark #rui-typography-controls .rui-typography-reset {
  color: #dbeafe;
  background: color-mix(in oklab, var(--rui-accent) 18%, var(--rui-bg-2) 82%);
}

.rui-typography-state {
  margin-left: auto;
  font-size: 0.74rem;
  color: #334155;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
}

html.dark .rui-typography-state {
  color: #cbd5e1;
}

.rui-code-wrap {
  position: relative;
}

.rui-code-copy {
  position: absolute;
  top: 0.52rem;
  right: 0.58rem;
  z-index: 2;
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 0.52rem;
  padding: 0.2rem 0.45rem;
  font-size: 0.72rem;
  color: #dbeafe;
  background: color-mix(in oklab, var(--rui-bg-1) 75%, #0f172a 25%);
  cursor: pointer;
}

.rui-code-explain-btn {
  position: absolute;
  top: 0.52rem;
  right: 4.9rem;
  z-index: 2;
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 0.52rem;
  padding: 0.2rem 0.45rem;
  font-size: 0.72rem;
  color: #dbeafe;
  background: color-mix(in oklab, var(--rui-bg-1) 75%, #0f172a 25%);
  cursor: pointer;
}

#rui-code-explainer {
  position: fixed;
  inset: 0;
  z-index: 124;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, 0.62);
  backdrop-filter: blur(6px);
  padding: 1.1rem;
}

#rui-code-explainer.open {
  display: flex;
}

.rui-code-explainer-panel {
  width: min(900px, 96vw);
  max-height: min(82vh, 840px);
  overflow: hidden;
  border-radius: 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: color-mix(in oklab, var(--rui-bg-1) 78%, #020617 22%);
  box-shadow: 0 30px 60px rgba(2, 6, 23, 0.38);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.rui-code-explainer-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.66rem 0.85rem;
  color: #e2e8f0;
  background: linear-gradient(130deg, #0f172a, #1f3a8a);
}

.rui-code-explainer-panel > header button {
  border: 0;
  background: transparent;
  color: #e2e8f0;
  font-size: 1.1rem;
}

.rui-code-explainer-body {
  padding: 0.8rem;
  overflow: auto;
  display: grid;
  gap: 0.6rem;
}

#rui-code-explain-result {
  margin: 0;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 0.75rem;
  padding: 0.7rem;
  background: rgba(2, 6, 23, 0.54);
  color: #dbeafe;
  font-size: 0.78rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

#rui-code-explain-links {
  margin: 0;
  font-size: 0.76rem;
  color: #cbd5e1;
}

#rui-code-explain-links a {
  color: #7dd3fc;
}

.rui-zoomable-image {
  cursor: zoom-in;
  transition: transform 220ms ease, filter 220ms ease;
}

.rui-zoomable-image:hover {
  transform: translateY(-1px) scale(1.01);
  filter: saturate(1.06);
}

#rui-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(6px);
  padding: 1.4rem;
}

#rui-image-lightbox.open {
  display: flex;
}

.rui-image-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  font-size: 1.2rem;
  line-height: 1;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.6);
  cursor: pointer;
}

.rui-image-lightbox-figure {
  margin: 0;
  max-width: min(1200px, 94vw);
  max-height: min(88vh, 920px);
  display: grid;
  gap: 0.58rem;
}

.rui-image-lightbox-figure img {
  max-width: 100%;
  max-height: min(82vh, 840px);
  border-radius: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.32);
  box-shadow: 0 24px 46px rgba(2, 6, 23, 0.45);
  object-fit: contain;
  background: rgba(15, 23, 42, 0.4);
}

.rui-image-lightbox-figure figcaption {
  margin: 0;
  font-size: 0.84rem;
  color: #cbd5e1;
  text-align: center;
}

body.rui-lightbox-open {
  overflow: hidden;
}

.rui-table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  margin: 1rem 0 1.2rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--rui-bg-1) 80%, #0b1220 20%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  -webkit-overflow-scrolling: touch;
}

.rui-table-scroll table {
  width: max(100%, 720px);
  margin: 0 !important;
  border-collapse: collapse;
}

.rui-table-scroll th,
.rui-table-scroll td {
  border-color: rgba(148, 163, 184, 0.32) !important;
  white-space: nowrap;
}

.rui-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in oklab, var(--rui-bg-2) 85%, #0f172a 15%);
  backdrop-filter: blur(2px);
}

.rui-table-scroll:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--rui-accent) 78%, #fff 22%);
  outline-offset: 2px;
}

.rui-toc-active {
  color: color-mix(in oklab, var(--rui-accent) 75%, #0ea5e9 25%) !important;
  font-weight: 700 !important;
}

.rui-auto-toc {
  margin: 0.4rem 0 0.95rem;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 0.8rem;
  padding: 0.68rem 0.8rem;
  background: color-mix(in oklab, var(--rui-bg-1) 74%, #0f172a 26%);
}

.rui-auto-toc strong {
  display: inline-block;
  margin-bottom: 0.35rem;
}

.rui-auto-toc ol {
  margin: 0;
  padding-left: 1.05rem;
  display: grid;
  gap: 0.24rem;
}

.rui-auto-toc a {
  text-decoration: none;
}

aside .toc-container {
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
  border-radius: 0.9rem !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12) !important;
}

html.dark aside .toc-container {
  border-color: color-mix(in oklab, var(--rui-accent) 22%, var(--rui-border) 78%) !important;
  background: color-mix(in oklab, var(--rui-bg-1) 86%, #0b1220 14%) !important;
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.24) !important;
}

aside .toc-container h2 {
  color: #0f172a !important;
}

html.dark aside .toc-container h2 {
  color: var(--rui-text-main) !important;
}

aside .toc-container .toc a {
  color: #334155 !important;
  border-radius: 0.5rem;
  padding: 0.12rem 0.26rem;
}

html.dark aside .toc-container .toc a {
  color: color-mix(in oklab, var(--rui-text-muted) 88%, #dbeafe 12%) !important;
}

aside .toc-container .toc a:hover {
  color: #0f172a !important;
  background: color-mix(in oklab, var(--rui-accent) 12%, #ffffff 88%);
}

html.dark aside .toc-container .toc a:hover {
  color: var(--rui-text-main) !important;
  background: color-mix(in oklab, var(--rui-bg-2) 68%, #0f172a 32%);
}

aside .toc-container .toc li > a.active,
aside .toc-container .toc li > a.is-active-link {
  color: #083344 !important;
  font-weight: 700;
  background: linear-gradient(120deg, color-mix(in oklab, var(--rui-accent) 20%, #ffffff 80%), color-mix(in oklab, var(--rui-accent-2) 26%, #ffffff 74%));
}

html.dark aside .toc-container .toc li > a.active,
html.dark aside .toc-container .toc li > a.is-active-link {
  color: #022436 !important;
  background: linear-gradient(125deg, color-mix(in oklab, var(--rui-accent) 90%, #fff 10%), var(--rui-accent-2));
}

body[data-rui-editorial-edition="ai"] aside .toc-container {
  border-top: 4px solid #0f172a !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16) !important;
}

body[data-rui-editorial-edition="ai"] aside .toc-container h2 {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.96rem !important;
}

body[data-rui-editorial-edition="ai"] aside .toc-container .toc a {
  font-weight: 600;
}

html.dark body[data-rui-editorial-edition="ai"] aside .toc-container {
  border-top-color: #67e8f9 !important;
}

#rui-git-track-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.42rem;
  margin: 0.3rem 0 0.9rem;
  padding: 0.56rem 0.64rem;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 0.78rem;
  background: color-mix(in oklab, var(--rui-bg-1) 74%, #0f172a 26%);
}

#rui-git-track-filter strong {
  font-size: 0.78rem;
  color: #cbd5e1;
}

#rui-git-track-filter button {
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.74rem;
  color: #dbeafe;
  background: color-mix(in oklab, var(--rui-bg-2) 68%, #0f172a 32%);
}

#rui-git-track-filter button[aria-pressed="true"] {
  color: #041221;
  border-color: transparent;
  background: linear-gradient(125deg, var(--rui-accent), var(--rui-accent-2));
}

.rui-comments-sentinel {
  margin: 0.6rem 0;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  border-radius: 0.68rem;
  padding: 0.56rem 0.68rem;
  font-size: 0.78rem;
  color: #cbd5e1;
}

.rui-qa-error {
  margin: 0;
  padding: 0 0.72rem 0.62rem;
  font-size: 0.75rem;
  color: #b91c1c;
}

#rui-qa-panel {
  position: fixed;
  right: 20px;
  bottom: 140px;
  width: min(430px, calc(100vw - 24px));
  max-height: min(72vh, 700px);
  z-index: 75;
  display: none;
  border-radius: 0.95rem;
  overflow: hidden;
  background: #f8fafc;
  box-shadow: 0 24px 48px rgba(2, 6, 23, 0.3);
  border: 1px solid rgba(100, 116, 139, 0.28);
}

#rui-qa-panel.open {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.rui-qa-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.75rem 0.9rem;
  color: #e2e8f0;
  background: linear-gradient(130deg, #0f172a, #1f3a8a);
}

.rui-qa-head strong {
  font-size: 0.95rem;
}

.rui-qa-low-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.72rem;
  color: #cbd5e1;
}

.rui-qa-low-toggle input {
  width: 13px;
  height: 13px;
}

.rui-qa-threshold {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.72rem;
  color: #cbd5e1;
}

.rui-qa-threshold select {
  border: 1px solid rgba(203, 213, 225, 0.35);
  border-radius: 0.4rem;
  background: rgba(15, 23, 42, 0.48);
  color: #e2e8f0;
  padding: 0.1rem 0.26rem;
  font-size: 0.7rem;
}

.rui-qa-head button {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.42);
  color: #e2e8f0;
  font-size: 0.72rem;
  padding: 0.16rem 0.5rem;
  cursor: pointer;
}

.rui-qa-head button[aria-label="关闭问答窗口"] {
  border: 0;
  background: transparent;
  font-size: 1.1rem;
  padding: 0;
  width: 28px;
  height: 28px;
}

.rui-qa-log {
  overflow-y: auto;
  padding: 0.85rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
  background:
    linear-gradient(#f8fafc, #f8fafc) padding-box,
    repeating-linear-gradient(
      to bottom,
      rgba(203, 213, 225, 0.35),
      rgba(203, 213, 225, 0.35) 1px,
      transparent 1px,
      transparent 26px
    );
}

.rui-msg {
  max-width: 92%;
  border-radius: 0.75rem;
  padding: 0.62rem 0.72rem;
  line-height: 1.5;
  font-size: 0.9rem;
  white-space: pre-wrap;
}

.rui-msg.user {
  align-self: flex-end;
  background: #0f172a;
  color: #f8fafc;
}

.rui-msg.bot {
  align-self: flex-start;
  background: #e2e8f0;
  color: #0f172a;
}

.rui-msg.bot a {
  color: #0f3a8a;
  text-decoration: underline;
}

.rui-source-badge-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.26rem;
  margin-top: 0.38rem;
}

.rui-source-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(248, 250, 252, 0.9);
  color: #334155;
  font-size: 0.68rem;
  padding: 0.08rem 0.42rem;
}

.rui-source-list {
  display: grid;
  gap: 0.14rem;
}

.rui-source-meta {
  margin-left: 0.32rem;
  font-size: 0.68rem;
  color: #475569;
}

.rui-msg-meta {
  margin: 0.4rem 0 0;
  font-size: 0.68rem;
  color: #334155;
  border-top: 1px dashed rgba(100, 116, 139, 0.38);
  padding-top: 0.28rem;
}

.rui-msg-confidence {
  margin: 0.24rem 0 0;
  font-size: 0.72rem;
  color: #0f172a;
}

.rui-msg-feedback-actions {
  margin-top: 0.36rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.24rem;
}

.rui-msg-feedback-actions button {
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.92);
  color: #0f172a;
  font-size: 0.68rem;
  padding: 0.08rem 0.48rem;
}

.rui-conflict-panel {
  margin-top: 0.34rem;
  border: 1px solid rgba(185, 28, 28, 0.24);
  border-radius: 0.58rem;
  background: rgba(254, 226, 226, 0.58);
  padding: 0.24rem 0.4rem;
}

.rui-conflict-panel summary {
  cursor: pointer;
  font-size: 0.72rem;
  color: #7f1d1d;
}

.rui-conflict-panel ul {
  margin: 0.3rem 0 0;
  padding-left: 1rem;
  font-size: 0.71rem;
  color: #450a0a;
}

.rui-qa-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.55rem;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  padding: 0.72rem;
  background: #fff;
}

.rui-qa-form input[type="text"],
.rui-qa-form input[type="search"],
.rui-qa-form input[name="question"],
.rui-qa-form input[type="url"] {
  min-width: 0;
  border: 1px solid rgba(100, 116, 139, 0.45);
  border-radius: 0.6rem;
  padding: 0.55rem 0.64rem;
  font-size: 0.9rem;
}

.rui-qa-image-label {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  border: 1px dashed rgba(100, 116, 139, 0.46);
  border-radius: 0.55rem;
  padding: 0.42rem 0.54rem;
  font-size: 0.74rem;
  color: #334155;
  background: rgba(241, 245, 249, 0.76);
}

.rui-qa-image-label input[type="file"] {
  max-width: 122px;
  font-size: 0.68rem;
}

:root[data-rui-motion="reduce"] {
  --rui-bg-noise-opacity: 0;
  --rui-bg-interaction-opacity: 0;
  --rui-bg-frame-ms: 0ms;
  --rui-parallax-x: 0px;
  --rui-parallax-y: 0px;
}

:root[data-rui-motion="reduce"] *,
.rui-reduced-motion * {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

:root[data-rui-motion="reduce"] body::before,
.rui-reduced-motion body::before {
  animation: none !important;
}

:root[data-rui-motion="reduce"] body::after,
.rui-reduced-motion body::after {
  transition: none !important;
  transform: translate3d(0, 0, 0) !important;
}

:root[data-rui-perf-tier="low"] body::before,
:root[data-rui-perf-tier="low"] body::after {
  animation: none !important;
  transition: none !important;
}

:root[data-rui-motion="reduce"] #rui-reading-progress-inner,
.rui-reduced-motion #rui-reading-progress-inner {
  transition: none !important;
}

@page {
  size: A4;
  margin: 14mm 12mm;
}

@media print {
  :root {
    color-scheme: light;
  }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }

  body::before,
  body::after,
  #rui-reading-progress,
  #rui-ui-toast,
  #rui-year-rail,
  #rui-theme-lock,
  #rui-focus-toggle,
  #rui-bg-tune-toggle,
  #rui-bg-gallery-toggle,
  #rui-ff-toggle,
  #rui-qa-fab,
  #rui-qa-panel,
  #rui-color-mode-toggle,
  #rui-motion-toggle,
  #rui-motion-density-toggle,
  #rui-ff-panel {
    display: none !important;
  }

  article#content,
  article#content pre,
  article#content code,
  article#content table,
  article#content blockquote,
  article#content img,
  #post-list > div {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  article#content pre,
  article#content code,
  article#content .rui-table-scroll {
    white-space: pre-wrap !important;
    overflow: visible !important;
    max-width: 100% !important;
  }

  article#content img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --rui-bg-noise-opacity: 0;
    --rui-bg-interaction-opacity: 0;
    --rui-bg-frame-ms: 0ms;
    --rui-parallax-x: 0px;
    --rui-parallax-y: 0px;
  }

  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  body::before {
    animation: none;
  }

  body::after {
    transition: none;
    transform: translate3d(0, 0, 0);
  }

  #rui-reading-progress-inner {
    transition: none;
  }
}

.rui-reduced-motion body::before {
  animation: none !important;
}

.rui-reduced-motion body::after {
  transition: none !important;
  transform: translate3d(0, 0, 0) !important;
}

body.rui-focus-mode section.mx-auto.mt-6.grid.max-w-7xl {
  grid-template-columns: 1fr !important;
}

body.rui-focus-mode section.mx-auto.mt-6.grid.max-w-7xl > .complementary {
  display: none !important;
}

body.rui-focus-mode article#content {
  max-width: min(980px, 100%) !important;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1100px) {
  #rui-year-rail {
    display: none;
  }

  #rui-focus-toggle {
    bottom: 182px;
  }

  #rui-bg-tune-toggle {
    bottom: 220px;
  }

  #rui-bg-gallery-toggle {
    bottom: 258px;
  }

  #rui-ff-toggle {
    bottom: 296px;
  }

  #rui-color-mode-toggle {
    bottom: 334px;
  }

  #rui-motion-toggle {
    bottom: 372px;
  }

  #rui-motion-density-toggle {
    bottom: 410px;
  }

  #rui-privacy-toggle {
    bottom: 448px;
  }

  #rui-bg-tune-panel {
    bottom: 300px;
  }

  #rui-bg-gallery-panel {
    bottom: 338px;
  }

  #rui-ff-panel {
    bottom: 376px;
  }
}

.rui-qa-form button {
  border: 0;
  border-radius: 0.6rem;
  font-weight: 600;
  color: #fff;
  background: #1d4ed8;
  padding: 0.55rem 0.82rem;
  cursor: pointer;
}

.rui-subline {
  margin-top: 0.25rem;
  color: var(--rui-text-muted);
}

.rui-subline-en {
  margin-top: 0.1rem;
  font-size: 0.82rem;
  color: color-mix(in oklab, var(--rui-text-muted) 82%, #94a3b8 18%);
}

.rui-hero-meta {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.rui-hero-meta span {
  font-size: 0.76rem;
  color: #cbd5e1;
}

.rui-hero-meta button,
.rui-tone-switch button {
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  background: color-mix(in oklab, var(--rui-bg-2) 70%, #0f172a 30%);
  color: #e2e8f0;
  padding: 0.2rem 0.58rem;
  font-size: 0.72rem;
}

.rui-tone-switch {
  margin-top: 0.44rem;
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.rui-tone-switch button[aria-pressed="true"] {
  color: #041221;
  border-color: transparent;
  background: linear-gradient(120deg, var(--rui-accent), var(--rui-accent-2));
}

.rui-slogan-keyword {
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

#rui-dynamic-hero.rui-loading .rui-metric-value {
  color: transparent !important;
  position: relative;
  overflow: hidden;
  border-radius: 0.36rem;
  background: linear-gradient(
    110deg,
    color-mix(in oklab, var(--rui-bg-2) 72%, transparent) 8%,
    color-mix(in oklab, var(--rui-accent) 28%, transparent) 28%,
    color-mix(in oklab, var(--rui-bg-2) 72%, transparent) 48%
  );
  background-size: 220% 100%;
  animation: ruiShimmer var(--rui-load-ms, 960ms) linear infinite;
}

@keyframes ruiShimmer {
  from {
    background-position: 180% 0;
  }
  to {
    background-position: -40% 0;
  }
}

#rui-motion-density-toggle {
  position: fixed;
  right: 20px;
  z-index: 68;
  border: 1px solid rgba(148, 163, 184, 0.46);
  border-radius: 999px;
  padding: 0.46rem 0.75rem;
  font-size: 0.78rem;
  color: #dbeafe;
  background: color-mix(in oklab, var(--rui-bg-1) 78%, #0f172a 22%);
  backdrop-filter: blur(5px);
}

#rui-timeline-advanced {
  display: grid;
  gap: 0.45rem;
  margin: 0 0 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.84rem;
  padding: 0.6rem 0.68rem;
  background: color-mix(in oklab, var(--rui-bg-1) 76%, #0f172a 24%);
}

.rui-advanced-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.36rem;
  align-items: center;
}

.rui-advanced-row strong {
  font-size: 0.74rem;
  color: #cbd5e1;
}

.rui-advanced-row button {
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 999px;
  background: color-mix(in oklab, var(--rui-bg-2) 70%, #0f172a 30%);
  color: #dbeafe;
  padding: 0.18rem 0.55rem;
  font-size: 0.72rem;
}

.rui-advanced-row button[aria-pressed="true"] {
  color: #041221;
  border-color: transparent;
  background: linear-gradient(125deg, var(--rui-accent), var(--rui-accent-2));
}

#post-list > div.rui-theme-filter-hidden,
#post-list > div.rui-year-collapsed {
  display: none !important;
}

.rui-year-fold-toggle {
  margin: 0.3rem 0 0.36rem;
  border: 1px dashed rgba(148, 163, 184, 0.36);
  border-radius: 999px;
  padding: 0.15rem 0.52rem;
  background: transparent;
  color: #cbd5e1;
  font-size: 0.72rem;
}

.rui-representative {
  border-left: 3px solid color-mix(in oklab, var(--rui-accent) 72%, #22d3ee 28%);
  transform-style: preserve-3d;
  transition: transform calc(240ms * var(--rui-motion-duration-multiplier)) ease;
}

.rui-representative:hover {
  transform: perspective(980px) rotateY(2.8deg);
}

.rui-representative-badge {
  margin-left: 0.4rem;
  border-radius: 999px;
  padding: 0.05rem 0.42rem;
  font-size: 0.64rem;
  color: #03232d;
  background: linear-gradient(120deg, #67e8f9, #22d3ee);
}

#rui-timeline-hover-preview {
  position: fixed;
  z-index: 90;
  width: min(360px, calc(100vw - 24px));
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.72rem;
  padding: 0.58rem 0.66rem;
  background: color-mix(in oklab, var(--rui-bg-1) 88%, #0b1220 12%);
  box-shadow: 0 16px 34px rgba(2, 6, 23, 0.32);
  pointer-events: none;
}

#rui-timeline-hover-preview strong {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.84rem;
}

#rui-timeline-hover-preview p {
  margin: 0;
  font-size: 0.78rem;
  color: #cbd5e1;
  line-height: 1.45;
}

#rui-timeline-side-preview {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 90vw);
  transform: translateX(110%);
  transition: transform calc(220ms * var(--rui-motion-duration-multiplier)) ease;
  z-index: 92;
  border-left: 1px solid rgba(148, 163, 184, 0.3);
  background: color-mix(in oklab, var(--rui-bg-1) 85%, #0b1220 15%);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

#rui-timeline-side-preview.open {
  transform: translateX(0);
}

.rui-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.82rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.rui-preview-head button {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.2rem;
}

.rui-preview-body {
  overflow: auto;
  padding: 0.78rem 0.86rem;
}

.rui-preview-body h4 {
  margin: 0 0 0.45rem;
}

.rui-preview-actions {
  padding: 0.65rem 0.82rem;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.rui-preview-actions a {
  display: inline-flex;
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  color: #041221;
  background: linear-gradient(120deg, var(--rui-accent), var(--rui-accent-2));
  text-decoration: none;
  font-size: 0.78rem;
}

#rui-month-heatmap {
  margin: 0.2rem 0 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0.84rem;
  padding: 0.7rem 0.78rem;
  background: color-mix(in oklab, var(--rui-bg-1) 76%, #0f172a 24%);
}

.rui-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 0.32rem;
}

.rui-heatmap-cell {
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 0.46rem;
  min-height: 34px;
  color: var(--rui-text-main);
  background: color-mix(in oklab, var(--rui-accent) calc(var(--rui-intensity) * 100%), transparent);
}

.rui-heatmap-alt {
  margin-top: 0.58rem;
}

.rui-code-wrap {
  position: relative;
  padding-left: 3.1rem !important;
}

.rui-code-lines {
  list-style: none;
  margin: 0;
  padding: 0.7rem 0.35rem 0.7rem 0.5rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 2.6rem;
  border-right: 1px solid rgba(148, 163, 184, 0.24);
}

.rui-code-lines li {
  font-size: 0.66rem;
  line-height: 1.45;
  text-align: right;
  color: #94a3b8;
}

.rui-code-lines li a {
  color: inherit;
  text-decoration: none;
}

.rui-code-lines li.rui-code-line-highlight {
  color: #22d3ee;
  font-weight: 700;
}

.rui-code-lines li.is-hash-active {
  color: #f8fafc;
}

#rui-footnote-preview {
  position: fixed;
  z-index: 88;
  width: min(320px, calc(100vw - 20px));
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0.72rem;
  padding: 0.5rem 0.6rem;
  background: color-mix(in oklab, var(--rui-bg-1) 88%, #0f172a 12%);
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.34);
  font-size: 0.76rem;
  line-height: 1.45;
  pointer-events: none;
}

article#content blockquote.rui-quote-opinion {
  border-left: 3px solid #38bdf8;
  background: rgba(56, 189, 248, 0.12);
}

article#content blockquote.rui-quote-warning {
  border-left: 3px solid #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}

article#content blockquote.rui-quote-conclusion {
  border-left: 3px solid #22c55e;
  background: rgba(34, 197, 94, 0.12);
}

.rui-callout {
  border-radius: 0.72rem;
  padding: 0.58rem 0.66rem;
  margin: 0.72rem 0;
}

.rui-callout-info {
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.12);
}

.rui-callout-warn {
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.13);
}

.rui-callout-tip {
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.12);
}

.rui-math-scroll {
  overflow-x: auto;
  margin: 0.8rem 0;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0.7rem;
  padding: 0.4rem 0.56rem;
}

#rui-article-cta {
  margin: 1.1rem 0 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.86rem;
  padding: 0.68rem 0.76rem;
  background: color-mix(in oklab, var(--rui-bg-1) 78%, #0f172a 22%);
}

article#content > h1:first-of-type {
  padding-inline: clamp(10px, 2.4vw, 22px);
  word-break: break-word;
  text-wrap: balance;
}

h1.mt-3.text-3xl.font-medium {
  color: #0f172a;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

html.dark h1.mt-3.text-3xl.font-medium {
  color: #e2e8f0;
}

body[data-rui-editorial-edition="ai"] .z-0.min-w-0 > .rounded-xl {
  position: relative;
  border: 1px solid rgba(148, 163, 184, 0.26);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.15);
  overflow: hidden;
}

body[data-rui-editorial-edition="ai"] .z-0.min-w-0 > .rounded-xl::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(120deg, #0f172a, #0ea5e9 38%, #14b8a6 72%, #0f172a);
  opacity: 0.9;
  pointer-events: none;
}

html.dark body[data-rui-editorial-edition="ai"] .z-0.min-w-0 > .rounded-xl {
  box-shadow: 0 18px 44px rgba(2, 6, 23, 0.36);
}

body[data-rui-editorial-edition="ai"] #rui-narrative-scroll {
  border-width: 0 0 1px;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  box-shadow: none;
}

body[data-rui-editorial-edition="ai"] .rui-narrative-list li a {
  border-radius: 0.34rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-rui-editorial-edition="ai"] article#content {
  counter-reset: rui-section;
}

body[data-rui-editorial-edition="ai"] article#content > h2 {
  counter-increment: rui-section;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.56rem;
  margin-top: 1.58rem;
  margin-bottom: 0.7rem;
  padding: 0.74rem 0.9rem 0.68rem 0.96rem;
  border: 1px solid rgba(56, 189, 248, 0.26);
  border-radius: 0.88rem;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.94), rgba(241, 245, 249, 0.88)),
    linear-gradient(90deg, rgba(14, 165, 233, 0.08), transparent 58%);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1);
  color: #0f172a;
  letter-spacing: -0.01em;
}

body[data-rui-editorial-edition="ai"] article#content > h2::before {
  content: attr(data-rui-section-no);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  margin-right: 0.1rem;
  padding: 0.1rem 0.36rem;
  border-radius: 0.3rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #164e63;
  background: color-mix(in oklab, var(--rui-accent) 16%, #ffffff 84%);
}

body[data-rui-editorial-edition="ai"] article#content > h3 {
  margin-top: 1.1rem;
  margin-bottom: 0.38rem;
  padding-left: 0.15rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: #0f172a;
  border-bottom: 1px dashed rgba(100, 116, 139, 0.42);
}

body[data-rui-editorial-edition="ai"] article#content > h4 {
  margin-top: 1rem;
  margin-bottom: 0.34rem;
  padding: 0.62rem 0.78rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-left: 4px solid color-mix(in oklab, var(--rui-accent) 70%, #14b8a6 30%);
  border-radius: 0.74rem;
  background:
    linear-gradient(132deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92)),
    linear-gradient(90deg, rgba(14, 165, 233, 0.06), transparent 48%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  color: #0f172a;
  font-size: 0.98rem;
}

body[data-rui-editorial-edition="ai"] article#content > h4 + ul {
  margin-top: 0.32rem;
  margin-bottom: 0.4rem;
  padding: 0.44rem 0.62rem 0.44rem 1.1rem;
  border-radius: 0.58rem;
  background: rgba(248, 250, 252, 0.78);
}

body[data-rui-editorial-edition="ai"] article#content > h2 + p::first-letter {
  float: left;
  margin: 0.04rem 0.48rem 0 0;
  font-size: 2.2rem;
  line-height: 1;
  font-weight: 700;
  color: #0f172a;
}

body[data-rui-editorial-edition="ai"] article#content p {
  color: #1f2937;
}

body[data-rui-editorial-edition="ai"] article#content li {
  color: #374151;
}

html.dark body[data-rui-editorial-edition="ai"] article#content > h2 {
  background: color-mix(in oklab, var(--rui-bg-2) 70%, #0f172a 30%);
  border-color: rgba(56, 189, 248, 0.42);
  box-shadow: 0 16px 36px rgba(2, 6, 23, 0.32);
  color: #e2e8f0;
}

html.dark body[data-rui-editorial-edition="ai"] article#content > h2::before {
  color: #022c22;
  background: linear-gradient(120deg, #34d399, #6ee7b7);
}

html.dark body[data-rui-editorial-edition="ai"] article#content > h3 {
  color: #e2e8f0;
  border-bottom-color: rgba(148, 163, 184, 0.4);
}

html.dark body[data-rui-editorial-edition="ai"] article#content > h4 {
  color: #e2e8f0;
  background: color-mix(in oklab, var(--rui-bg-2) 66%, #0b1220 34%);
  border-color: rgba(148, 163, 184, 0.32);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.3);
}

html.dark body[data-rui-editorial-edition="ai"] article#content > h4 + ul {
  background: color-mix(in oklab, var(--rui-bg-2) 68%, #0f172a 32%);
}

html.dark body[data-rui-editorial-edition="ai"] article#content > h2 + p::first-letter {
  color: #67e8f9;
}

html.dark body[data-rui-editorial-edition="ai"] article#content p,
html.dark body[data-rui-editorial-edition="ai"] article#content li {
  color: #d1d5db;
}

body[data-rui-editorial-edition="git"] .z-0.min-w-0 > .rounded-xl {
  position: relative;
  border: 1px solid rgba(148, 163, 184, 0.24);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

body[data-rui-editorial-edition="git"] .z-0.min-w-0 > .rounded-xl::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(120deg, #0369a1, #0891b2 52%, #0f766e);
  opacity: 0.95;
  pointer-events: none;
}

body[data-rui-editorial-edition="git"] article#content > h2 {
  margin-top: 1.36rem;
  margin-bottom: 0.6rem;
  padding: 0.58rem 0.74rem;
  border-radius: 0.72rem;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.9));
  color: #0f172a;
  font-size: 1.03rem;
}

body[data-rui-editorial-edition="git"] article#content > h3 {
  margin-top: 0.96rem;
  margin-bottom: 0.36rem;
  padding-left: 0.12rem;
  border-left: 3px solid rgba(8, 145, 178, 0.45);
  color: #0f172a;
  font-size: 0.98rem;
}

body[data-rui-editorial-edition="git"] article#content > h4 {
  margin-top: 0.84rem;
  margin-bottom: 0.32rem;
  padding: 0.52rem 0.64rem;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 0.64rem;
  background: rgba(248, 250, 252, 0.82);
  color: #0f172a;
  font-size: 0.92rem;
}

body[data-rui-editorial-edition="git"] article#content p,
body[data-rui-editorial-edition="git"] article#content li {
  color: #334155;
}

html.dark body[data-rui-editorial-edition="git"] .z-0.min-w-0 > .rounded-xl {
  box-shadow: 0 14px 32px rgba(2, 6, 23, 0.34);
}

html.dark body[data-rui-editorial-edition="git"] article#content > h2 {
  background: color-mix(in oklab, var(--rui-bg-2) 72%, #0f172a 28%);
  border-color: rgba(148, 163, 184, 0.3);
  color: #e2e8f0;
}

html.dark body[data-rui-editorial-edition="git"] article#content > h3 {
  border-left-color: rgba(103, 232, 249, 0.42);
  color: #e2e8f0;
}

html.dark body[data-rui-editorial-edition="git"] article#content > h4 {
  color: #e2e8f0;
  border-color: rgba(148, 163, 184, 0.28);
  background: color-mix(in oklab, var(--rui-bg-2) 66%, #0b1220 34%);
}

html.dark body[data-rui-editorial-edition="git"] article#content p,
html.dark body[data-rui-editorial-edition="git"] article#content li {
  color: #cbd5e1;
}

#rui-article-cta h3 {
  margin: 0 0 0.45rem;
}

.rui-cta-copy {
  margin: 0 0 0.5rem;
  color: #cbd5e1;
  font-size: 0.82rem;
}

.rui-cta-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.36rem 0.54rem;
  margin: 0 0 0.54rem;
  font-size: 0.72rem;
  color: #94a3b8;
}

.rui-cta-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.rui-cta-toolbar select {
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 0.36rem;
  background: rgba(15, 23, 42, 0.5);
  color: #dbeafe;
  padding: 0.08rem 0.24rem;
  font-size: 0.7rem;
}

.rui-cta-list {
  margin: 0;
  padding-left: 1.05rem;
  display: grid;
  gap: 0.36rem;
}

.rui-cta-score,
.rui-cta-reason,
.rui-cta-confidence,
.rui-cta-source {
  margin-left: 0.4rem;
  font-size: 0.72rem;
  color: #94a3b8;
}

.rui-cta-stale {
  margin-left: 0.36rem;
  border: 1px solid rgba(185, 28, 28, 0.25);
  border-radius: 999px;
  padding: 0.02rem 0.3rem;
  font-size: 0.68rem;
  color: #b91c1c;
  background: rgba(254, 226, 226, 0.75);
}

.rui-cta-explain {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: #cbd5e1;
}

.rui-cta-explain ul {
  margin: 0.24rem 0 0;
  padding-left: 0.9rem;
}

.rui-cta-conflict-chip {
  margin-left: 0.36rem;
  border: 1px solid rgba(185, 28, 28, 0.3);
  border-radius: 999px;
  padding: 0.02rem 0.28rem;
  font-size: 0.68rem;
  color: #7f1d1d;
  background: rgba(254, 226, 226, 0.72);
}

.rui-cta-conflict {
  margin-top: 0.2rem;
  font-size: 0.72rem;
}

.rui-cta-conflict summary {
  color: #fecaca;
}

.rui-cta-conflict p {
  margin: 0.18rem 0 0;
  color: #fecaca;
}

#rui-digest-enhancements {
  margin: 0.6rem 0 1rem;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 1rem;
  padding: 0.78rem 0.82rem;
  background: linear-gradient(138deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

html.dark #rui-digest-enhancements {
  background: color-mix(in oklab, var(--rui-bg-1) 78%, #0f172a 22%);
  box-shadow: none;
}

.rui-digest-head {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.7rem;
  padding-bottom: 0.62rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.rui-digest-head strong {
  display: block;
  font-size: 0.96rem;
  font-weight: 700;
  color: #0f172a;
}

html.dark .rui-digest-head strong {
  color: #e2e8f0;
}

.rui-editorial-kicker {
  margin: 0 0 0.28rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0f172a;
  opacity: 0.72;
}

html.dark .rui-editorial-kicker {
  color: #cbd5e1;
  opacity: 0.85;
}

#rui-digest-enhancements.rui-editorial-ai {
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-left-width: 6px;
  border-left-color: color-mix(in oklab, var(--rui-accent) 62%, #06b6d4 38%);
  background:
    radial-gradient(680px 280px at 84% -18%, rgba(14, 165, 233, 0.34), transparent 66%),
    linear-gradient(146deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.92) 58%, rgba(8, 47, 73, 0.9));
  box-shadow: 0 24px 50px rgba(2, 6, 23, 0.28);
  color: #e2e8f0;
}

#rui-digest-enhancements.rui-editorial-ai .rui-digest-head {
  border-bottom-style: solid;
}

#rui-digest-enhancements.rui-editorial-ai .rui-digest-head strong {
  color: #f8fafc;
}

#rui-digest-enhancements.rui-editorial-ai .rui-editorial-kicker {
  color: #bae6fd;
  opacity: 0.98;
}

#rui-digest-enhancements.rui-editorial-ai .rui-digest-subtitle {
  color: #cbd5e1;
}

#rui-digest-enhancements.rui-editorial-ai .rui-digest-actions button {
  border-radius: 0.34rem;
  letter-spacing: 0.02em;
  border-color: rgba(125, 211, 252, 0.42);
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.46);
}

#rui-digest-enhancements.rui-editorial-ai .rui-digest-visual summary {
  letter-spacing: 0.02em;
}

#rui-digest-enhancements.rui-editorial-ai .rui-digest-visual {
  background: rgba(2, 6, 23, 0.36);
  border-color: rgba(125, 211, 252, 0.24);
}

#rui-digest-enhancements.rui-editorial-git {
  border-left-width: 6px;
  border-left-color: rgba(8, 145, 178, 0.58);
  background:
    radial-gradient(620px 220px at 88% -20%, rgba(14, 165, 233, 0.2), transparent 64%),
    linear-gradient(138deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.93));
}

#rui-digest-enhancements.rui-editorial-git .rui-digest-head {
  border-bottom-color: rgba(148, 163, 184, 0.26);
}

#rui-digest-enhancements.rui-editorial-git .rui-editorial-kicker {
  color: #0c4a6e;
}

#rui-digest-enhancements.rui-editorial-git .rui-digest-subtitle {
  color: #334155;
}

#rui-digest-enhancements.rui-editorial-git .rui-digest-actions button {
  border-radius: 0.56rem;
  border-color: rgba(8, 145, 178, 0.36);
  color: #0f172a;
  background: rgba(255, 255, 255, 0.9);
}

html.dark #rui-digest-enhancements.rui-editorial-git {
  border-left-color: rgba(103, 232, 249, 0.6);
  background:
    radial-gradient(620px 220px at 88% -20%, rgba(6, 182, 212, 0.28), transparent 64%),
    color-mix(in oklab, var(--rui-bg-1) 80%, #0f172a 20%);
}

html.dark #rui-digest-enhancements.rui-editorial-git .rui-editorial-kicker {
  color: #67e8f9;
}

html.dark #rui-digest-enhancements.rui-editorial-git .rui-digest-subtitle {
  color: #bfdbfe;
}

html.dark #rui-digest-enhancements.rui-editorial-git .rui-digest-actions button {
  color: #dbeafe;
  border-color: rgba(56, 189, 248, 0.42);
  background: color-mix(in oklab, var(--rui-bg-2) 68%, #0b1220 32%);
}

.rui-digest-subtitle {
  margin-top: 0.24rem;
  font-size: 0.74rem;
  color: #475569;
}

html.dark .rui-digest-subtitle {
  color: #94a3b8;
}

.rui-digest-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.34rem;
}

.rui-digest-head button {
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 0.62rem;
  padding: 0.24rem 0.58rem;
  background: rgba(255, 255, 255, 0.9);
  color: #0f172a;
  font-size: 0.7rem;
  font-weight: 600;
}

html.dark .rui-digest-head button {
  background: color-mix(in oklab, var(--rui-bg-2) 70%, #0f172a 30%);
  color: #dbeafe;
}

.rui-digest-visual {
  margin-top: 0.56rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 0.82rem;
  background: color-mix(in oklab, var(--rui-accent) 4%, #ffffff 96%);
}

.rui-digest-visual summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.76rem;
  font-weight: 600;
  color: #334155;
  padding: 0.45rem 0.58rem;
}

.rui-digest-visual summary::-webkit-details-marker {
  display: none;
}

html.dark .rui-digest-visual {
  background: color-mix(in oklab, var(--rui-bg-2) 68%, #0f172a 32%);
}

html.dark .rui-digest-visual summary {
  color: #cbd5e1;
}

.rui-digest-alt-table {
  margin: 0.2rem 0.52rem 0.5rem;
}

.rui-digest-alt-table summary {
  cursor: pointer;
  font-size: 0.7rem;
  color: #475569;
}

.rui-digest-alt-table table {
  width: 100%;
  margin-top: 0.28rem;
  border-collapse: collapse;
  font-size: 0.68rem;
}

.rui-digest-alt-table th,
.rui-digest-alt-table td {
  border: 1px solid rgba(148, 163, 184, 0.22);
  padding: 0.28rem 0.34rem;
  color: #334155;
}

html.dark .rui-digest-alt-table summary {
  color: #cbd5e1;
}

html.dark .rui-digest-alt-table th,
html.dark .rui-digest-alt-table td {
  color: #cbd5e1;
}

.rui-digest-chart svg {
  width: 100%;
  height: 130px;
  color: color-mix(in oklab, var(--rui-accent) 78%, #0ea5e9 22%);
}

.rui-digest-chart {
  padding: 0.06rem 0.52rem 0.12rem;
}

.rui-digest-cluster {
  margin-top: 0.36rem;
  padding: 0 0.52rem 0.46rem;
}

.rui-cluster-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem;
}

.rui-cluster-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(58px, calc(var(--rui-bubble-size) * 0.6), 102px);
  height: clamp(30px, calc(var(--rui-bubble-size) * 0.35), 40px);
  border-radius: 0.68rem;
  border: 1px solid rgba(148, 163, 184, 0.26);
  color: #0f172a;
  background: color-mix(in oklab, var(--rui-accent) 12%, #ffffff 88%);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

html.dark .rui-cluster-bubble {
  color: #dbeafe;
  background: color-mix(in oklab, var(--rui-accent) 28%, transparent);
}

.rui-digest-meta {
  margin: 0.34rem 0 0.76rem;
  display: grid;
  gap: 0.42rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 0.82rem;
  padding: 0.48rem 0.54rem;
  background: color-mix(in oklab, var(--rui-accent) 3%, #ffffff 97%);
}

html.dark .rui-digest-meta {
  background: color-mix(in oklab, var(--rui-bg-2) 64%, #0b1220 36%);
}

.rui-digest-primary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  align-items: center;
}

.rui-metric-pill,
.rui-watch-toggle {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.64rem;
  padding: 0.15rem 0.52rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #1e293b;
  background: rgba(255, 255, 255, 0.92);
}

html.dark .rui-metric-pill,
html.dark .rui-watch-toggle {
  color: #dbeafe;
  background: color-mix(in oklab, var(--rui-bg-2) 72%, #0b1325 28%);
}

.rui-score-pill {
  border-color: color-mix(in oklab, var(--rui-accent) 36%, rgba(148, 163, 184, 0.44) 56%);
  color: #155e75;
}

html.dark .rui-score-pill {
  color: #dbeafe;
}

.rui-quality-pill {
  border-color: rgba(14, 165, 233, 0.34);
  color: #0369a1;
}

html.dark .rui-quality-pill {
  color: #dbeafe;
}

.rui-trend-pill.up {
  color: #134e4a;
  border-color: transparent;
  background: linear-gradient(120deg, #6ee7b7, #a7f3d0);
}

.rui-trend-pill.flat {
  color: #0c4a6e;
  border-color: transparent;
  background: linear-gradient(120deg, #bae6fd, #7dd3fc);
}

.rui-trend-pill.down {
  color: #7f1d1d;
  border-color: transparent;
  background: linear-gradient(120deg, #fecdd3, #fda4af);
}

.rui-velocity-pill {
  border-color: rgba(2, 132, 199, 0.34);
  color: #075985;
}

.rui-track-pill {
  border-color: rgba(20, 184, 166, 0.34);
  color: #115e59;
}

.rui-digest-meta-git {
  margin-top: 0.3rem;
  gap: 0.3rem;
  border-color: rgba(148, 163, 184, 0.2);
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.9));
}

.rui-digest-primary-git {
  row-gap: 0.24rem;
}

.rui-git-decision,
.rui-git-risk {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.55;
  color: #334155;
}

.rui-git-repo-link {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(8, 145, 178, 0.34);
  border-radius: 0.58rem;
  padding: 0.16rem 0.52rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  color: #0c4a6e;
  background: rgba(240, 249, 255, 0.9);
}

.rui-git-repo-link:hover {
  border-color: rgba(2, 132, 199, 0.52);
  background: rgba(224, 242, 254, 0.95);
}

html.dark .rui-velocity-pill {
  color: #bae6fd;
}

html.dark .rui-track-pill {
  color: #99f6e4;
}

html.dark .rui-digest-meta-git {
  border-color: rgba(148, 163, 184, 0.28);
  background: color-mix(in oklab, var(--rui-bg-2) 66%, #0b1320 34%);
}

html.dark .rui-git-decision,
html.dark .rui-git-risk {
  color: #cbd5e1;
}

html.dark .rui-git-repo-link {
  color: #a5f3fc;
  border-color: rgba(34, 211, 238, 0.42);
  background: color-mix(in oklab, var(--rui-bg-2) 60%, rgba(15, 118, 110, 0.34) 40%);
}

.rui-watch-toggle[aria-pressed="true"] {
  color: #0c4a6e;
  background: linear-gradient(120deg, #a5f3fc, #67e8f9);
}

html.dark .rui-watch-toggle[aria-pressed="true"] {
  color: #03232d;
  background: linear-gradient(120deg, #67e8f9, #22d3ee);
}

.rui-digest-advanced {
  margin: 0;
}

.rui-digest-advanced summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 0.58rem;
  padding: 0.12rem 0.52rem;
  font-size: 0.68rem;
  color: #334155;
  background: rgba(255, 255, 255, 0.86);
}

html.dark .rui-digest-advanced summary {
  color: #bfdbfe;
  background: color-mix(in oklab, var(--rui-bg-2) 68%, #0f172a 32%);
}

.rui-digest-advanced-grid {
  margin-top: 0.4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 0.34rem;
}

.rui-advanced-item {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 0.58rem;
  padding: 0.3rem 0.44rem;
  font-size: 0.68rem;
  color: #334155;
  background: rgba(255, 255, 255, 0.92);
}

html.dark .rui-advanced-item {
  color: #cbd5e1;
  background: color-mix(in oklab, var(--rui-bg-2) 65%, #0b1220 35%);
}

.rui-advanced-item.rui-advanced-risk {
  color: #7f1d1d;
  border-color: rgba(248, 113, 113, 0.44);
  background: rgba(254, 226, 226, 0.9);
}

html.dark .rui-advanced-item.rui-advanced-risk {
  color: #fecaca;
  background: color-mix(in oklab, var(--rui-bg-2) 55%, rgba(127, 29, 29, 0.5) 45%);
}

.rui-digest-advanced-note {
  margin: 0.38rem 0 0;
  font-size: 0.66rem;
  color: #64748b;
}

html.dark .rui-digest-advanced-note {
  color: #93c5fd;
}

#rui-pointer-glow {
  position: fixed;
  inset: 0 auto auto 0;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 80;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.65) 0%, rgba(56, 189, 248, 0) 72%);
  mix-blend-mode: screen;
  transition: transform calc(90ms * var(--rui-motion-duration-multiplier)) linear;
}

:root[data-rui-labs-cursor="on"] * {
  cursor: crosshair;
}

:root[data-rui-labs-cursor="on"] a,
:root[data-rui-labs-cursor="on"] button,
:root[data-rui-labs-cursor="on"] [role="button"] {
  cursor: pointer;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--rui-vt-duration);
}

:root[data-rui-vt-section="ai"] ::view-transition-new(root) {
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

:root[data-rui-vt-section="git"] ::view-transition-new(root) {
  animation-timing-function: cubic-bezier(0.25, 0.78, 0.18, 1);
}

:root[data-rui-vt-section="blog"] ::view-transition-new(root) {
  animation-timing-function: cubic-bezier(0.22, 0.7, 0.2, 1);
}

.rui-scroll-in {
  will-change: transform, opacity;
  animation: ruiSectionIn calc(420ms * var(--rui-motion-duration-multiplier)) ease both;
}

@keyframes ruiSectionIn {
  from {
    opacity: 0.25;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 840px) {
  .rui-hero-inner {
    grid-template-columns: 1fr;
  }

  #rui-timeline-search {
    grid-template-columns: 1fr auto;
  }

  #rui-timeline-search label {
    grid-column: 1 / -1;
  }

  #rui-timeline-search input {
    grid-column: 1 / -1;
  }

  #rui-timeline-search-meta {
    grid-column: 1 / -1;
    white-space: normal;
  }

  #rui-qa-fab {
    right: 14px;
    bottom: 76px;
  }

  #rui-qa-panel {
    right: 12px;
    bottom: 124px;
    width: calc(100vw - 24px);
  }

  #rui-bg-tune-toggle,
  #rui-bg-gallery-toggle,
  #rui-ff-toggle,
  #rui-color-mode-toggle,
  #rui-motion-toggle,
  #rui-motion-density-toggle,
  #rui-privacy-toggle {
    right: 12px;
  }

  #rui-bg-tune-panel,
  #rui-bg-gallery-panel,
  #rui-ff-panel {
    right: 12px;
    width: calc(100vw - 24px);
  }

  #rui-bg-tune-toggle {
    bottom: 198px;
  }

  #rui-bg-gallery-toggle {
    bottom: 236px;
  }

  #rui-ff-toggle {
    bottom: 274px;
  }

  #rui-color-mode-toggle {
    bottom: 312px;
  }

  #rui-motion-toggle {
    bottom: 350px;
  }

  #rui-motion-density-toggle {
    bottom: 388px;
  }

  #rui-privacy-toggle {
    bottom: 426px;
  }

  #rui-bg-tune-panel {
    bottom: 276px;
  }

  #rui-bg-gallery-panel {
    bottom: 314px;
    max-height: min(64vh, 620px);
  }

  #rui-ff-panel {
    bottom: 352px;
    max-height: min(56vh, 560px);
  }

  .rui-bg-gallery-form {
    grid-template-columns: 1fr;
  }
}
/* rui-custom-ui v2 - Additional styles for FX-221~240 */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&family=IBM+Plex+Mono:wght@400;600&display=swap");

/* FX-222: Save-Data 感知模式 */
:root {
  --rui-scene-glow: 0.3;
  --rui-scene-saturation: 1;
  --rui-scene-brightness: 1;
  --rui-parallax-crop-ratio: 0.85;
  --rui-article-font-scale: 1;
  --rui-article-line-height: 1.8;
  --rui-article-noise: 0;
  --rui-card-gap: 1rem;
  --rui-card-padding: 1rem;
  --rui-cursor-size: 12px;
  --rui-cursor-color: var(--rui-accent);
}

:root[data-rui-save-data="on"] #rui-bg-canvas,
:root[data-rui-save-data="on"] body::after,
:root[data-rui-save-data="on"] body::before {
  display: none;
}

:root[data-rui-save-data="on"] {
  --rui-bg-noise-opacity: 0;
  --rui-bg-interaction-opacity: 0;
}

#rui-save-data-toggle {
  position: fixed;
  right: 20px;
  bottom: 516px;
  z-index: 70;
}

/* FX-225: 主题编舞引擎 */
:root[data-rui-scene="day"] {
  --rui-scene-glow: 0.28;
  --rui-scene-saturation: 1.08;
  --rui-scene-brightness: 1.02;
}

:root[data-rui-scene="night"] {
  --rui-scene-glow: 0.42;
  --rui-scene-saturation: 0.92;
  --rui-scene-brightness: 0.94;
}

:root[data-rui-scene="weather"] {
  --rui-scene-glow: 0.36;
  --rui-scene-saturation: 1.12;
  --rui-scene-brightness: 0.98;
}

:root[data-rui-scene="holiday"] {
  --rui-scene-glow: 0.52;
  --rui-scene-saturation: 1.24;
  --rui-scene-brightness: 1.06;
}

#rui-dynamic-hero {
  filter: saturate(var(--rui-hero-saturation)) brightness(var(--rui-scene-brightness));
}

#rui-scene-toggle {
  position: fixed;
  right: 20px;
  bottom: 554px;
  z-index: 70;
}

/* FX-226: 阅读专注场景 */
#rui-reading-focus-panel {
  position: fixed;
  right: 20px;
  bottom: 150px;
  z-index: 65;
  width: 260px;
  background: var(--rui-surface);
  border: 1px solid var(--rui-border);
  border-radius: 0.86rem;
  backdrop-filter: blur(8px);
  transform: translateX(calc(100% + 30px));
  transition: transform 300ms ease;
}

#rui-reading-focus-panel.open {
  transform: translateX(0);
}

.rui-focus-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--rui-border);
}

.rui-focus-panel-head strong {
  font-size: 0.9rem;
  color: var(--rui-text-main);
}

.rui-focus-panel-head button {
  background: none;
  border: none;
  color: var(--rui-text-muted);
  font-size: 1.2rem;
  cursor: pointer;
}

.rui-focus-panel-body {
  padding: 0.9rem;
}

.rui-focus-panel-body fieldset {
  border: none;
  margin-bottom: 0.8rem;
}

.rui-focus-panel-body legend {
  font-size: 0.75rem;
  color: var(--rui-text-muted);
  margin-bottom: 0.4rem;
}

.rui-focus-slider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.rui-focus-slider-row button {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--rui-border);
  border-radius: 0.4rem;
  background: var(--rui-bg-2);
  color: var(--rui-text-main);
  font-size: 0.75rem;
  cursor: pointer;
}

.rui-focus-value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  color: var(--rui-accent);
}

.rui-focus-panel-actions {
  margin-top: 0.8rem;
}

.rui-focus-panel-actions button {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--rui-border);
  border-radius: 0.4rem;
  background: var(--rui-bg-2);
  color: var(--rui-text-muted);
  font-size: 0.8rem;
  cursor: pointer;
}

#rui-reading-focus-toggle {
  position: fixed;
  right: 20px;
  bottom: 112px;
  z-index: 70;
}

:root[data-rui-article-font-scale] article#content {
  font-size: calc(1rem * var(--rui-article-font-scale, 1));
}

:root[data-rui-article-line-height] article#content {
  line-height: var(--rui-article-line-height, 1.8);
}

body.rui-reading-focus-noise::before {
  opacity: var(--rui-article-noise, 0);
}

/* FX-228: 叙事型滚动章节过渡 */
#rui-narrative-scroll {
  position: sticky;
  top: 74px;
  z-index: 16;
  margin: 0 0 1.1rem;
  padding: 0.3rem 0.42rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.88rem;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(8px);
}

html.dark #rui-narrative-scroll {
  border-color: color-mix(in oklab, var(--rui-accent) 20%, var(--rui-border) 80%);
  background: color-mix(in oklab, var(--rui-bg-1) 88%, #050b16 12%);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.22);
}

.rui-narrative-list {
  display: flex;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}

.rui-narrative-list li a {
  display: block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.62rem;
  border: 1px solid rgba(148, 163, 184, 0.26);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  color: #334155;
  text-decoration: none;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.9);
  transition: all 180ms ease;
}

html.dark .rui-narrative-list li a {
  color: var(--rui-text-muted);
  background: color-mix(in oklab, var(--rui-bg-2) 64%, #0f172a 36%);
}

.rui-narrative-list li a:hover {
  color: #0f172a;
  border-color: color-mix(in oklab, var(--rui-accent) 44%, #38bdf8 56%);
  background: color-mix(in oklab, var(--rui-accent) 12%, #ffffff 88%);
}

html.dark .rui-narrative-list li a:hover {
  color: var(--rui-text-main);
  background: color-mix(in oklab, var(--rui-bg-3) 72%, #0b1326 28%);
}

.rui-narrative-list li a.active {
  color: #083344;
  border-color: transparent;
  background: linear-gradient(122deg, color-mix(in oklab, var(--rui-accent) 18%, #ffffff 82%), color-mix(in oklab, var(--rui-accent-2) 22%, #ffffff 78%));
  box-shadow: 0 6px 16px rgba(14, 165, 233, 0.16);
}

html.dark .rui-narrative-list li a.active {
  color: #041221;
  background: linear-gradient(125deg, color-mix(in oklab, var(--rui-accent) 90%, #fff 10%), var(--rui-accent-2));
  box-shadow: 0 8px 20px rgba(6, 182, 212, 0.3);
}

/* FX-229: 今日技术脉搏组件 */
#rui-tech-pulse-widget {
  margin: 0 0 1.2rem;
  padding: 1rem;
  background: var(--rui-surface);
  border: 1px solid var(--rui-border);
  border-radius: 0.86rem;
  backdrop-filter: blur(6px);
}

.rui-pulse-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.7rem;
}

.rui-pulse-head strong {
  font-size: 0.92rem;
  color: var(--rui-text-main);
}

.rui-pulse-time {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  color: var(--rui-text-muted);
}

.rui-pulse-chart {
  height: 80px;
  margin-bottom: 0.5rem;
}

.rui-pulse-chart canvas {
  width: 100%;
  height: 100%;
}

.rui-pulse-legend {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
}

.rui-pulse-legend-item {
  font-size: 0.72rem;
  color: var(--rui-text-muted);
  padding: 0.2rem 0.5rem;
  border-radius: 0.3rem;
  background: var(--rui-bg-2);
}

.rui-pulse-legend-item[data-trend="up"] {
  color: #34d399;
}

.rui-pulse-legend-item[data-trend="down"] {
  color: #f87171;
}

/* FX-230: 评论区氛围主题化 */
:root[data-rui-comment-theme="calm"] #comments,
:root[data-rui-comment-theme="calm"] .comments {
  background: var(--rui-comment-bg, rgba(30, 41, 59, 0.4));
}

:root[data-rui-comment-theme="energetic"] #comments,
:root[data-rui-comment-theme="energetic"] .comments {
  background: var(--rui-comment-bg, rgba(59, 130, 246, 0.15));
}

:root[data-rui-comment-theme="focused"] #comments,
:root[data-rui-comment-theme="focused"] .comments {
  background: var(--rui-comment-bg, rgba(15, 23, 42, 0.6));
}

#rui-comment-theme-toggle {
  position: fixed;
  right: 20px;
  bottom: 592px;
  z-index: 70;
}

/* FX-231: 卡片密度自适应 */
:root[data-rui-card-density="compact"] #post-list > div {
  padding: var(--rui-card-padding, 0.6rem);
  gap: var(--rui-card-gap, 0.5rem);
}

:root[data-rui-card-density="comfortable"] #post-list > div {
  padding: var(--rui-card-padding, 1rem);
  gap: var(--rui-card-gap, 1rem);
}

:root[data-rui-card-density="spacious"] #post-list > div {
  padding: var(--rui-card-padding, 1.4rem);
  gap: var(--rui-card-gap, 1.5rem);
}

#rui-card-density-toggle {
  position: fixed;
  right: 20px;
  bottom: 630px;
  z-index: 70;
}

/* FX-232: 背景音景可插拔 */
:root.rui-soundscape-active {
  --rui-bg-noise-opacity: 0.03;
}

#rui-soundscape-toggle {
  position: fixed;
  right: 20px;
  bottom: 668px;
  z-index: 70;
}

/* FX-233: WebGL话题热力云 */
#rui-topic-cloud {
  margin: 0 0 1.2rem;
  height: 140px;
  background: var(--rui-surface);
  border: 1px solid var(--rui-border);
  border-radius: 0.86rem;
  overflow: hidden;
}

#rui-topic-cloud-canvas {
  width: 100%;
  height: 100%;
}

/* FX-234: 光标语义特效 */
:root {
  cursor: default;
}

:root[data-rui-cursor-effect="link"] {
  cursor: pointer;
}

:root[data-rui-cursor-effect="button"] {
  cursor: pointer;
}

:root[data-rui-cursor-effect="input"],
:root[data-rui-cursor-effect="code"] {
  cursor: text;
}

/* FX-235: 动态排版节奏系统 */
:root[data-rui-typography-rhythm="on"] article#content p,
:root[data-rui-typography-rhythm="on"] article#content li {
  animation: rui-rhythm-enter 400ms ease-out both;
  animation-delay: var(--rui-rhythm-delay, 0ms);
}

@keyframes rui-rhythm-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#rui-typography-rhythm-toggle {
  position: fixed;
  right: 20px;
  bottom: 706px;
  z-index: 70;
}

/* FX-236: 篇章结尾情绪落点动画 */
#rui-emotion-endpoint {
  margin-top: 3rem;
  padding: 2rem;
  text-align: center;
  opacity: 0;
  transform: scale(0.92);
  transition: all 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

#rui-emotion-endpoint.visible {
  opacity: 1;
  transform: scale(1);
}

.rui-emotion-content {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.rui-emotion-icon {
  font-size: 2.4rem;
}

.rui-emotion-text {
  font-size: 1.1rem;
  color: var(--rui-text-muted);
}

/* FX-237: 首页探索宇宙交互地图 */
#rui-explore-launch {
  position: fixed;
  right: 20px;
  bottom: 188px;
  z-index: 75;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 999px;
  padding: 0.5rem 0.82rem;
  font-size: 0.78rem;
  color: #e2e8f0;
  background: linear-gradient(130deg, #0f172a, #1d4ed8);
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.34);
}

#rui-explore-universe {
  position: fixed;
  inset: 0;
  z-index: 132;
  display: none;
  grid-template-rows: auto auto minmax(0, 1fr);
  padding: 0.78rem;
  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(7px);
}

#rui-explore-universe.open {
  display: grid;
}

.rui-explore-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  border-radius: 0.74rem 0.74rem 0 0;
  padding: 0.58rem 0.84rem;
  background: linear-gradient(124deg, #0f172a, #1e3a8a);
  color: #e2e8f0;
}

.rui-explore-actions {
  display: inline-flex;
  gap: 0.36rem;
}

.rui-explore-actions button {
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 999px;
  padding: 0.2rem 0.54rem;
  font-size: 0.72rem;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.45);
}

.rui-explore-tip {
  margin: 0;
  border-left: 2px solid rgba(56, 189, 248, 0.6);
  padding: 0.42rem 0.62rem;
  background: rgba(15, 23, 42, 0.4);
  color: #cbd5e1;
  font-size: 0.76rem;
}

#rui-universe-canvas {
  width: 100%;
  height: min(72vh, 760px);
  border-radius: 0 0 0.74rem 0.74rem;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: linear-gradient(135deg, #020617 0%, #0f172a 35%, #1e1b4b 100%);
}

/* FX-12001~12500: WebGL Shader Effects */
#rui-vertex-shader-canvas,
#rui-fragment-shader-canvas,
#rui-noise-texture-canvas,
#rui-fractal-canvas,
#rui-ripple-canvas,
#rui-motion-blur-canvas,
#rui-bloom-canvas,
#rui-light-rays-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

#rui-vertex-shader-container,
#rui-fragment-shader-container,
#rui-noise-texture-container,
#rui-fractal-container,
#rui-ripple-container,
#rui-motion-blur-container,
#rui-bloom-container,
#rui-light-rays-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* FX-12001: Vertex Shader Animation */
#rui-vertex-shader-canvas {
  mix-blend-mode: screen;
  opacity: 0.7;
}

/* FX-12002: Fragment Shader Color */
#rui-fragment-shader-canvas {
  mix-blend-mode: overlay;
  opacity: 0.6;
}

/* FX-12003: Noise Texture */
#rui-noise-texture-canvas {
  mix-blend-mode: soft-light;
  opacity: 0.5;
}

/* FX-12004: Fractal Effect */
#rui-fractal-canvas {
  mix-blend-mode: screen;
  opacity: 0.55;
}

/* FX-12005: Ripple Effect */
#rui-ripple-canvas {
  mix-blend-mode: overlay;
  opacity: 0.65;
}

/* FX-12011: Motion Blur */
#rui-motion-blur-canvas {
  mix-blend-mode: screen;
  opacity: 0.5;
}

/* FX-12013: Bloom Effect */
#rui-bloom-canvas {
  mix-blend-mode: lighten;
  opacity: 0.6;
}

/* FX-12020: Light Rays */
#rui-light-rays-canvas {
  mix-blend-mode: screen;
  opacity: 0.55;
}

/* FX-19001~19300: Advanced 3D Interactions */

/* WebXR Status Panel */
#rui-webxr-status {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #e2e8f0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
}

#rui-webxr-status .rui-webxr-icon {
  font-size: 1.2rem;
}

#rui-webxr-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 1rem;
  padding: 1.5rem;
  min-width: 280px;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  display: none;
}

#rui-webxr-panel[data-mounted] {
  display: block;
}

#rui-webxr-panel h4 {
  margin: 0 0 1rem;
  color: #38bdf8;
  font-size: 1rem;
  font-weight: 600;
}

#rui-webxr-panel .rui-webxr-status-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

#rui-webxr-panel .rui-webxr-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: rgba(30, 41, 59, 0.5);
  border-radius: 0.5rem;
}

#rui-webxr-panel .rui-webxr-item .label {
  color: #cbd5e1;
}

#rui-webxr-panel .rui-webxr-item .status {
  font-weight: 500;
  font-size: 0.85rem;
}

#rui-webxr-panel .rui-webxr-item .status.ok {
  color: #22c55e;
}

#rui-webxr-panel .rui-webxr-item .status.error {
  color: #ef4444;
}

#rui-webxr-panel .rui-webxr-actions {
  display: flex;
  gap: 0.75rem;
}

#rui-webxr-panel button {
  flex: 1;
  padding: 0.6rem 1rem;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(20, 184, 166, 0.2));
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 0.5rem;
  color: #e2e8f0;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

#rui-webxr-panel button:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.3), rgba(20, 184, 166, 0.3));
  border-color: rgba(56, 189, 248, 0.6);
}

#rui-webxr-panel button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* VR Mode */
#rui-vr-container {
  position: relative;
  margin: 1.5rem auto;
  max-width: 900px;
}

#rui-vr-container .rui-vr-controls {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
}

#rui-vr-container #rui-vr-enter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(59, 130, 246, 0.3));
  border: 1px solid rgba(139, 92, 246, 0.5);
  border-radius: 0.75rem;
  color: #e2e8f0;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

#rui-vr-container #rui-vr-enter:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.5), rgba(59, 130, 246, 0.5));
  transform: scale(1.05);
}

#rui-vr-container .rui-vr-icon {
  font-size: 1.2rem;
}

#rui-vr-canvas {
  width: 100%;
  height: 400px;
  border-radius: 0.75rem;
  border: 1px solid rgba(139, 92, 246, 0.3);
  background: #030712;
  cursor: grab;
}

#rui-vr-canvas:active {
  cursor: grabbing;
}

/* AR Mode */
#rui-ar-container {
  position: relative;
  margin: 1.5rem auto;
  max-width: 900px;
}

#rui-ar-container .rui-ar-controls {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  display: flex;
  gap: 0.5rem;
}

#rui-ar-container .rui-ar-controls button {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.8rem;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(20, 184, 166, 0.3));
  border: 1px solid rgba(34, 197, 94, 0.5);
  border-radius: 0.75rem;
  color: #e2e8f0;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

#rui-ar-container .rui-ar-controls button:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.5), rgba(20, 184, 166, 0.5));
  transform: scale(1.05);
}

#rui-ar-container .rui-ar-controls button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#rui-ar-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 0.75rem;
  display: none;
}

#rui-ar-canvas {
  width: 100%;
  height: 400px;
  border-radius: 0.75rem;
  border: 1px solid rgba(34, 197, 94, 0.3);
  background: #111827;
}

#rui-ar-container.ar-active #rui-ar-video,
#rui-ar-container.ar-active #rui-ar-canvas {
  display: block;
}

#rui-ar-container.ar-active {
  border-color: rgba(34, 197, 94, 0.6);
  box-shadow: 0 0 30px rgba(34, 197, 94, 0.2);
}

/* Responsive */
@media (max-width: 640px) {
  #rui-webxr-panel {
    left: 1rem;
    right: 1rem;
    transform: none;
    min-width: auto;
  }

  #rui-vr-canvas,
  #rui-ar-canvas {
    height: 300px;
  }

  #rui-vr-container .rui-vr-controls,
  #rui-ar-container .rui-ar-controls {
    position: relative;
    top: auto;
    right: auto;
    margin-bottom: 0.5rem;
    justify-content: center;
  }
}

/* FX-238: 内容与主题token联动调色 */
:root {
  --rui-sync-accent: var(--rui-accent);
}

:root[data-rui-sync-accent] a {
  color: var(--rui-sync-accent);
}

/* FX-239: 一分钟看完高压缩模式 */
:root[data-rui-compression="on"] #post-list > div > *:not(h1):not(h2):not(h3):not(a) {
  display: none;
}

:root[data-rui-compression="on"] #post-list > div {
  padding: 0.5rem;
}

#rui-article-summary {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--rui-surface);
  border-left: 3px solid var(--rui-accent);
  border-radius: 0.4rem;
}

#rui-article-summary h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: var(--rui-text-main);
}

#rui-article-summary p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--rui-text-muted);
}

#rui-compression-toggle {
  position: fixed;
  right: 20px;
  bottom: 744px;
  z-index: 70;
}

/* FX-240: 视觉实验沙盒页 */
:root[data-rui-labs="on"] {
  --rui-bg-1: #1e1b4b;
  --rui-bg-2: #312e81;
  --rui-bg-3: #4c1d95;
  --rui-accent: #a78bfa;
  --rui-accent-2: #c084fc;
}

:root[data-rui-labs="on"] #rui-dynamic-hero {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%) !important;
  animation: rui-sandbox-pulse 4s ease-in-out infinite;
}

@keyframes rui-sandbox-pulse {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}

:root[data-rui-labs="on"] #post-list > div {
  border: 1px dashed rgba(139, 92, 246, 0.4);
}

#rui-labs-sandbox-toggle {
  position: fixed;
  right: 20px;
  bottom: 782px;
  z-index: 70;
}

/* FX-323: 粒子背景 */
#rui-particle-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.66;
  mix-blend-mode: screen;
}

/* FX-12501~13200: 粒子系统效果 */
#rui-starfield-canvas,
#rui-falling-canvas,
#rui-smoke-canvas,
#rui-spark-canvas,
#rui-pixel-canvas,
#rui-text-particle-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

#rui-spark-canvas {
  pointer-events: auto;
}

/* FX-12501: 粒子控制按钮 */
#rui-particle-controller {
  position: fixed;
  right: 20px;
  bottom: 290px;
  z-index: 76;
  border: 1px solid rgba(148, 163, 184, 0.44);
  border-radius: 999px;
  padding: 0.46rem 0.74rem;
  font-size: 0.75rem;
  color: #dbeafe;
  background: color-mix(in oklab, var(--rui-bg-1) 78%, #0f172a 22%);
  cursor: pointer;
  transition: all 0.2s ease;
}

#rui-particle-controller:hover {
  background: color-mix(in oklab, var(--rui-bg-1) 90%, #0f172a 10%);
  border-color: rgba(96, 165, 250, 0.6);
}

/* 移动端适配 */
@media (max-width: 768px) {
  #rui-particle-controller {
    right: 10px;
    bottom: 200px;
    padding: 0.4rem 0.6rem;
    font-size: 0.7rem;
  }

  #rui-starfield-canvas,
  #rui-falling-canvas,
  #rui-smoke-canvas,
  #rui-spark-canvas,
  #rui-pixel-canvas,
  #rui-text-particle-canvas {
    opacity: 0.7;
  }
}

/* 性能优化：减少粒子效果的混合模式 */
@media (prefers-reduced-motion: reduce) {
  #rui-starfield-canvas,
  #rui-falling-canvas,
  #rui-smoke-canvas,
  #rui-spark-canvas,
  #rui-pixel-canvas,
  #rui-text-particle-canvas {
    display: none;
  }
}

/* FX-324: 标题动态特效 */
#rui-textfx-toggle {
  position: fixed;
  right: 20px;
  bottom: 226px;
  z-index: 76;
  border: 1px solid rgba(148, 163, 184, 0.44);
  border-radius: 999px;
  padding: 0.46rem 0.74rem;
  font-size: 0.75rem;
  color: #dbeafe;
  background: color-mix(in oklab, var(--rui-bg-1) 78%, #0f172a 22%);
}

:root[data-rui-textfx="glitch"] #rui-dynamic-hero .rui-track-title,
:root[data-rui-textfx="glitch"] #rui-hero-focus {
  position: relative;
  text-shadow: 1px 0 #22d3ee, -1px 0 #f43f5e;
  animation: rui-textfx-glitch 680ms steps(2, end) infinite;
}

@keyframes rui-textfx-glitch {
  0% {
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
  }
  35% {
    clip-path: inset(24% 0 42% 0);
    transform: translateX(1px);
  }
  72% {
    clip-path: inset(62% 0 8% 0);
    transform: translateX(-1px);
  }
  100% {
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
  }
}

:root[data-rui-textfx="neon"] #rui-dynamic-hero .rui-track-title,
:root[data-rui-textfx="neon"] #rui-hero-focus {
  color: #bff4ff;
  text-shadow:
    0 0 8px rgba(34, 211, 238, 0.65),
    0 0 18px rgba(34, 211, 238, 0.48),
    0 0 30px rgba(59, 130, 246, 0.32);
}

:root[data-rui-textfx="gradient"] #rui-dynamic-hero .rui-track-title,
:root[data-rui-textfx="gradient"] #rui-hero-focus {
  background: linear-gradient(96deg, #22d3ee, #38bdf8, #818cf8, #34d399);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rui-textfx-flow 3.8s ease infinite;
}

@keyframes rui-textfx-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

:root[data-rui-textfx="typewriter"] #rui-dynamic-hero .rui-track-title {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid rgba(148, 163, 184, 0.72);
  animation: rui-typewriter 2.6s steps(24, end), rui-caret 680ms step-end infinite;
}

@keyframes rui-typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes rui-caret {
  50% {
    border-color: transparent;
  }
}

/* FX-325: 响应式微动画 */
:root[data-rui-micro-anim="on"] #post-list > div {
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

:root[data-rui-micro-anim="on"] #post-list > div:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--rui-accent) 40%, var(--rui-border) 60%);
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.24);
}

body.rui-page-enter {
  animation: rui-page-fade-in 280ms ease both;
}

@keyframes rui-page-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rui-ripple-host {
  position: relative;
  overflow: hidden;
}

.rui-ripple {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: rgba(125, 211, 252, 0.52);
  animation: rui-ripple-wave 420ms ease-out forwards;
  pointer-events: none;
}

@keyframes rui-ripple-wave {
  to {
    width: 220px;
    height: 220px;
    opacity: 0;
  }
}

/* FX-326/327: 暗色增强与字体配置 */
#rui-dark-enhancer,
#rui-font-profile {
  position: fixed;
  left: 20px;
  z-index: 76;
  display: grid;
  gap: 0.32rem;
  border: 1px solid rgba(148, 163, 184, 0.36);
  border-radius: 0.8rem;
  padding: 0.5rem 0.56rem;
  background: color-mix(in oklab, var(--rui-bg-1) 80%, #0f172a 20%);
  backdrop-filter: blur(6px);
}

#rui-dark-enhancer {
  bottom: 140px;
}

#rui-font-profile {
  bottom: 250px;
}

#rui-dark-enhancer button,
#rui-font-profile button {
  border: 1px solid rgba(148, 163, 184, 0.36);
  border-radius: 999px;
  padding: 0.2rem 0.56rem;
  font-size: 0.72rem;
  color: #dbeafe;
  background: rgba(15, 23, 42, 0.45);
}

#rui-dark-enhancer label,
#rui-font-profile label {
  display: grid;
  gap: 0.2rem;
  font-size: 0.68rem;
  color: #cbd5e1;
}

#rui-dark-enhancer input[type="range"],
#rui-font-profile input[type="range"] {
  width: 150px;
}

:root[data-rui-dark-profile="high-contrast"] {
  --rui-bg-1: #020617;
  --rui-bg-2: #0b1220;
  --rui-bg-3: #1e293b;
  --rui-text-main: #f8fafc;
  --rui-text-muted: #e2e8f0;
  --rui-border: rgba(148, 163, 184, 0.55);
}

:root[data-rui-dark-profile="warm"] {
  --rui-bg-1: #16110a;
  --rui-bg-2: #251b11;
  --rui-bg-3: #2f2318;
  --rui-accent: #f59e0b;
  --rui-accent-2: #f97316;
}

:root {
  --rui-dark-temp-k: 4500;
}

:root[data-rui-color-mode="dark"] body,
html.dark:root body {
  filter: saturate(calc(0.88 + (var(--rui-dark-temp-k) - 3000) / 7000));
}

:root[data-rui-font-scheme="source-han"] body {
  font-family: "Source Han Sans SC", "Noto Sans CJK SC", "PingFang SC", sans-serif;
}

:root[data-rui-font-scheme="noto"] body {
  font-family: "Noto Sans", "Noto Sans CJK SC", "PingFang SC", sans-serif;
}

:root {
  --rui-font-weight-adv: 400;
  --rui-font-line-height-adv: 1.75;
}

:root[data-rui-font-scheme] article#content {
  font-weight: var(--rui-font-weight-adv);
  line-height: var(--rui-font-line-height-adv);
}

/* FX-328: 手势菜单 */
#rui-gesture-menu {
  position: fixed;
  z-index: 140;
  display: none;
  gap: 0.34rem;
  padding: 0.44rem;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 0.74rem;
  background: color-mix(in oklab, var(--rui-bg-1) 84%, #020617 16%);
  box-shadow: 0 20px 34px rgba(2, 6, 23, 0.36);
}

#rui-gesture-menu.open {
  display: grid;
}

#rui-gesture-menu button {
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 0.52rem;
  padding: 0.28rem 0.44rem;
  font-size: 0.72rem;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.42);
}

/* FX-330~340: 工作台 */
#rui-next-wave-fab {
  position: fixed;
  left: 20px;
  bottom: 32px;
  z-index: 82;
  border: 0;
  border-radius: 999px;
  padding: 0.58rem 0.84rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #041221;
  background: linear-gradient(120deg, #67e8f9, #34d399);
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.32);
}

#rui-next-wave-panel {
  position: fixed;
  left: 20px;
  bottom: 84px;
  width: min(560px, calc(100vw - 28px));
  max-height: min(80vh, 860px);
  z-index: 83;
  display: none;
  border-radius: 0.92rem;
  overflow: hidden;
  border: 1px solid rgba(100, 116, 139, 0.3);
  background: color-mix(in oklab, var(--rui-bg-1) 82%, #020617 18%);
  box-shadow: 0 30px 54px rgba(2, 6, 23, 0.42);
}

#rui-next-wave-panel.open {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.rui-next-wave-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.66rem 0.88rem;
  color: #e2e8f0;
  background: linear-gradient(130deg, #0f172a, #1d4ed8);
}

.rui-next-wave-head button {
  border: 0;
  background: transparent;
  color: #e2e8f0;
  font-size: 1.1rem;
}

.rui-next-wave-body {
  overflow: auto;
  padding: 0.72rem;
  display: grid;
  gap: 0.58rem;
}

.rui-next-wave-body details {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.76rem;
  background: color-mix(in oklab, var(--rui-bg-2) 76%, #0f172a 24%);
  overflow: hidden;
}

.rui-next-wave-body summary {
  cursor: pointer;
  padding: 0.56rem 0.68rem;
  font-size: 0.8rem;
  color: #dbeafe;
  background: rgba(15, 23, 42, 0.36);
}

.rui-next-wave-form {
  display: grid;
  gap: 0.42rem;
  padding: 0.56rem 0.64rem 0.7rem;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.rui-next-wave-form input,
.rui-next-wave-form textarea,
.rui-next-wave-form select,
.rui-feedback-form input,
.rui-feedback-form textarea,
.rui-feedback-form select {
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 0.56rem;
  padding: 0.42rem 0.52rem;
  font-size: 0.78rem;
  color: #e2e8f0;
  background: color-mix(in oklab, var(--rui-bg-2) 72%, #0f172a 28%);
}

.rui-next-wave-form label,
.rui-feedback-form label {
  display: grid;
  gap: 0.22rem;
  font-size: 0.72rem;
  color: #cbd5e1;
}

.rui-next-wave-form button,
.rui-feedback-form button {
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 0.58rem;
  padding: 0.36rem 0.56rem;
  font-size: 0.74rem;
  color: #dbeafe;
  background: linear-gradient(125deg, rgba(14, 165, 233, 0.22), rgba(52, 211, 153, 0.2));
}

.rui-next-wave-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

#rui-next-wave-result {
  margin: 0;
  max-height: 180px;
  overflow: auto;
  border-top: 1px solid rgba(148, 163, 184, 0.24);
  padding: 0.66rem 0.76rem;
  background: rgba(2, 6, 23, 0.6);
  color: #dbeafe;
  font-size: 0.72rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* FX-339: 反馈入口 */
#rui-feedback-fab {
  position: fixed;
  right: 20px;
  bottom: 140px;
  z-index: 78;
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 999px;
  padding: 0.5rem 0.78rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: #0f172a;
  background: linear-gradient(120deg, #fbbf24, #f97316);
  box-shadow: 0 12px 24px rgba(2, 6, 23, 0.32);
}

#rui-feedback-panel {
  position: fixed;
  right: 20px;
  bottom: 186px;
  width: min(380px, calc(100vw - 24px));
  z-index: 79;
  display: none;
  border-radius: 0.86rem;
  overflow: hidden;
  border: 1px solid rgba(100, 116, 139, 0.32);
  background: color-mix(in oklab, var(--rui-bg-1) 82%, #020617 18%);
  box-shadow: 0 22px 44px rgba(2, 6, 23, 0.36);
}

#rui-feedback-panel.open {
  display: grid;
}

.rui-feedback-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.74rem;
  color: #e2e8f0;
  background: linear-gradient(130deg, #7c2d12, #ea580c);
}

.rui-feedback-head button {
  border: 0;
  background: transparent;
  color: #fff7ed;
  font-size: 1rem;
}

.rui-feedback-form {
  display: grid;
  gap: 0.46rem;
  padding: 0.66rem 0.74rem 0.74rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #rui-next-wave-panel {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: 64px;
  }

  #rui-next-wave-fab {
    left: 10px;
    bottom: 10px;
  }

  #rui-feedback-panel {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: 74px;
  }

  #rui-feedback-fab {
    bottom: 68px;
  }

  #rui-dark-enhancer,
  #rui-font-profile {
    left: 10px;
  }

  #rui-font-profile {
    bottom: 212px;
  }

  #rui-dark-enhancer {
    bottom: 122px;
  }

  #rui-textfx-toggle {
    right: 10px;
    bottom: 194px;
  }

  #rui-explore-launch {
    right: 10px;
    bottom: 156px;
  }

  #rui-narrative-scroll {
    display: none;
  }

  .rui-digest-head {
    flex-wrap: wrap;
  }

  .rui-digest-actions {
    width: 100%;
    justify-content: flex-start;
  }

  #rui-reading-focus-panel {
    right: 10px;
    left: 10px;
    width: auto;
    bottom: 80px;
  }

  #rui-narrative-scroll {
    top: 60px;
  }

  .rui-narrative-list li a {
    font-size: 0.7rem;
    padding: 0.25rem 0.45rem;
  }

  #rui-topic-cloud {
    height: 100px;
  }

  #rui-tech-pulse-widget {
    padding: 0.7rem;
  }

  .rui-pulse-chart {
    height: 60px;
  }
}

/*
 * Product decision (2026-02-21):
 * Hide non-essential frontend ops/debug widgets in production UI.
 */
#rui-theme-lock,
#rui-focus-toggle,
#rui-bg-tune-toggle,
#rui-bg-gallery-toggle,
#rui-ff-toggle,
#rui-ff-panel,
#rui-bg-tune-panel,
#rui-bg-gallery-panel,
#rui-color-mode-toggle,
#rui-motion-toggle,
#rui-motion-density-toggle,
#rui-privacy-toggle,
#rui-save-data-toggle,
#rui-scene-toggle,
#rui-card-density-toggle,
#rui-reading-focus-toggle,
#rui-reading-focus-panel,
#rui-comment-theme-toggle,
#rui-soundscape-toggle,
#rui-typography-rhythm-toggle,
#rui-compression-toggle,
#rui-labs-sandbox-toggle,
#rui-tech-pulse-widget,
#rui-topic-cloud {
  display: none !important;
}

/* ==========================================================================
   FX-10001~10050: Glassmorphism (Glass UI) Effects
   ========================================================================== */

/* CSS Custom Properties for Glass Effects */
:root {
  /* Glass blur levels */
  --glass-blur: 10px;
  --glass-blur-light: 8px;
  --glass-blur-heavy: 15px;

  /* Glass background colors */
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-bg-hover: rgba(255, 255, 255, 0.25);
  --glass-bg-active: rgba(255, 255, 255, 0.35);

  /* Glass border */
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-border-light: rgba(255, 255, 255, 0.15);

  /* Glass shadow */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

  /* Glass radius */
  --glass-radius: 16px;
  --glass-radius-sm: 8px;
  --glass-radius-lg: 24px;

  /* Glass nav */
  --glass-nav-blur: 0px;
  --glass-nav-bg: rgba(255, 255, 255, 0);
  --glass-nav-blur-scrolled: 10px;
  --glass-nav-bg-scrolled: rgba(255, 255, 255, 0.8);
}

/* Dark mode glass adjustments */
:root[data-rui-color-mode="dark"],
html.dark:root {
  --glass-bg: rgba(0, 0, 0, 0.2);
  --glass-bg-hover: rgba(255, 255, 255, 0.15);
  --glass-bg-active: rgba(255, 255, 255, 0.25);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-border-light: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  --glass-nav-bg: rgba(11, 16, 32, 0);
  --glass-nav-bg-scrolled: rgba(11, 16, 32, 0.85);
}

/* ==========================================================================
   FX-10001: Basic Glass Card (macOS Style)
   ========================================================================== */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  transition: all 0.3s ease;
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(10px)) {
  .glass-card {
    background: rgba(255, 255, 255, 0.95);
  }

  :root[data-rui-color-mode="dark"],
  html.dark:root .glass-card {
    background: rgba(17, 26, 51, 0.95);
  }
}

/* Glass card hover effect */
.glass-card:hover {
  background: var(--glass-bg-hover);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* ==========================================================================
   FX-10002: Multi-layer Glass Overlay Effect
   ========================================================================== */
.glass-layers {
  position: relative;
}

.glass-layers > .glass-layer-outer {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: var(--glass-radius-lg);
  z-index: 1;
}

.glass-layers > .glass-layer-middle {
  position: absolute;
  inset: 8px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--glass-radius);
  z-index: 2;
}

.glass-layers > .glass-layer-inner {
  position: relative;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: var(--glass-radius-sm);
  z-index: 3;
  padding: 24px;
}

/* Fallback for multi-layer glass */
@supports not (backdrop-filter: blur(10px)) {
  .glass-layers > .glass-layer-outer {
    background: rgba(255, 255, 255, 0.9);
  }

  .glass-layers > .glass-layer-middle {
    background: rgba(255, 255, 255, 0.92);
  }

  .glass-layers > .glass-layer-inner {
    background: rgba(255, 255, 255, 0.95);
  }
}

/* ==========================================================================
   FX-10004: Glass Button
   ========================================================================== */
.glass-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  color: inherit;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur-light));
  -webkit-backdrop-filter: blur(var(--glass-blur-light));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius-sm);
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.glass-button:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border);
  transform: translateY(-1px);
}

.glass-button:active {
  background: var(--glass-bg-active);
  transform: translateY(0);
}

.glass-button:focus-visible {
  outline: 2px solid var(--rui-accent);
  outline-offset: 2px;
}

/* Glass button ripple effect */
.glass-button .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: glass-ripple 0.6s ease-out;
  pointer-events: none;
}

@keyframes glass-ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Glass button variants */
.glass-button--primary {
  background: rgba(56, 189, 248, 0.3);
  border-color: rgba(56, 189, 248, 0.5);
}

.glass-button--primary:hover {
  background: rgba(56, 189, 248, 0.5);
}

.glass-button--small {
  padding: 8px 16px;
  font-size: 12px;
}

.glass-button--large {
  padding: 16px 32px;
  font-size: 16px;
}

/* Fallback for glass button */
@supports not (backdrop-filter: blur(8px)) {
  .glass-button {
    background: rgba(255, 255, 255, 0.9);
  }

  :root[data-rui-color-mode="dark"],
  html.dark:root .glass-button {
    background: rgba(17, 26, 51, 0.9);
  }
}

/* ==========================================================================
   FX-10007: Glass Navigation Bar
   ========================================================================== */
.glass-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--glass-nav-bg);
  backdrop-filter: blur(var(--glass-nav-blur));
  -webkit-backdrop-filter: blur(var(--glass-nav-blur));
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
}

.glass-nav.scrolled {
  background: var(--glass-nav-bg-scrolled);
  backdrop-filter: blur(var(--glass-nav-blur-scrolled));
  -webkit-backdrop-filter: blur(var(--glass-nav-blur-scrolled));
  border-bottom-color: var(--glass-border-light);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* Apply to header elements */
.glass-nav-header {
  background: var(--glass-nav-bg);
  backdrop-filter: blur(var(--glass-nav-blur));
  -webkit-backdrop-filter: blur(var(--glass-nav-blur));
  transition: all 0.3s ease;
}

.glass-nav-header.scrolled {
  background: var(--glass-nav-bg-scrolled);
  backdrop-filter: blur(var(--glass-nav-blur-scrolled));
  -webkit-backdrop-filter: blur(var(--glass-nav-blur-scrolled));
}

/* Fallback for glass nav */
@supports not (backdrop-filter: blur(10px)) {
  .glass-nav,
  .glass-nav-header {
    background: rgba(255, 255, 255, 0.95);
  }

  :root[data-rui-color-mode="dark"],
  html.dark:root .glass-nav,
  :root[data-rui-color-mode="dark"],
  html.dark:root .glass-nav-header {
    background: rgba(11, 16, 32, 0.95);
  }
}

/* ==========================================================================
   FX-10011: Adjustable Blur Glass Effect
   ========================================================================== */
.glass-adjustable {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur, 10px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 10px));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  transition: backdrop-filter 0.2s ease;
}

/* Blur slider control */
.glass-blur-control {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--glass-bg);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: var(--glass-radius-sm);
}

.glass-blur-control label {
  font-size: 13px;
  font-weight: 500;
  color: var(--rui-text-main);
  white-space: nowrap;
}

.glass-blur-control input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  cursor: pointer;
}

.glass-blur-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--rui-accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.glass-blur-control input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--rui-accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.glass-blur-control .blur-value {
  font-size: 12px;
  font-family: "IBM Plex Mono", monospace;
  color: var(--rui-text-muted);
  min-width: 40px;
  text-align: right;
}

/* ==========================================================================
   Utility Classes for Glass Effects
   ========================================================================== */
.glass-text {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.glass-inset {
  background: rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Glass container with floating effect */
.glass-float {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius-lg);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Glass panel for content containers */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur-light));
  -webkit-backdrop-filter: blur(var(--glass-blur-light));
  border: 1px solid var(--glass-border-light);
  border-radius: var(--glass-radius);
}

.glass-panel__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--glass-border-light);
}

.glass-panel__body {
  padding: 20px;
}

.glass-panel__footer {
  padding: 12px 20px;
  border-top: 1px solid var(--glass-border-light);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Glass divider */
.glass-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--glass-border-light),
    transparent
  );
  margin: 16px 0;
}

/* Glass badge */
.glass-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--glass-bg);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid var(--glass-border-light);
  border-radius: 20px;
}

/* Glass input */
.glass-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--rui-text-main);
  background: var(--glass-bg);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius-sm);
  transition: all 0.2s ease;
}

.glass-input::placeholder {
  color: var(--rui-text-muted);
  opacity: 0.7;
}

.glass-input:focus {
  outline: none;
  border-color: var(--rui-accent);
  background: var(--glass-bg-hover);
}

/* Glass overlay for modals/dialogs */
.glass-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.glass-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Glass modal */
.glass-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  z-index: 2001;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.glass-modal.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* Reduced motion for glass effects */
@media (prefers-reduced-motion: reduce) {
  .glass-card,
  .glass-button,
  .glass-nav,
  .glass-nav-header,
  .glass-adjustable,
  .glass-float,
  .glass-panel,
  .glass-overlay,
  .glass-modal {
    transition: none;
    animation: none;
  }

  .glass-button .ripple {
    animation: none;
  }
}

/* ============================================
   FX-13201~14000: Mouse Interaction Effects
   ============================================ */

/* FX-13201: Mouse Follower */
.rui-mouse-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.8) 0%, rgba(56, 189, 248, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
  mix-blend-mode: screen;
}

/* FX-13202: Delayed Follower */
.rui-delayed-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(56, 189, 248, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
  transition: border-color 0.3s ease;
}

.rui-delayed-follower::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: rgba(56, 189, 248, 0.8);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* FX-13501: Scale Hover */
.rui-scale-hover {
  transform-origin: center center;
  transition: transform 200ms ease;
  will-change: transform;
}

[data-rui-scale-hover] {
  transform-origin: center center;
  transition: transform 200ms ease;
  will-change: transform;
}

/* FX-13504: 3D Tilt Hover */
.rui-tilt-hover {
  transform-origin: center center;
  transition: transform 200ms ease;
  will-change: transform;
  transform-style: preserve-3d;
}

[data-rui-tilt-hover] {
  transform-origin: center center;
  transition: transform 200ms ease;
  will-change: transform;
  transform-style: preserve-3d;
}

/* FX-13511: 3D Tilt Card */
.rui-tilt-card {
  transform-origin: center center;
  transition: transform 150ms ease, box-shadow 150ms ease;
  will-change: transform, box-shadow;
  transform-style: preserve-3d;
}

[data-rui-tilt-card] {
  transform-origin: center center;
  transition: transform 150ms ease, box-shadow 150ms ease;
  will-change: transform, box-shadow;
  transform-style: preserve-3d;
}

/* FX-13801: Click Ripple */
.rui-ripple-container {
  position: relative;
  overflow: hidden;
}

.rui-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: rui-ripple-animation 0.6s ease-out;
  pointer-events: none;
}

@keyframes rui-ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

[data-rui-ripple] {
  position: relative;
  overflow: hidden;
}

[data-rui-ripple] .rui-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: rui-ripple-animation 0.6s ease-out;
  pointer-events: none;
}

/* FX-14001: Scroll Fade In - IntersectionObserver */
.rui-scroll-fade-in {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

.rui-scroll-fade-in.rui-visible {
  opacity: 1;
}

/* FX-14002: Scroll Slide In - translateY */
.rui-scroll-slide-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.rui-scroll-slide-in.rui-visible {
  opacity: 1;
  transform: translateY(0);
}

/* FX-14002: Slide from different directions */
.rui-scroll-slide-in-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.rui-scroll-slide-in-up.rui-visible {
  opacity: 1;
  transform: translateY(0);
}

.rui-scroll-slide-in-down {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.rui-scroll-slide-in-down.rui-visible {
  opacity: 1;
  transform: translateY(0);
}

.rui-scroll-slide-in-left {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.rui-scroll-slide-in-left.rui-visible {
  opacity: 1;
  transform: translateX(0);
}

.rui-scroll-slide-in-right {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.rui-scroll-slide-in-right.rui-visible {
  opacity: 1;
  transform: translateX(0);
}

/* FX-14301: Smooth Scroll - CSS scroll-behavior */
html {
  scroll-behavior: smooth;
}

/* FX-14302: Scroll Fixed - sticky positioning */
.rui-scroll-fixed {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* FX-14304: Infinite Scroll */
.rui-infinite-scroll-container {
  position: relative;
}

.rui-infinite-scroll-sentinel {
  height: 1px;
  width: 100%;
}

.rui-infinite-scroll-loader {
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.rui-infinite-scroll-loader.rui-visible {
  display: flex;
}

.rui-infinite-scroll-loader::after {
  content: "";
  width: 24px;
  height: 24px;
  border: 3px solid var(--rui-border, rgba(148, 163, 184, 0.24));
  border-top-color: var(--rui-accent, #38bdf8);
  border-radius: 50%;
  animation: rui-spin 0.8s linear infinite;
}

@keyframes rui-spin {
  to {
    transform: rotate(360deg);
  }
}

/* FX-14303: Scroll Progress Indicator */
#rui-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
}

#rui-scroll-progress .rui-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--rui-accent, #38bdf8), var(--rui-accent-2, #818cf8));
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px var(--rui-accent, #38bdf8);
}

/* FX-14305: Parallax Scrolling */
.rui-parallax {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* FX-14306: Section Transitions */
.rui-section-transition {
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.rui-section-transition.rui-visible {
  opacity: 1;
}

.rui-section-transition.rui-slide-from-up {
  transform: translateY(50px);
}

.rui-section-transition.rui-slide-from-up.rui-visible {
  transform: translateY(0);
}

.rui-section-transition.rui-slide-from-down {
  transform: translateY(-50px);
}

.rui-section-transition.rui-slide-from-down.rui-visible {
  transform: translateY(0);
}

.rui-section-transition.rui-slide-from-left {
  transform: translateX(50px);
}

.rui-section-transition.rui-slide-from-left.rui-visible {
  transform: translateX(0);
}

.rui-section-transition.rui-slide-from-right {
  transform: translateX(-50px);
}

.rui-section-transition.rui-slide-from-right.rui-visible {
  transform: translateX(0);
}

/* FX-14308: Scroll-Triggered Animations */
[class^="rui-animate-"] {
  animation-fill-mode: both;
}

.rui-animate-bounce {
  animation: rui-bounce 0.6s ease-out;
}

@keyframes rui-bounce {
  0% { transform: scale(0.9); opacity: 0; }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}

.rui-animate-pulse {
  animation: rui-pulse 0.8s ease-out;
}

@keyframes rui-pulse {
  0% { transform: scale(0.95); opacity: 0; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

.rui-animate-shake {
  animation: rui-shake 0.6s ease-out;
}

@keyframes rui-shake {
  0%, 100% { transform: translateX(0); opacity: 0; }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
  100% { opacity: 1; }
}

.rui-animate-rotate {
  animation: rui-rotate 0.6s ease-out;
}

@keyframes rui-rotate {
  0% { transform: rotate(-10deg) scale(0.9); opacity: 0; }
  100% { transform: rotate(0) scale(1); opacity: 1; }
}

/* FX-14309: Sticky Navigation */
.rui-sticky-nav {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

.rui-sticky-nav.rui-sticky-active {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--rui-bg, #ffffff);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

/* FX-14310: Scroll Reveal */
.rui-scroll-reveal {
  overflow: hidden;
}

.rui-reveal-item {
  opacity: 0;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.rui-reveal-item.rui-visible {
  opacity: 1;
}

.rui-reveal-slide.rui-visible {
  transform: translateY(0);
}

.rui-reveal-slide {
  transform: translateY(30px);
}

.rui-reveal-scale.rui-visible {
  transform: scale(1);
}

.rui-reveal-scale {
  transform: scale(0.8);
}

.rui-reveal-flip.rui-visible {
  transform: perspective(1000px) rotateY(0);
}

.rui-reveal-flip {
  transform: perspective(1000px) rotateY(90deg);
}

.rui-scroll-reveal.rui-reveal-visible .rui-reveal-item {
  opacity: 1;
  transform: translateY(0) scale(1) perspective(1000px) rotateY(0);
}

/* FX-14801: Typewriter Effect */
.rui-typewriter {
  display: inline;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--rui-accent, #38bdf8);
  animation: rui-typewriter-cursor 0.7s step-end infinite;
}

@keyframes rui-typewriter-cursor {
  50% {
    border-color: transparent;
  }
}

.rui-typewriter-wrapper {
  display: inline-block;
}

/* FX-14803: Text Fade In */
.rui-text-fade-in {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}

.rui-text-fade-in.rui-visible {
  opacity: 1;
}

/* Staggered text fade in */
.rui-text-fade-in-stagger > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.rui-text-fade-in-stagger.rui-visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.rui-text-fade-in-stagger.rui-visible > *:nth-child(2) { transition-delay: 50ms; opacity: 1; transform: translateY(0); }
.rui-text-fade-in-stagger.rui-visible > *:nth-child(3) { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
.rui-text-fade-in-stagger.rui-visible > *:nth-child(4) { transition-delay: 150ms; opacity: 1; transform: translateY(0); }
.rui-text-fade-in-stagger.rui-visible > *:nth-child(5) { transition-delay: 200ms; opacity: 1; transform: translateY(0); }
.rui-text-fade-in-stagger.rui-visible > *:nth-child(6) { transition-delay: 250ms; opacity: 1; transform: translateY(0); }
.rui-text-fade-in-stagger.rui-visible > *:nth-child(7) { transition-delay: 300ms; opacity: 1; transform: translateY(0); }
.rui-text-fade-in-stagger.rui-visible > *:nth-child(8) { transition-delay: 350ms; opacity: 1; transform: translateY(0); }
.rui-text-fade-in-stagger.rui-visible > *:nth-child(9) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
.rui-text-fade-in-stagger.rui-visible > *:nth-child(10) { transition-delay: 450ms; opacity: 1; transform: translateY(0); }
.rui-text-fade-in-stagger.rui-visible > *:nth-child(n+11) { transition-delay: 500ms; opacity: 1; transform: translateY(0); }

/* FX-15101: Gradient Text */
.rui-gradient-text {
  background: linear-gradient(135deg, var(--rui-accent, #38bdf8), var(--rui-accent-2, #14b8a6));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.rui-gradient-text-multi {
  background: linear-gradient(
    90deg,
    #f472b6,
    #c084fc,
    #38bdf8,
    #34d399,
    #facc15,
    #fb923c
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: rui-gradient-flow 3s linear infinite;
}

@keyframes rui-gradient-flow {
  to {
    background-position: 200% center;
  }
}

/* FX-15102: Stroke Text */
.rui-stroke-text {
  -webkit-text-stroke: 1px var(--rui-accent, #38bdf8);
  color: transparent;
}

.rui-stroke-text-fill {
  -webkit-text-stroke: 2px var(--rui-accent, #38bdf8);
  color: transparent;
  position: relative;
}

.rui-stroke-text-fill::before {
  content: attr(data-text);
  position: absolute;
  -webkit-text-stroke: 0;
  color: var(--rui-text-main, #e6edf7);
  z-index: 1;
}

/* FX-15105: Glow Text */
.rui-glow-text {
  text-shadow:
    0 0 5px var(--rui-accent, #38bdf8),
    0 0 10px var(--rui-accent, #38bdf8),
    0 0 20px var(--rui-accent, #38bdf8);
}

.rui-glow-text-soft {
  text-shadow:
    0 0 5px rgba(56, 189, 248, 0.5),
    0 0 10px rgba(56, 189, 248, 0.3);
}

.rui-glow-text-strong {
  text-shadow:
    0 0 5px var(--rui-accent, #38bdf8),
    0 0 15px var(--rui-accent, #38bdf8),
    0 0 30px var(--rui-accent, #38bdf8),
    0 0 50px var(--rui-accent-2, #14b8a6);
}

.rui-glow-text-animated {
  animation: rui-glow-pulse 2s ease-in-out infinite;
}

@keyframes rui-glow-pulse {
  0%, 100% {
    text-shadow:
      0 0 5px var(--rui-accent, #38bdf8),
      0 0 10px var(--rui-accent, #38bdf8),
      0 0 20px var(--rui-accent, #38bdf8);
  }
  50% {
    text-shadow:
      0 0 10px var(--rui-accent, #38bdf8),
      0 0 20px var(--rui-accent, #38bdf8),
      0 0 40px var(--rui-accent, #38bdf8),
      0 0 60px var(--rui-accent-2, #14b8a6);
  }
}

/* Reduced motion for scroll and text effects */
@media (prefers-reduced-motion: reduce) {
  .rui-scroll-fade-in,
  .rui-scroll-slide-in,
  .rui-scroll-slide-in-up,
  .rui-scroll-slide-in-down,
  .rui-scroll-slide-in-left,
  .rui-scroll-slide-in-right,
  .rui-text-fade-in,
  .rui-text-fade-in-stagger > *,
  .rui-section-transition,
  .rui-reveal-item,
  .rui-parallax {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  #rui-scroll-progress {
    display: none;
  }

  html {
    scroll-behavior: auto !important;
  }

  .rui-typewriter {
    border-right: none;
    animation: none;
  }

  .rui-gradient-text-multi {
    animation: none;
  }

  .rui-glow-text-animated {
    animation: none;
  }
}

/* Touch device optimization */
@media (hover: none) and (pointer: coarse) {
  .rui-scroll-slide-in-up:hover,
  .rui-scroll-slide-in-down:hover,
  .rui-scroll-slide-in-left:hover,
  .rui-scroll-slide-in-right:hover {
    transform: none;
  }
}

/* FX-14801: Click Explosion */
.rui-explosion-particle {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
}

/* FX-13807: Long Press */
@keyframes rui-long-press-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

[data-rui-long-press] {
  position: relative;
  cursor: pointer;
}

/* FX-13811: Drag Effect */
[data-rui-drag] {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

[data-rui-drag]:active {
  cursor: grabbing;
}

/* Reduced motion for mouse interaction effects */
@media (prefers-reduced-motion: reduce) {
  .rui-mouse-follower,
  .rui-delayed-follower,
  .rui-scale-hover,
  .rui-tilt-hover,
  .rui-tilt-card,
  [data-rui-scale-hover],
  [data-rui-tilt-hover],
  [data-rui-tilt-card] {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .rui-ripple {
    animation: none;
    opacity: 0;
  }

  .rui-explosion-particle {
    display: none;
  }

  [data-rui-drag] {
    cursor: pointer;
  }
}

/* Touch device optimization */
@media (hover: none) and (pointer: coarse) {
  .rui-mouse-follower,
  .rui-delayed-follower {
    display: none;
  }

  .rui-scale-hover:hover,
  .rui-tilt-hover:hover,
  .rui-tilt-card:hover {
    transform: none;
  }
}

/* ============================================
   FX-17001~17500: 加载动画
   ============================================ */

/* FX-17001 [P0] 旋转加载器 - 基础 spinner */
.rui-spinner {
  display: inline-block;
  width: var(--rui-spinner-size, 32px);
  height: var(--rui-spinner-size, 32px);
  border: 3px solid var(--rui-border, rgba(148, 163, 184, 0.24));
  border-top-color: var(--rui-accent, #38bdf8);
  border-radius: 50%;
  animation: rui-spinner-rotate 0.8s linear infinite;
}

@keyframes rui-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

.rui-spinner--small {
  --rui-spinner-size: 20px;
}

.rui-spinner--large {
  --rui-spinner-size: 48px;
}

/* FX-17002 [P0] 脉冲加载器 - 脉冲跳动动画 */
.rui-pulse-loader {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.rui-pulse-loader span {
  width: var(--rui-pulse-size, 8px);
  height: var(--rui-pulse-size, 8px);
  background-color: var(--rui-accent, #38bdf8);
  border-radius: 50%;
  animation: rui-pulse-bounce 1.4s ease-in-out infinite;
}

.rui-pulse-loader span:nth-child(1) {
  animation-delay: -0.32s;
}

.rui-pulse-loader span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes rui-pulse-bounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.rui-pulse-loader--small {
  --rui-pulse-size: 6px;
}

.rui-pulse-loader--large {
  --rui-pulse-size: 12px;
}

/* FX-17003 [P0] 弹跳加载器 - 弹跳球效果 */
.rui-bounce-loader {
  display: inline-flex;
  gap: 6px;
  align-items: flex-end;
}

.rui-bounce-loader span {
  width: var(--rui-bounce-size, 10px);
  height: var(--rui-bounce-size, 10px);
  background-color: var(--rui-accent, #38bdf8);
  border-radius: 50%;
  animation: rui-bounce-ball 1s ease-in-out infinite;
}

.rui-bounce-loader span:nth-child(2) {
  animation-delay: 0.1s;
  background-color: var(--rui-accent-2, #14b8a6);
}

.rui-bounce-loader span:nth-child(3) {
  animation-delay: 0.2s;
  background-color: #a78bfa;
}

@keyframes rui-bounce-ball {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.rui-bounce-loader--small {
  --rui-bounce-size: 8px;
}

.rui-bounce-loader--large {
  --rui-bounce-size: 16px;
}

/* FX-17006 [P0] 圆环加载器 - 圆形进度环 */
.rui-ring-loader {
  display: inline-block;
  width: var(--rui-ring-size, 40px);
  height: var(--rui-ring-size, 40px);
  position: relative;
}

.rui-ring-loader::before,
.rui-ring-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}

.rui-ring-loader::before {
  border-top-color: var(--rui-accent, #38bdf8);
  animation: rui-ring-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.rui-ring-loader::after {
  border-right-color: var(--rui-accent-2, #14b8a6);
  animation: rui-ring-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  animation-direction: reverse;
}

@keyframes rui-ring-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.rui-ring-loader--small {
  --rui-ring-size: 24px;
}

.rui-ring-loader--large {
  --rui-ring-size: 64px;
}

/* FX-17008 [P0] 骨架屏 - 闪烁占位动画 */
.rui-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--rui-skeleton-bg, rgba(148, 163, 184, 0.12)) 0%,
    var(--rui-skeleton-highlight, rgba(148, 163, 184, 0.2)) 50%,
    var(--rui-skeleton-bg, rgba(148, 163, 184, 0.12)) 100%
  );
  background-size: 200% 100%;
  animation: rui-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--rui-skeleton-radius, 4px);
}

@keyframes rui-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 骨架屏变体 */
.rui-skeleton--text {
  height: 1em;
  margin-bottom: 0.5em;
}

.rui-skeleton--title {
  height: 1.5em;
  width: 60%;
  margin-bottom: 0.75em;
}

.rui-skeleton--avatar {
  width: var(--rui-skeleton-avatar-size, 40px);
  height: var(--rui-skeleton-avatar-size, 40px);
  border-radius: 50%;
}

.rui-skeleton--thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.rui-skeleton--card {
  padding: 1rem;
  border-radius: 8px;
}

/* FX-17004 [P0] 进度条加载 - 线性进度条动画 */
.rui-progress-bar {
  width: var(--rui-progress-width, 200px);
  height: var(--rui-progress-height, 4px);
  background-color: var(--rui-progress-bg, rgba(148, 163, 184, 0.2));
  border-radius: var(--rui-progress-radius, 2px);
  overflow: hidden;
  position: relative;
}

.rui-progress-bar-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--rui-accent, #38bdf8),
    var(--rui-accent-2, #14b8a6)
  );
  border-radius: var(--rui-progress-radius, 2px);
  transition: width var(--rui-progress-duration, 300ms) ease-out;
}

.rui-progress-bar--indeterminate .rui-progress-bar-fill {
  width: 30%;
  animation: rui-progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes rui-progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(400%);
  }
}

/* 进度条变体 */
.rui-progress-bar--striped .rui-progress-bar-fill {
  background: repeating-linear-gradient(
    45deg,
    var(--rui-accent, #38bdf8),
    var(--rui-accent, #38bdf8) 10px,
    var(--rui-accent-2, #14b8a6) 10px,
    var(--rui-accent-2, #14b8a6) 20px
  );
  background-size: 200% 100%;
  animation: rui-progress-stripes 1s linear infinite;
}

@keyframes rui-progress-stripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 0;
  }
}

/* FX-17005 [P0] 字母跳动加载 - 文字逐个跳动 */
.rui-letter-bounce-loader {
  display: inline-flex;
  font-family: var(--rui-loader-font, "IBM Plex Mono", monospace);
  font-size: var(--rui-letter-size, 24px);
  font-weight: 600;
  color: var(--rui-accent, #38bdf8);
}

.rui-letter-bounce-loader span {
  display: inline-block;
  animation: rui-letter-bounce 1s ease-in-out infinite;
}

.rui-letter-bounce-loader span:nth-child(1) { animation-delay: 0ms; }
.rui-letter-bounce-loader span:nth-child(2) { animation-delay: 100ms; }
.rui-letter-bounce-loader span:nth-child(3) { animation-delay: 200ms; }
.rui-letter-bounce-loader span:nth-child(4) { animation-delay: 300ms; }
.rui-letter-bounce-loader span:nth-child(5) { animation-delay: 400ms; }
.rui-letter-bounce-loader span:nth-child(6) { animation-delay: 500ms; }
.rui-letter-bounce-loader span:nth-child(7) { animation-delay: 600ms; }

@keyframes rui-letter-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* 字母跳动变体 */
.rui-letter-bounce-loader--small {
  --rui-letter-size: 16px;
}

.rui-letter-bounce-loader--large {
  --rui-letter-size: 36px;
}

.rui-letter-bounce-loader--secondary {
  color: var(--rui-accent-2, #14b8a6);
}

/* FX-17007 [P0] 流体加载 - 波动球体效果 */
.rui-fluid-loader {
  display: inline-block;
  width: var(--rui-fluid-size, 40px);
  height: var(--rui-fluid-size, 40px);
  position: relative;
}

.rui-fluid-loader::before,
.rui-fluid-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--rui-accent, #38bdf8);
  animation: rui-fluid-ripple 1.5s ease-out infinite;
}

.rui-fluid-loader::after {
  animation-delay: 0.5s;
  background: var(--rui-accent-2, #14b8a6);
}

@keyframes rui-fluid-ripple {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* 流体加载波纹效果 */
.rui-fluid-loader--wave {
  width: var(--rui-fluid-size, 40px);
  height: var(--rui-fluid-size, 10px);
}

.rui-fluid-loader--wave::before,
.rui-fluid-loader--wave::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    var(--rui-accent, #38bdf8),
    var(--rui-accent-2, #14b8a6),
    var(--rui-accent, #38bdf8)
  );
  background-size: 200% 100%;
  animation: rui-fluid-wave 1.2s ease-in-out infinite;
}

.rui-fluid-loader--wave::after {
  animation-delay: 0.2s;
}

@keyframes rui-fluid-wave {
  0%, 100% {
    background-position: 100% 0;
    transform: scaleX(0.8);
    opacity: 0.6;
  }
  50% {
    background-position: 0 0;
    transform: scaleX(1.2);
    opacity: 1;
  }
}

/* 流体加载变体 */
.rui-fluid-loader--small {
  --rui-fluid-size: 24px;
}

.rui-fluid-loader--large {
  --rui-fluid-size: 64px;
}

/* FX-17009 [P0] 渐变扫描加载 - 光束扫过效果 */
.rui-gradient-scan-loader {
  width: var(--rui-scan-width, 60px);
  height: var(--rui-scan-height, 60px);
  background: linear-gradient(
    135deg,
    var(--rui-bg-2, #111a33),
    var(--rui-bg-3, #182752)
  );
  border-radius: var(--rui-scan-radius, 8px);
  position: relative;
  overflow: hidden;
}

.rui-gradient-scan-loader::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(56, 189, 248, 0.4),
    rgba(20, 184, 166, 0.4),
    transparent
  );
  animation: rui-gradient-scan 1.5s ease-in-out infinite;
}

.rui-gradient-scan-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(56, 189, 248, 0.1) 50%,
    transparent 100%
  );
  animation: rui-scan-vertical 2s ease-in-out infinite;
}

@keyframes rui-gradient-scan {
  0% {
    left: -50%;
  }
  100% {
    left: 150%;
  }
}

@keyframes rui-scan-vertical {
  0%, 100% {
    transform: translateY(-100%);
  }
  50% {
    transform: translateY(100%);
  }
}

/* 渐变扫描变体 */
.rui-gradient-scan-loader--horizontal {
  width: var(--rui-scan-width, 200px);
  height: var(--rui-scan-height, 4px);
}

.rui-gradient-scan-loader--horizontal::before {
  width: 30%;
  left: -30%;
}

/* FX-17010 [P0] 圆点跳动加载 - 垂直弹跳圆点 */
.rui-dot-bounce-loader {
  display: inline-flex;
  gap: var(--rui-dot-gap, 6px);
  align-items: flex-end;
}

.rui-dot-bounce-loader span {
  width: var(--rui-dot-size, 10px);
  height: var(--rui-dot-size, 10px);
  background-color: var(--rui-accent, #38bdf8);
  border-radius: 50%;
  animation: rui-dot-bounce 0.6s ease-in-out infinite;
}

.rui-dot-bounce-loader span:nth-child(1) {
  animation-delay: 0s;
}

.rui-dot-bounce-loader span:nth-child(2) {
  animation-delay: 0.1s;
  background-color: var(--rui-accent-2, #14b8a6);
}

.rui-dot-bounce-loader span:nth-child(3) {
  animation-delay: 0.2s;
  background-color: #a78bfa;
}

.rui-dot-bounce-loader span:nth-child(4) {
  animation-delay: 0.3s;
}

.rui-dot-bounce-loader span:nth-child(5) {
  animation-delay: 0.4s;
  background-color: var(--rui-accent-2, #14b8a6);
}

@keyframes rui-dot-bounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  30% {
    transform: translateY(-16px) scale(1.1);
  }
  60% {
    transform: translateY(0) scale(0.9);
  }
}

/* 圆点跳动变体 */
.rui-dot-bounce-loader--small {
  --rui-dot-size: 6px;
  --rui-dot-gap: 4px;
}

.rui-dot-bounce-loader--large {
  --rui-dot-size: 14px;
  --rui-dot-gap: 8px;
}

.rui-dot-bounce-loader--staggered span:nth-child(2) { animation-delay: 0.15s; }
.rui-dot-bounce-loader--staggered span:nth-child(3) { animation-delay: 0.3s; }
.rui-dot-bounce-loader--staggered span:nth-child(4) { animation-delay: 0.45s; }
.rui-dot-bounce-loader--staggered span:nth-child(5) { animation-delay: 0.6s; }

/* ============================================
   FX-16201~17000: 背景效果
   ============================================ */

/* FX-16201 [P0] 渐变背景动画 */
.rui-gradient-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    var(--rui-gradient-angle, 135deg),
    var(--rui-gradient-color-1, #0b1020),
    var(--rui-gradient-color-2, #111a33),
    var(--rui-gradient-color-3, #182752)
  );
  background-size: 400% 400%;
  animation: rui-gradient-shift var(--rui-gradient-duration, 15s) ease infinite;
}

@keyframes rui-gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 渐变背景变体 */
.rui-gradient-bg--ocean {
  --rui-gradient-color-1: #0c1929;
  --rui-gradient-color-2: #134e4a;
  --rui-gradient-color-3: #1e3a5f;
}

.rui-gradient-bg--sunset {
  --rui-gradient-color-1: #1a1a2e;
  --rui-gradient-color-2: #4a1942;
  --rui-gradient-color-3: #16213e;
}

.rui-gradient-bg--forest {
  --rui-gradient-color-1: #0f172a;
  --rui-gradient-color-2: #14532d;
  --rui-gradient-color-3: #1e293b;
}

/* FX-16202 [P0] 线条动画背景 */
.rui-lines-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--rui-bg-1, #0b1020);
}

.rui-lines-bg::before,
.rui-lines-bg::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: repeating-linear-gradient(
    var(--rui-lines-angle, 60deg),
    transparent,
    transparent 40px,
    var(--rui-lines-color, rgba(56, 189, 248, 0.03)) 40px,
    var(--rui-lines-color, rgba(56, 189, 248, 0.03)) 41px
  );
  animation: rui-lines-move var(--rui-lines-duration, 20s) linear infinite;
}

.rui-lines-bg::after {
  background: repeating-linear-gradient(
    calc(var(--rui-lines-angle, 60deg) + 90deg),
    transparent,
    transparent 60px,
    var(--rui-lines-color-2, rgba(20, 184, 166, 0.02)) 60px,
    var(--rui-lines-color-2, rgba(20, 184, 166, 0.02)) 61px
  );
  animation-duration: calc(var(--rui-lines-duration, 20s) * 1.5);
  animation-direction: reverse;
}

@keyframes rui-lines-move {
  0% {
    transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(-100px) translateY(-100px);
  }
}

/* FX-16203 [P0] 几何图形背景 */
.rui-geometric-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--rui-bg-1, #0b1020);
}

.rui-geometric-shape {
  position: absolute;
  opacity: 0.15;
  animation: rui-geometric-float var(--rui-shape-duration, 20s) ease-in-out infinite;
}

.rui-geometric-shape--circle {
  border-radius: 50%;
  border: 1px solid var(--rui-accent, #38bdf8);
}

.rui-geometric-shape--square {
  border: 1px solid var(--rui-accent-2, #14b8a6);
  transform: rotate(45deg);
}

.rui-geometric-shape--triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 86px solid rgba(167, 139, 250, 0.3);
  background: none;
}

@keyframes rui-geometric-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-30px) rotate(5deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(30px) rotate(-5deg);
  }
}

/* 几何图形位置变体 */
.rui-geometric-shape--1 {
  top: 10%;
  left: 10%;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
}

.rui-geometric-shape--2 {
  top: 60%;
  right: 15%;
  width: 80px;
  height: 80px;
  animation-delay: -5s;
}

.rui-geometric-shape--3 {
  bottom: 20%;
  left: 30%;
  border-width: 2px;
  animation-delay: -10s;
}

.rui-geometric-shape--4 {
  top: 30%;
  right: 30%;
  width: 60px;
  height: 60px;
  animation-delay: -15s;
}

/* FX-16205 [P0] 波浪背景 */
.rui-wave-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    var(--rui-bg-1, #0b1020),
    var(--rui-bg-2, #111a33)
  );
}

.rui-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: var(--rui-wave-height, 120px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' opacity='.25' fill='%2338bdf8'%3E%3C/path%3E%3Cpath d='M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z' opacity='.5' fill='%2314b8a6'%3E%3C/path%3E%3Cpath d='M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,googletag-51.73-4.73V0Z' fill='%23a78bfa'%3E%3C/path%3E%3C/svg%3E");
  background-size: 50% 100%;
  animation: rui-wave-move var(--rui-wave-duration, 10s) linear infinite;
}

.rui-wave--2 {
  bottom: 10px;
  height: calc(var(--rui-wave-height, 120px) * 0.8);
  opacity: 0.7;
  animation-duration: calc(var(--rui-wave-duration, 10s) * 1.5);
  animation-direction: reverse;
}

.rui-wave--3 {
  bottom: 20px;
  height: calc(var(--rui-wave-height, 120px) * 0.6);
  opacity: 0.5;
  animation-duration: calc(var(--rui-wave-duration, 10s) * 2);
}

@keyframes rui-wave-move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ============================================
   FX-17501~18000: 过渡效果
   ============================================ */

/* FX-17501 [P0] 淡入淡出 - opacity 过渡 */
.rui-fade-enter {
  opacity: 0;
}

.rui-fade-enter-active {
  opacity: 1;
  transition: opacity var(--rui-fade-duration, 300ms) ease;
}

.rui-fade-exit {
  opacity: 1;
}

.rui-fade-exit-active {
  opacity: 0;
  transition: opacity var(--rui-fade-duration, 300ms) ease;
}

/* 淡入淡出变体 */
.rui-fade-enter--fast {
  --rui-fade-duration: 150ms;
}

.rui-fade-enter--slow {
  --rui-fade-duration: 500ms;
}

.rui-fade-enter--up {
  opacity: 0;
  transform: translateY(10px);
}

.rui-fade-enter-active--up {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--rui-fade-duration, 300ms) ease, transform var(--rui-fade-duration, 300ms) ease;
}

.rui-fade-exit--down {
  opacity: 1;
  transform: translateY(0);
}

.rui-fade-exit-active--down {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--rui-fade-duration, 300ms) ease, transform var(--rui-fade-duration, 300ms) ease;
}

/* FX-17502 [P0] 滑入滑出 - translate 过渡 */
.rui-slide-enter {
  opacity: 0;
}

.rui-slide-enter-from-left {
  transform: translateX(-100%);
}

.rui-slide-enter-from-right {
  transform: translateX(100%);
}

.rui-slide-enter-from-top {
  transform: translateY(-100%);
}

.rui-slide-enter-from-bottom {
  transform: translateY(100%);
}

.rui-slide-enter-active {
  opacity: 1;
  transform: translateX(0) translateY(0);
  transition: opacity var(--rui-slide-duration, 350ms) cubic-bezier(0.4, 0, 0.2, 1),
              transform var(--rui-slide-duration, 350ms) cubic-bezier(0.4, 0, 0.2, 1);
}

.rui-slide-exit {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

.rui-slide-exit-active {
  opacity: 0;
  transition: opacity var(--rui-slide-duration, 350ms) cubic-bezier(0.4, 0, 0.2, 1),
              transform var(--rui-slide-duration, 350ms) cubic-bezier(0.4, 0, 0.2, 1);
}

.rui-slide-exit-to-left {
  transform: translateX(-100%);
}

.rui-slide-exit-to-right {
  transform: translateX(100%);
}

.rui-slide-exit-to-top {
  transform: translateY(-100%);
}

.rui-slide-exit-to-bottom {
  transform: translateY(100%);
}

/* 滑入滑出变体 */
.rui-slide-enter--fast {
  --rui-slide-duration: 200ms;
}

.rui-slide-enter--slow {
  --rui-slide-duration: 500ms;
}

/* FX-17503 [P0] 页面过渡动画 - 完整的页面切换效果 */
.rui-page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

/* 页面过渡遮罩 */
.rui-page-transition-overlay {
  position: absolute;
  inset: 0;
  background: var(--rui-bg-1, #0b1020);
  transform: scaleY(0);
  transform-origin: bottom;
}

.rui-page-transition--enter .rui-page-transition-overlay {
  animation: rui-page-overlay-enter var(--rui-page-transition-duration, 400ms) ease forwards;
}

.rui-page-transition--exit .rui-page-transition-overlay {
  transform-origin: top;
  animation: rui-page-overlay-exit var(--rui-page-transition-duration, 400ms) ease forwards;
}

@keyframes rui-page-overlay-enter {
  0% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

@keyframes rui-page-overlay-exit {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  100% {
    transform: scaleY(1);
    transform-origin: top;
  }
}

/* 页面过渡滑入效果 */
.rui-page-slide {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--rui-bg-1, #0b1020);
}

.rui-page-slide--from-right {
  transform: translateX(100%);
}

.rui-page-slide--from-left {
  transform: translateX(-100%);
}

.rui-page-slide--enter {
  animation: rui-page-slide-in var(--rui-page-slide-duration, 350ms) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.rui-page-slide--exit {
  animation: rui-page-slide-out var(--rui-page-slide-duration, 350ms) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes rui-page-slide-in {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes rui-page-slide-out {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 页面过渡淡入淡出效果 */
.rui-page-fade {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--rui-bg-1, #0b1020);
  opacity: 0;
}

.rui-page-fade--enter {
  animation: rui-page-fade-in var(--rui-page-fade-duration, 300ms) ease forwards;
}

.rui-page-fade--exit {
  animation: rui-page-fade-out var(--rui-page-fade-duration, 300ms) ease forwards;
}

@keyframes rui-page-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes rui-page-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 页面过渡缩放效果 */
.rui-page-zoom {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--rui-bg-1, #0b1020);
  opacity: 0;
  transform: scale(0.95);
}

.rui-page-zoom--enter {
  animation: rui-page-zoom-in var(--rui-page-zoom-duration, 350ms) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.rui-page-zoom--exit {
  animation: rui-page-zoom-out var(--rui-page-zoom-duration, 350ms) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes rui-page-zoom-in {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rui-page-zoom-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}

/* 页面过渡变体 */
.rui-page-transition--fast {
  --rui-page-transition-duration: 250ms;
}

.rui-page-transition--slow {
  --rui-page-transition-duration: 600ms;
}

/* Reduced motion for loading and transition effects */
@media (prefers-reduced-motion: reduce) {
  .rui-spinner,
  .rui-ring-loader::before,
  .rui-ring-loader::after {
    animation: none;
  }

  .rui-pulse-loader span,
  .rui-bounce-loader span {
    animation: none;
    opacity: 0.5;
  }

  .rui-skeleton {
    animation: none;
    background-position: 50% 0;
  }

  .rui-gradient-bg {
    animation: none;
    background-position: 0% 50%;
  }

  .rui-lines-bg::before,
  .rui-lines-bg::after {
    animation: none;
  }

  .rui-geometric-shape {
    animation: none;
  }

  .rui-wave {
    animation: none;
  }

  .rui-fade-enter,
  .rui-fade-exit,
  .rui-slide-enter,
  .rui-slide-exit {
    transition: none;
  }

  /* 新增加载动画的reduced motion支持 */
  .rui-progress-bar-fill,
  .rui-progress-bar--indeterminate .rui-progress-bar-fill {
    animation: none;
    transition: none;
  }

  .rui-letter-bounce-loader span {
    animation: none;
    transform: translateY(0);
  }

  .rui-fluid-loader::before,
  .rui-fluid-loader::after {
    animation: none;
  }

  .rui-gradient-scan-loader::before,
  .rui-gradient-scan-loader::after {
    animation: none;
  }

  .rui-dot-bounce-loader span {
    animation: none;
    transform: translateY(0) scale(1);
  }

  .rui-page-transition-overlay,
  .rui-page-slide,
  .rui-page-fade,
  .rui-page-zoom {
    animation: none;
    transition: none;
  }

  /* FX-11701: Disable 3D auto-rotation */
  .rui-3d-cube,
  .rui-3d-sphere,
  .rui-3d-scene {
    animation: none !important;
  }
}

/* ========================================
   3D Effects (FX-11501~12000)
   ======================================== */

/* FX-11501: Three.js Basic Scene */
.rui-3d-scene {
  position: relative;
  width: 100%;
  height: 400px;
  perspective: 1000px;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--rui-bg-2) 0%, var(--rui-bg-3) 100%);
}

.rui-3d-scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.rui-3d-scene-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rui-3d-scene-controls {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

.rui-3d-scene-controls button {
  padding: 8px 16px;
  background: var(--rui-surface);
  border: 1px solid var(--rui-border);
  border-radius: 8px;
  color: var(--rui-text-main);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rui-3d-scene-controls button:hover {
  background: var(--rui-accent);
  color: #041221;
}

/* FX-11502: 3D Cube */
.rui-3d-cube-container {
  position: relative;
  width: 200px;
  height: 200px;
  perspective: 800px;
}

.rui-3d-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(-30deg);
  transition: transform 0.3s ease-out;
}

.rui-3d-cube.rui-3d-auto-rotate {
  animation: rui-3d-cube-rotate 8s linear infinite;
}

@keyframes rui-3d-cube-rotate {
  from {
    transform: rotateX(-20deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-20deg) rotateY(360deg);
  }
}

.rui-3d-cube-face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid var(--rui-accent);
  background: rgba(56, 189, 248, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--rui-accent);
  backface-visibility: visible;
}

.rui-3d-cube-face.front  { transform: translateZ(100px); }
.rui-3d-cube-face.back   { transform: rotateY(180deg) translateZ(100px); }
.rui-3d-cube-face.right  { transform: rotateY(90deg) translateZ(100px); }
.rui-3d-cube-face.left   { transform: rotateY(-90deg) translateZ(100px); }
.rui-3d-cube-face.top    { transform: rotateX(90deg) translateZ(100px); }
.rui-3d-cube-face.bottom { transform: rotateX(-90deg) translateZ(100px); }

/* FX-11503: 3D Sphere */
.rui-3d-sphere-container {
  position: relative;
  width: 200px;
  height: 200px;
  perspective: 800px;
}

.rui-3d-sphere {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}

.rui-3d-sphere.rui-3d-auto-rotate {
  animation: rui-3d-sphere-rotate 12s linear infinite;
}

@keyframes rui-3d-sphere-rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

.rui-3d-sphere-mesh {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid var(--rui-accent-2);
  background: radial-gradient(circle at 30% 30%, rgba(20, 184, 166, 0.2), transparent);
  transform-style: preserve-3d;
}

/* ========================================
   Card Effects (FX-15501~16000)
   ======================================== */

/* FX-15501: Basic Card */
.rui-card {
  position: relative;
  background: var(--rui-surface);
  border: 1px solid var(--rui-border);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

.rui-card-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rui-border);
}

.rui-card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--rui-text-main);
  margin: 0;
}

.rui-card-content {
  color: var(--rui-text-muted);
  line-height: 1.6;
}

.rui-card-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--rui-border);
}

/* FX-15502: Hover Card */
.rui-card-hover {
  cursor: pointer;
  transform: translateY(0);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.rui-card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2),
              0 10px 10px -5px rgba(0, 0, 0, 0.1);
  border-color: var(--rui-accent);
}

.rui-card-hover:active {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

/* FX-15503: Flip Card */
.rui-card-flip {
  perspective: 1000px;
  width: 100%;
  height: 280px;
}

.rui-card-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.rui-card-flip:hover .rui-card-flip-inner {
  transform: rotateY(180deg);
}

.rui-card-flip-front,
.rui-card-flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 12px;
  background: var(--rui-surface);
  border: 1px solid var(--rui-border);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.rui-card-flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, var(--rui-bg-2) 0%, var(--rui-bg-3) 100%);
}

.rui-card-flip-label {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 12px;
  color: var(--rui-accent);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* FX-15504: Fold Card */
.rui-card-fold {
  overflow: hidden;
}

.rui-card-fold-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.rui-card-fold-toggle {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.rui-card-fold-toggle svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.rui-card-fold.expanded .rui-card-fold-toggle {
  transform: rotate(180deg);
}

.rui-card-fold-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.rui-card-fold.expanded .rui-card-fold-content {
  max-height: 500px;
  padding-top: 16px;
}

/* FX-15510: Glass Card */
.rui-card-glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.rui-card-glass:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

:root[data-rui-color-mode="light"] .rui-card-glass {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

:root[data-rui-color-mode="light"] .rui-card-glass:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.15);
}

/* ========================================
   Responsive Design (FX-18001~18500)
   ======================================== */

/* FX-18001: Breakpoint Adaptation */
:root {
  --rui-breakpoint-sm: 640px;
  --rui-breakpoint-md: 768px;
  --rui-breakpoint-lg: 1024px;
  --rui-breakpoint-xl: 1280px;
  --rui-breakpoint-2xl: 1536px;
}

/* FX-18005: Mobile First - Base styles are mobile */

/* Small devices (landscape phones, 640px and up) */
@media (min-width: 640px) {
  .rui-card {
    padding: 24px;
  }

  .rui-3d-scene {
    height: 450px;
  }

  .rui-3d-cube-container,
  .rui-3d-sphere-container {
    width: 250px;
    height: 250px;
  }

  .rui-3d-cube-face {
    width: 250px;
    height: 250px;
  }

  .rui-3d-cube-face.front  { transform: translateZ(125px); }
  .rui-3d-cube-face.back   { transform: rotateY(180deg) translateZ(125px); }
  .rui-3d-cube-face.right  { transform: rotateY(90deg) translateZ(125px); }
  .rui-3d-cube-face.left   { transform: rotateY(-90deg) translateZ(125px); }
  .rui-3d-cube-face.top    { transform: rotateX(90deg) translateZ(125px); }
  .rui-3d-cube-face.bottom { transform: rotateX(-90deg) translateZ(125px); }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .rui-card {
    padding: 28px;
  }

  .rui-3d-scene {
    height: 500px;
  }

  .rui-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
  .rui-3d-scene {
    height: 550px;
  }

  .rui-card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

/* Extra large devices (large desktops, 1280px and up) */
@media (min-width: 1280px) {
  .rui-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* FX-18501: Touch Device Optimization */
@media (hover: none) and (pointer: coarse) {
  .rui-card-hover:hover {
    transform: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border-color: var(--rui-border);
  }

  .rui-card-hover:active {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  }

  .rui-card-flip:hover .rui-card-flip-inner {
    transform: none;
  }

  .rui-card-flip.touch-enabled .rui-card-flip-inner {
    transform: rotateY(180deg);
  }

  .rui-3d-scene-controls button {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 20px;
    font-size: 16px;
  }

  .rui-card-glass:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }

  .rui-card-glass:active {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
  }
}

/* Touch feedback */
@media (hover: none) and (pointer: coarse) {
  .rui-card,
  .rui-card-hover,
  .rui-card-glass {
    -webkit-tap-highlight-color: transparent;
  }

  .rui-card-hover:active,
  .rui-card-glass:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 500px) {
  .rui-3d-scene {
    height: 300px;
  }

  .rui-card-flip {
    height: 220px;
  }
}

/* ========================================
   CSS Transition Effects (FX-10501~10600)
   ======================================== */

/* FX-10501: Base Transition - transition property */
.rui-transition {
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.rui-transition-fast {
  transition-property: all;
  transition-duration: 150ms;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.rui-transition-medium {
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.rui-transition-slow {
  transition-property: all;
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0s;
}

/* FX-10502: Multi-property Transition - simultaneous transition */
.rui-transition-multiple {
  transition:
    opacity 300ms ease,
    transform 300ms ease,
    background-color 300ms ease,
    color 300ms ease,
    box-shadow 300ms ease,
    border-color 300ms ease;
}

.rui-transition-multiple-staggered {
  transition:
    opacity 200ms ease 0ms,
    transform 200ms ease 50ms,
    background-color 200ms ease 100ms,
    box-shadow 200ms ease 150ms;
}

/* FX-10503: Delayed Transition - animation-delay */
.rui-transition-delay-sm {
  transition-delay: 100ms;
}

.rui-transition-delay-md {
  transition-delay: 200ms;
}

.rui-transition-delay-lg {
  transition-delay: 400ms;
}

.rui-transition-delay-xl {
  transition-delay: 600ms;
}

/* FX-10504: Cubic Bezier Transition - custom timing function */
/* Ease-in-out variants */
.rui-transition-ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.rui-transition-ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.rui-transition-ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom bezier curves */
.rui-transition-smooth {
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.rui-transition-smooth-more {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.rui-transition-snappy {
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.rui-transition-bounce-in {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.rui-transition-anticipate {
  transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

/* FX-10505: Elastic Transition - elastic timing function */
.rui-transition-elastic {
  transition-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

.rui-transition-elastic-in {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.rui-transition-spring {
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.rui-transition-wobbly {
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================================
   CSS Keyframe Animations (FX-10601~10800)
   ======================================== */

/* FX-10601: Fade In Animation - opacity 0 to 1 */
@keyframes rui-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes rui-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rui-fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rui-fade-in-left {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes rui-fade-in-right {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* FX-10603: Scale Animation */
@keyframes rui-scale-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rui-scale-out {
  from {
    opacity: 0;
    transform: scale(1.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rui-scale-up {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

@keyframes rui-pulse-scale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* FX-10604: Translate Animation */
@keyframes rui-slide-in-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rui-slide-in-down {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rui-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes rui-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes rui-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* FX-10605: Rotate Animation */
@keyframes rui-rotate-in {
  from {
    opacity: 0;
    transform: rotate(-180deg);
  }
  to {
    opacity: 1;
    transform: rotate(0);
  }
}

@keyframes rui-rotate-in-clockwise {
  from {
    opacity: 0;
    transform: rotate(180deg);
  }
  to {
    opacity: 1;
    transform: rotate(0);
  }
}

@keyframes rui-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rui-spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Animation utility classes */
.rui-animate-fade-in {
  animation: rui-fade-in 0.5s ease forwards;
}

.rui-animate-fade-in-up {
  animation: rui-fade-in-up 0.5s ease forwards;
}

.rui-animate-fade-in-down {
  animation: rui-fade-in-down 0.5s ease forwards;
}

.rui-animate-fade-in-left {
  animation: rui-fade-in-left 0.5s ease forwards;
}

.rui-animate-fade-in-right {
  animation: rui-fade-in-right 0.5s ease forwards;
}

.rui-animate-scale-in {
  animation: rui-scale-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.rui-animate-scale-out {
  animation: rui-scale-out 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.rui-animate-scale-up {
  animation: rui-scale-up 0.3s ease forwards;
}

.rui-animate-pulse-scale {
  animation: rui-pulse-scale 2s ease-in-out infinite;
}

.rui-animate-slide-up {
  animation: rui-slide-in-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.rui-animate-slide-down {
  animation: rui-slide-in-down 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.rui-animate-slide-left {
  animation: rui-slide-in-left 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.rui-animate-slide-right {
  animation: rui-slide-in-right 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.rui-animate-float {
  animation: rui-float 3s ease-in-out infinite;
}

.rui-animate-rotate-in {
  animation: rui-rotate-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.rui-animate-rotate-in-cw {
  animation: rui-rotate-in-clockwise 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.rui-animate-spin {
  animation: rui-spin 1s linear infinite;
}

.rui-animate-spin-slow {
  animation: rui-spin-slow 3s linear infinite;
}

/* Animation delays */
.rui-animate-delay-1 { animation-delay: 0.1s; }
.rui-animate-delay-2 { animation-delay: 0.2s; }
.rui-animate-delay-3 { animation-delay: 0.3s; }
.rui-animate-delay-4 { animation-delay: 0.4s; }
.rui-animate-delay-5 { animation-delay: 0.5s; }

/* Animation durations */
.rui-animate-duration-fast { animation-duration: 0.15s; }
.rui-animate-duration-normal { animation-duration: 0.3s; }
.rui-animate-duration-slow { animation-duration: 0.5s; }
.rui-animate-duration-slower { animation-duration: 0.8s; }

/* ========================================
   Page Transitions (FX-11001~11200)
   ======================================== */

/* FX-11001: Fade Transition */
.rui-page-fade-enter {
  opacity: 0;
}

.rui-page-fade-enter-active {
  opacity: 1;
  transition: opacity 400ms ease;
}

.rui-page-fade-exit {
  opacity: 1;
}

.rui-page-fade-exit-active {
  opacity: 0;
  transition: opacity 400ms ease;
}

/* FX-11002: Slide Transition */
.rui-page-slide-enter {
  opacity: 0;
  transform: translateX(30px);
}

.rui-page-slide-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rui-page-slide-exit {
  opacity: 1;
  transform: translateX(0);
}

.rui-page-slide-exit-active {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Slide from left variant */
.rui-page-slide-left-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.rui-page-slide-left-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rui-page-slide-left-exit {
  opacity: 1;
  transform: translateX(0);
}

.rui-page-slide-left-exit-active {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Slide up variant */
.rui-page-slide-up-enter {
  opacity: 0;
  transform: translateY(30px);
}

.rui-page-slide-up-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rui-page-slide-up-exit {
  opacity: 1;
  transform: translateY(0);
}

.rui-page-slide-up-exit-active {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Slide down variant */
.rui-page-slide-down-enter {
  opacity: 0;
  transform: translateY(-30px);
}

.rui-page-slide-down-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rui-page-slide-down-exit {
  opacity: 1;
  transform: translateY(0);
}

.rui-page-slide-down-exit-active {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* FX-11003: Scale Transition */
.rui-page-scale-enter {
  opacity: 0;
  transform: scale(0.95);
}

.rui-page-scale-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rui-page-scale-exit {
  opacity: 1;
  transform: scale(1);
}

.rui-page-scale-exit-active {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Scale up variant */
.rui-page-scale-up-enter {
  opacity: 0;
  transform: scale(1.05);
}

.rui-page-scale-up-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rui-page-scale-up-exit {
  opacity: 1;
  transform: scale(1);
}

.rui-page-scale-up-exit-active {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Page transition container */
.rui-page-transition-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.rui-page-transition-container > * {
  transition: opacity 400ms ease, transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Transition overlay for smooth page changes */
.rui-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--rui-bg-1, #0b1020);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease;
}

.rui-transition-overlay.active {
  opacity: 1;
}

/* ========================================
   Border Effects (FX-10101~10200)
   ======================================== */

/* FX-10101 [P0] Gradient Border - using pseudo-element */
.rui-border-gradient {
  position: relative;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.rui-border-gradient::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--rui-accent, #38bdf8), var(--rui-accent-2, #14b8a6), #a855f7, #ec4899);
}

.rui-border-gradient-rgb {
  position: relative;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.rui-border-gradient-rgb::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, #f472b6, #fb923c, #facc15, #4ade80, #22d3ee, #818cf8);
}

/* FX-10102 [P0] Animated Gradient Border - flowing animation */
.rui-border-gradient-animated {
  position: relative;
  border: 2px solid transparent;
  background-clip: padding-box;
  background-size: 300% 300%;
  animation: rui-gradient-flow 4s ease infinite;
}

.rui-border-gradient-animated::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg,
    #f472b6 0%,
    #fb923c 16%,
    #facc15 33%,
    #4ade80 50%,
    #22d3ee 66%,
    #818cf8 83%,
    #f472b6 100%
  );
  background-size: 300% 100%;
  animation: rui-gradient-border-flow 3s linear infinite;
}

@keyframes rui-gradient-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes rui-gradient-border-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* FX-10103 [P0] Glowing Border - box-shadow glow */
.rui-border-glow {
  border: 2px solid var(--rui-accent, #38bdf8);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.4),
              0 0 40px rgba(56, 189, 248, 0.2),
              inset 0 0 20px rgba(56, 189, 248, 0.1);
}

.rui-border-glow-colored {
  border: 2px solid var(--rui-accent-2, #14b8a6);
  box-shadow: 0 0 20px rgba(20, 184, 166, 0.4),
              0 0 40px rgba(20, 184, 166, 0.2),
              inset 0 0 20px rgba(20, 184, 166, 0.1);
}

.rui-border-glow-multi {
  border: 2px solid transparent;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.5),
              0 0 30px rgba(168, 85, 247, 0.3),
              0 0 45px rgba(236, 72, 153, 0.2);
}

/* FX-10104 [P0] Pulsing Glowing Border - pulse animation */
.rui-border-pulse {
  border: 2px solid var(--rui-accent, #38bdf8);
  animation: rui-border-pulse-anim 2s ease-in-out infinite;
}

@keyframes rui-border-pulse-anim {
  0%, 100% {
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3),
                0 0 20px rgba(56, 189, 248, 0.2),
                0 0 30px rgba(56, 189, 248, 0.1);
  }
  50% {
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.6),
                0 0 40px rgba(56, 189, 248, 0.4),
                0 0 60px rgba(56, 189, 248, 0.2);
  }
}

.rui-border-pulse-rainbow {
  border: 2px solid transparent;
  animation: rui-border-pulse-rainbow-anim 3s ease-in-out infinite;
}

@keyframes rui-border-pulse-rainbow-anim {
  0%, 100% {
    border-color: #f472b6;
    box-shadow: 0 0 15px rgba(244, 114, 182, 0.5);
  }
  16% {
    border-color: #fb923c;
    box-shadow: 0 0 15px rgba(251, 146, 60, 0.5);
  }
  33% {
    border-color: #facc15;
    box-shadow: 0 0 15px rgba(250, 204, 21, 0.5);
  }
  50% {
    border-color: #4ade80;
    box-shadow: 0 0 15px rgba(74, 222, 128, 0.5);
  }
  66% {
    border-color: #22d3ee;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.5);
  }
  83% {
    border-color: #818cf8;
    box-shadow: 0 0 15px rgba(129, 140, 248, 0.5);
  }
}

/* FX-10105 [P0] Breathing Border - breathing light effect */
.rui-border-breathe {
  border: 2px solid var(--rui-accent, #38bdf8);
  animation: rui-border-breathe-anim 3s ease-in-out infinite;
}

@keyframes rui-border-breathe-anim {
  0%, 100% {
    opacity: 0.4;
    box-shadow: 0 0 5px rgba(56, 189, 248, 0.3);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.6),
                0 0 50px rgba(56, 189, 248, 0.3);
  }
}

.rui-border-breathe-soft {
  border: 1px solid rgba(56, 189, 248, 0.3);
  animation: rui-border-breathe-soft-anim 4s ease-in-out infinite;
}

@keyframes rui-border-breathe-soft-anim {
  0%, 100% {
    border-color: rgba(56, 189, 248, 0.2);
    box-shadow: inset 0 0 10px rgba(56, 189, 248, 0.1);
  }
  50% {
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow: inset 0 0 25px rgba(56, 189, 248, 0.3);
  }
}

/* FX-10106 [P0] Neon Border - neon light effect */
.rui-border-neon {
  border: 2px solid var(--rui-accent, #38bdf8);
  box-shadow: 0 0 5px rgba(56, 189, 248, 0.5),
              0 0 10px rgba(56, 189, 248, 0.4),
              0 0 20px rgba(56, 189, 248, 0.3),
              0 0 40px rgba(56, 189, 248, 0.2),
              inset 0 0 10px rgba(56, 189, 248, 0.1);
}

.rui-border-neon-pink {
  border: 2px solid #ec4899;
  box-shadow: 0 0 5px rgba(236, 72, 153, 0.5),
              0 0 10px rgba(236, 72, 153, 0.4),
              0 0 20px rgba(236, 72, 153, 0.3),
              0 0 40px rgba(236, 72, 153, 0.2),
              inset 0 0 10px rgba(236, 72, 153, 0.1);
}

.rui-border-neon-cyan {
  border: 2px solid #22d3ee;
  box-shadow: 0 0 5px rgba(34, 211, 238, 0.5),
              0 0 10px rgba(34, 211, 238, 0.4),
              0 0 20px rgba(34, 211, 238, 0.3),
              0 0 40px rgba(34, 211, 238, 0.2),
              inset 0 0 10px rgba(34, 211, 238, 0.1);
}

.rui-border-neon-flicker {
  border: 2px solid var(--rui-accent, #38bdf8);
  animation: rui-neon-flicker 0.15s infinite alternate;
}

@keyframes rui-neon-flicker {
  0% {
    opacity: 1;
    box-shadow: 0 0 5px rgba(56, 189, 248, 0.7),
                0 0 10px rgba(56, 189, 248, 0.5),
                0 0 20px rgba(56, 189, 248, 0.3);
  }
  100% {
    opacity: 0.85;
    box-shadow: 0 0 3px rgba(56, 189, 248, 0.5),
                0 0 8px rgba(56, 189, 248, 0.3),
                0 0 15px rgba(56, 189, 248, 0.2);
  }
}

/* FX-10107 [P0] Glitch Border - glitch effect */
.rui-border-glitch {
  position: relative;
  border: 2px solid var(--rui-accent, #38bdf8);
}

.rui-border-glitch::before,
.rui-border-glitch::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: inherit;
  border-radius: inherit;
  background: transparent;
}

.rui-border-glitch::before {
  animation: rui-glitch-1 2s infinite linear alternate-reverse;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

.rui-border-glitch::after {
  animation: rui-glitch-2 3s infinite linear alternate-reverse;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}

@keyframes rui-glitch-1 {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, -1px); }
  80% { transform: translate(2px, 1px); }
}

@keyframes rui-glitch-2 {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(3px, -2px); }
  40% { transform: translate(-3px, 2px); }
  60% { transform: translate(2px, 1px); }
  80% { transform: translate(-2px, -1px); }
}

.rui-border-glitch-rgb {
  position: relative;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.rui-border-glitch-rgb::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, #f472b6, #fb923c, #facc15, #4ade80, #22d3ee, #818cf8);
}

.rui-border-glitch-rgb::after {
  content: '';
  position: absolute;
  inset: -4px;
  z-index: -2;
  border-radius: inherit;
  background: #f472b6;
  filter: blur(10px);
  opacity: 0.5;
  animation: rui-glitch-rgb-anim 0.3s infinite;
}

@keyframes rui-glitch-rgb-anim {
  0% { transform: translate(-2px, 0); opacity: 0.5; }
  25% { transform: translate(2px, 0); opacity: 0.3; }
  50% { transform: translate(-1px, 2px); opacity: 0.5; }
   75% { transform: translate(1px, -2px); opacity: 0.3; }
  100% { transform: translate(0, 0); opacity: 0.5; }
}

/* ========================================
   Shadow Effects (FX-10201~10300)
   ======================================== */

/* FX-10201 [P0] Soft Shadow - multi-layer shadow stacking */
.rui-shadow-soft {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
              0 2px 4px rgba(0, 0, 0, 0.05),
              0 4px 8px rgba(0, 0, 0, 0.05),
              0 8px 16px rgba(0, 0, 0, 0.05);
}

.rui-shadow-soft-medium {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08),
              0 4px 6px rgba(0, 0, 0, 0.08),
              0 8px 15px rgba(0, 0, 0, 0.08),
              0 20px 25px rgba(0, 0, 0, 0.1);
}

.rui-shadow-soft-large {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),
              0 4px 6px rgba(0, 0, 0, 0.1),
              0 10px 20px rgba(0, 0, 0, 0.1),
              0 25px 50px rgba(0, 0, 0, 0.15);
}

/* FX-10202 [P0] Layered Color Shadow - multi-layer colored shadow */
.rui-shadow-layered {
  box-shadow: 0 5px 15px rgba(56, 189, 248, 0.1),
              0 10px 30px rgba(168, 85, 247, 0.1),
              0 20px 50px rgba(236, 72, 153, 0.1);
}

.rui-shadow-layered-blue {
  box-shadow: 0 5px 15px rgba(56, 189, 248, 0.15),
              0 15px 35px rgba(56, 189, 248, 0.1),
              0 30px 60px rgba(56, 189, 248, 0.05);
}

.rui-shadow-layered-purple {
  box-shadow: 0 5px 15px rgba(168, 85, 247, 0.2),
              0 15px 35px rgba(168, 85, 247, 0.15),
              0 30px 60px rgba(168, 85, 247, 0.1);
}

.rui-shadow-layered-rainbow {
  box-shadow: 0 5px 15px rgba(244, 114, 182, 0.15),
              0 10px 25px rgba(251, 146, 60, 0.15),
              0 20px 40px rgba(250, 204, 21, 0.15),
              0 40px 80px rgba(74, 222, 128, 0.1);
}

.rui-shadow-layered-glow {
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.2),
              0 0 40px rgba(20, 184, 166, 0.15),
              0 0 60px rgba(168, 85, 247, 0.1);
}

/* FX-10203 [P0] Dynamic Shadow - follows mouse (requires JS) */
.rui-shadow-dynamic {
  transition: box-shadow 0.15s ease-out;
}

.rui-shadow-dynamic-center {
  box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
}

.rui-shadow-dynamic-top {
  box-shadow: 0 -10px 20px -5px rgba(56, 189, 248, 0.3);
}

.rui-shadow-dynamic-bottom {
  box-shadow: 0 10px 20px -5px rgba(56, 189, 248, 0.3);
}

.rui-shadow-dynamic-left {
  box-shadow: -10px 0 20px -5px rgba(56, 189, 248, 0.3);
}

.rui-shadow-dynamic-right {
  box-shadow: 10px 0 20px -5px rgba(56, 189, 248, 0.3);
}

/* JavaScript-Controlled Dynamic Shadow */
/*
.rui-shadow-mouse-x {
  transition: box-shadow 0.1s ease-out;
  box-shadow:
    calc(var(--mouse-x, 0.5) * 20px - 10px) 0 20px -5px rgba(56, 189, 248, 0.3),
    0 5px 15px rgba(0, 0, 0, 0.1);
}
*/

/* FX-10204 [P0] Hover Shadow - shadow changes on hover */
.rui-shadow-hover {
  transition: box-shadow 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),
              0 2px 6px rgba(0, 0, 0, 0.1);
}

.rui-shadow-hover:hover {
  box-shadow: 0 5px 15px rgba(56, 189, 248, 0.15),
              0 10px 30px rgba(0, 0, 0, 0.15);
}

.rui-shadow-hover-lift {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rui-shadow-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(56, 189, 248, 0.15),
              0 20px 40px rgba(0, 0, 0, 0.15);
}

.rui-shadow-hover-expand {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rui-shadow-hover-expand:hover {
  transform: scale(1.02);
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.3),
              0 10px 40px rgba(0, 0, 0, 0.2);
}

.rui-shadow-hover-glow {
  transition: box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rui-shadow-hover-glow:hover {
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.4),
              0 0 50px rgba(56, 189, 248, 0.2),
              0 0 75px rgba(56, 189, 248, 0.1);
}

.rui-shadow-hover-rainbow {
  transition: box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rui-shadow-hover-rainbow:hover {
  box-shadow: 0 5px 20px rgba(244, 114, 182, 0.3),
              0 10px 40px rgba(251, 146, 60, 0.2),
              0 20px 60px rgba(74, 222, 128, 0.1);
}

/* FX-10205 [P0] Outer Glow - external glow effect */
.rui-glow {
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.3),
              0 0 40px rgba(56, 189, 248, 0.2),
              0 0 60px rgba(56, 189, 248, 0.1);
}

.rui-glow-sm {
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3),
              0 0 20px rgba(56, 189, 248, 0.15);
}

.rui-glow-md {
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.4),
              0 0 40px rgba(56, 189, 248, 0.25),
              0 0 60px rgba(56, 189, 248, 0.1);
}

.rui-glow-lg {
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.5),
              0 0 60px rgba(56, 189, 248, 0.3),
              0 0 100px rgba(56, 189, 248, 0.15);
}

.rui-glow-colored {
  box-shadow: 0 0 20px rgba(20, 184, 166, 0.4),
              0 0 40px rgba(20, 184, 166, 0.25),
              0 0 60px rgba(20, 184, 166, 0.1);
}

.rui-glow-pink {
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.4),
              0 0 40px rgba(236, 72, 153, 0.25),
              0 0 60px rgba(236, 72, 153, 0.1);
}

.rui-glow-purple {
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.4),
              0 0 40px rgba(168, 85, 247, 0.25),
              0 0 60px rgba(168, 85, 247, 0.1);
}

.rui-glow-animated {
  animation: rui-glow-pulse 2s ease-in-out infinite;
}

@keyframes rui-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.3),
                0 0 40px rgba(56, 189, 248, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.5),
                0 0 60px rgba(56, 189, 248, 0.3),
                0 0 90px rgba(56, 189, 248, 0.15);
  }
}

/* FX-10206 [P0] Inner Shadow - inset shadow */
.rui-shadow-inset {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1),
              inset 0 4px 8px rgba(0, 0, 0, 0.08),
              inset 0 -1px 2px rgba(255, 255, 255, 0.05);
}

.rui-shadow-inset-sm {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.rui-shadow-inset-md {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1),
              inset 0 4px 8px rgba(0, 0, 0, 0.08);
}

.rui-shadow-inset-lg {
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.12),
              inset 0 8px 16px rgba(0, 0, 0, 0.1),
              inset 0 -2px 4px rgba(255, 255, 255, 0.05);
}

.rui-shadow-inset-light {
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1),
              inset 0 -1px 2px rgba(0, 0, 0, 0.05);
}

.rui-shadow-inset-glow {
  box-shadow: inset 0 0 20px rgba(56, 189, 248, 0.2),
              inset 0 0 40px rgba(56, 189, 248, 0.1);
}

.rui-shadow-inset-colored {
  box-shadow: inset 0 0 30px rgba(168, 85, 247, 0.15),
              inset 0 0 60px rgba(168, 85, 247, 0.08);
}

.rui-shadow-inset-pressed {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2),
              inset 0 4px 8px rgba(0, 0, 0, 0.15),
              inset 0 -1px 1px rgba(255, 255, 255, 0.05);
}

.rui-shadow-inset-focus {
  box-shadow: inset 0 0 0 2px rgba(56, 189, 248, 0.3),
              inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Combined border and shadow utilities */
.rui-border-shadow-combined {
  border: 2px solid var(--rui-accent, #38bdf8);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.3),
              0 5px 15px rgba(0, 0, 0, 0.2);
}

.rui-border-shadow-inset {
  border: 2px solid rgba(56, 189, 248, 0.3);
  box-shadow: inset 0 0 20px rgba(56, 189, 248, 0.15),
              0 5px 15px rgba(0, 0, 0, 0.1);
}

/* ========================================
   Background Effects (FX-10301~10400)
   ======================================== */

/* FX-10301 [P0] Gradient Background - linear/radial gradient */
.rui-bg-gradient-linear {
  background: linear-gradient(135deg, var(--rui-bg-1) 0%, var(--rui-bg-2) 50%, var(--rui-bg-3) 100%);
}

.rui-bg-gradient-linear-top {
  background: linear-gradient(to bottom, var(--rui-bg-1) 0%, var(--rui-bg-2) 100%);
}

.rui-bg-gradient-linear-bottom {
  background: linear-gradient(to top, var(--rui-bg-1) 0%, var(--rui-bg-2) 100%);
}

.rui-bg-gradient-linear-left {
  background: linear-gradient(to right, var(--rui-bg-1) 0%, var(--rui-bg-2) 100%);
}

.rui-bg-gradient-linear-right {
  background: linear-gradient(to left, var(--rui-bg-1) 0%, var(--rui-bg-2) 100%);
}

.rui-bg-gradient-linear-diagonal {
  background: linear-gradient(45deg, var(--rui-bg-1) 0%, var(--rui-bg-3) 50%, var(--rui-bg-2) 100%);
}

.rui-bg-gradient-linear-multi {
  background: linear-gradient(
    135deg,
    var(--rui-bg-1) 0%,
    var(--rui-bg-2) 25%,
    var(--rui-bg-3) 50%,
    var(--rui-bg-2) 75%,
    var(--rui-bg-1) 100%
  );
}

.rui-bg-gradient-radial {
  background: radial-gradient(circle at center, var(--rui-bg-2) 0%, var(--rui-bg-1) 100%);
}

.rui-bg-gradient-radial-top {
  background: radial-gradient(circle at 50% 0%, var(--rui-bg-2) 0%, var(--rui-bg-1) 100%);
}

.rui-bg-gradient-radial-center {
  background: radial-gradient(circle at center, var(--rui-bg-2) 0%, var(--rui-bg-1) 70%);
}

.rui-bg-gradient-radial-corners {
  background: radial-gradient(circle at 0% 0%, var(--rui-bg-3) 0%, transparent 50%),
              radial-gradient(circle at 100% 100%, var(--rui-bg-3) 0%, transparent 50%),
              var(--rui-bg-1);
}

.rui-bg-gradient-radial-glow {
  background: radial-gradient(ellipse at 50% 50%, var(--rui-bg-2) 0%, var(--rui-bg-1) 60%);
}

.rui-bg-gradient-conic {
  background: conic-gradient(from 0deg at 50% 50%, var(--rui-bg-1), var(--rui-bg-3), var(--rui-bg-2), var(--rui-bg-1));
}

/* FX-10302 [P0] Dynamic Gradient - animated gradient */
.rui-bg-gradient-animated {
  background: linear-gradient(135deg, var(--rui-bg-1), var(--rui-bg-2), var(--rui-bg-3), var(--rui-bg-2));
  background-size: 300% 300%;
  animation: rui-gradient-shift 8s ease infinite;
}

@keyframes rui-gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.rui-bg-gradient-flow {
  background: linear-gradient(90deg, var(--rui-bg-1), var(--rui-bg-3), var(--rui-bg-2));
  background-size: 200% 100%;
  animation: rui-gradient-flow 3s linear infinite;
}

@keyframes rui-gradient-flow {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.rui-bg-gradient-rainbow {
  background: linear-gradient(
    45deg,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #0000ff,
    #4b0082,
    #9400d3
  );
  background-size: 400% 400%;
  animation: rui-gradient-rainbow 10s ease infinite;
}

@keyframes rui-gradient-rainbow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.rui-bg-gradient-pulse {
  background: radial-gradient(circle at 50% 50%, var(--rui-bg-2), var(--rui-bg-1));
  animation: rui-gradient-pulse 4s ease-in-out infinite;
}

@keyframes rui-gradient-pulse {
  0%, 100% {
    background-size: 100% 100%;
    opacity: 1;
  }
  50% {
    background-size: 120% 120%;
    opacity: 0.9;
  }
}

.rui-bg-gradient-aurora {
  background: linear-gradient(
    120deg,
    rgba(56, 189, 248, 0.1) 0%,
    rgba(20, 184, 166, 0.1) 25%,
    rgba(168, 85, 247, 0.1) 50%,
    rgba(236, 72, 153, 0.1) 75%,
    rgba(56, 189, 248, 0.1) 100%
  );
  background-size: 400% 400%;
  animation: rui-gradient-aurora 12s ease infinite;
}

@keyframes rui-gradient-aurora {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 50% 100%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 50% 0%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* FX-10303 [P0] Grid Background - tech grid pattern */
.rui-bg-grid {
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

.rui-bg-grid-sm {
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
}

.rui-bg-grid-lg {
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.04) 1px, transparent 1px);
  background-size: 80px 80px;
}

.rui-bg-grid-accent {
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
}

.rui-bg-grid-accent-sm {
  background-image:
    linear-gradient(rgba(20, 184, 166, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 184, 166, 0.12) 1px, transparent 1px);
  background-size: 25px 25px;
}

.rui-bg-grid-animated {
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: rui-grid-pulse 4s ease-in-out infinite;
}

@keyframes rui-grid-pulse {
  0%, 100% {
    background-color: transparent;
  }
  50% {
    background-color: rgba(56, 189, 248, 0.02);
  }
}

.rui-bg-grid-glow {
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.05), transparent 60%);
  background-size: 40px 40px, 40px 40px, 100% 100%;
}

.rui-bg-grid-3d {
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 40px 40px;
  background-position: 0 0, 0 0, 20px 20px;
}

/* FX-10304 [P0] Dot Matrix Background - dot pattern */
.rui-bg-dots {
  background-image: radial-gradient(circle, rgba(56, 189, 248, 0.15) 1px, transparent 1px);
  background-size: 20px 20px;
}

.rui-bg-dots-sm {
  background-image: radial-gradient(circle, rgba(56, 189, 248, 0.2) 1px, transparent 1px);
  background-size: 10px 10px;
}

.rui-bg-dots-lg {
  background-image: radial-gradient(circle, rgba(56, 189, 248, 0.1) 2px, transparent 2px);
  background-size: 30px 30px;
}

.rui-bg-dots-accent {
  background-image: radial-gradient(circle, rgba(20, 184, 166, 0.2) 1px, transparent 1px);
  background-size: 15px 15px;
}

.rui-bg-dots-animated {
  background-image: radial-gradient(circle, rgba(56, 189, 248, 0.15) 1px, transparent 1px);
  background-size: 20px 20px;
  animation: rui-dots-float 6s ease-in-out infinite;
}

@keyframes rui-dots-float {
  0%, 100% {
    background-position: 0 0;
  }
  50% {
    background-position: 10px 10px;
  }
}

.rui-bg-dots-glow {
  background-image:
    radial-gradient(circle, rgba(56, 189, 248, 0.2) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.05), transparent 50%);
  background-size: 20px 20px, 100% 100%;
}

.rui-bg-dots-dense {
  background-image: radial-gradient(circle, rgba(56, 189, 248, 0.25) 1px, transparent 1px);
  background-size: 8px 8px;
}

/* FX-10305 [P0] Diagonal Lines Background - diagonal texture */
.rui-bg-diagonal-lines {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(56, 189, 248, 0.05) 10px,
    rgba(56, 189, 248, 0.05) 11px
  );
}

.rui-bg-diagonal-lines-sm {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 5px,
    rgba(56, 189, 248, 0.08) 5px,
    rgba(56, 189, 248, 0.08) 6px
  );
}

.rui-bg-diagonal-lines-lg {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 20px,
    rgba(56, 189, 248, 0.04) 20px,
    rgba(56, 189, 248, 0.04) 22px
  );
}

.rui-bg-diagonal-lines-reverse {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(56, 189, 248, 0.05) 10px,
    rgba(56, 189, 248, 0.05) 11px
  );
}

.rui-bg-diagonal-lines-double {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(56, 189, 248, 0.04) 10px,
    rgba(56, 189, 248, 0.04) 11px
  ),
  repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(20, 184, 166, 0.04) 10px,
    rgba(20, 184, 166, 0.04) 11px
  );
}

.rui-bg-diagonal-lines-animated {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(56, 189, 248, 0.08) 10px,
    rgba(56, 189, 248, 0.08) 11px
  );
  animation: rui-diagonal-move 20s linear infinite;
}

@keyframes rui-diagonal-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100px 100px;
  }
}

/* FX-10306 [P0] Hexagon Background - honeycomb pattern */
.rui-bg-hexagon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2338bdf8' fill-opacity='0.08'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.rui-bg-hexagon-sm {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='35' viewBox='0 0 20 35'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2338bdf8' fill-opacity='0.1'%3E%3Cpath d='M10 0l10 5.75v11.5L10 23l-10-5.75V5.75L10 0zM10 2.3L2.5 6.5v9L10 20l7.5-4.5v-9L10 2.3z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 20px 35px;
}

.rui-bg-hexagon-lg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2338bdf8' fill-opacity='0.06'%3E%3Cpath d='M27.99 18.5l27 15.5v31l-27 15.5L1 65v-31l27-15.5zM3 35.8v24.68l20.99 12.12 21-12.12V35.8L3 35.8zM0 31l26.99-15.58V0H2v14.42L0 16.42v14.58zM55 31l-27-15.58V0h-2v14.42L55 16.42v14.58z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 98px;
}

.rui-bg-hexagon-accent {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2314b8a6' fill-opacity='0.12'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.rui-bg-hexagon-glow {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2338bdf8' fill-opacity='0.1'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.1), transparent 60%);
  background-size: 28px 49px, 100% 100%;
}

/* FX-10307 [P0] Contour Background - map-style contours */
.rui-bg-contour {
  background-image:
    radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(56, 189, 248, 0.03) 60%, rgba(56, 189, 248, 0.08) 80%, transparent 100%),
    radial-gradient(ellipse at 30% 20%, transparent 20%, rgba(56, 189, 248, 0.04) 40%, rgba(56, 189, 248, 0.07) 60%, transparent 80%),
    radial-gradient(ellipse at 70% 80%, transparent 25%, rgba(20, 184, 166, 0.04) 45%, rgba(20, 184, 166, 0.07) 65%, transparent 85%);
  background-size: 100% 100%;
}

.rui-bg-contour-sm {
  background-image:
    radial-gradient(ellipse at 50% 50%, transparent 20%, rgba(56, 189, 248, 0.05) 50%, transparent 80%),
    radial-gradient(ellipse at 30% 30%, transparent 15%, rgba(56, 189, 248, 0.06) 35%, transparent 55%);
  background-size: 150% 150%;
}

.rui-bg-contour-animated {
  background-image:
    radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(56, 189, 248, 0.03) 60%, rgba(56, 189, 248, 0.08) 80%, transparent 100%);
  background-size: 200% 200%;
  animation: rui-contour-flow 15s ease-in-out infinite;
}

@keyframes rui-contour-flow {
  0%, 100% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 50% 50%;
  }
}

.rui-bg-contour-multilayer {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 50%, transparent 0%, rgba(56, 189, 248, 0.02) 40%, rgba(56, 189, 248, 0.06) 70%, transparent 100%),
    radial-gradient(ellipse 60% 40% at 30% 30%, transparent 0%, rgba(20, 184, 166, 0.03) 40%, rgba(20, 184, 166, 0.06) 60%, transparent 80%),
    radial-gradient(ellipse 70% 45% at 70% 70%, transparent 0%, rgba(168, 85, 247, 0.03) 40%, rgba(168, 85, 247, 0.06) 60%, transparent 80%),
    radial-gradient(ellipse 50% 30% at 80% 20%, transparent 0%, rgba(236, 72, 153, 0.02) 40%, rgba(236, 72, 153, 0.05) 60%, transparent 80%);
  background-size: 100% 100%;
}

/* ========================================
   Mix Blend Mode Effects (FX-10401~10500)
   ======================================== */

/* FX-10401 [P0] Overlay Blend */
.rui-blend-overlay {
  mix-blend-mode: overlay;
}

.rui-blend-overlay-light {
  mix-blend-mode: overlay;
  background: rgba(255, 255, 255, 0.3);
}

.rui-blend-overlay-dark {
  mix-blend-mode: overlay;
  background: rgba(0, 0, 0, 0.3);
}

.rui-blend-overlay-accent {
  mix-blend-mode: overlay;
  background: rgba(56, 189, 248, 0.3);
}

.rui-blend-overlay-hover:hover {
  mix-blend-mode: overlay;
}

/* FX-10402 [P0] Color Dodge Blend */
.rui-blend-color-dodge {
  mix-blend-mode: color-dodge;
}

.rui-blend-color-dodge-light {
  mix-blend-mode: color-dodge;
  background: rgba(255, 255, 255, 0.2);
}

.rui-blend-color-dodge-accent {
  mix-blend-mode: color-dodge;
  background: rgba(56, 189, 248, 0.25);
}

.rui-blend-color-dodge-hover:hover {
  mix-blend-mode: color-dodge;
}

/* FX-10403 [P0] Color Burn Blend */
.rui-blend-color-burn {
  mix-blend-mode: color-burn;
}

.rui-blend-color-burn-light {
  mix-blend-mode: color-burn;
  background: rgba(255, 255, 255, 0.2);
}

.rui-blend-color-burn-dark {
  mix-blend-mode: color-burn;
  background: rgba(0, 0, 0, 0.2);
}

.rui-blend-color-burn-accent {
  mix-blend-mode: color-burn;
  background: rgba(56, 189, 248, 0.25);
}

.rui-blend-color-burn-hover:hover {
  mix-blend-mode: color-burn;
}

/* FX-10404 [P0] Darken/Lighten Blend */
.rui-blend-darken {
  mix-blend-mode: darken;
}

.rui-blend-darken-bg {
  mix-blend-mode: darken;
  background: rgba(0, 0, 0, 0.3);
}

.rui-blend-darken-accent {
  mix-blend-mode: darken;
  background: rgba(56, 189, 248, 0.3);
}

.rui-blend-darken-hover:hover {
  mix-blend-mode: darken;
}

.rui-blend-lighten {
  mix-blend-mode: lighten;
}

.rui-blend-lighten-bg {
  mix-blend-mode: lighten;
  background: rgba(255, 255, 255, 0.3);
}

.rui-blend-lighten-accent {
  mix-blend-mode: lighten;
  background: rgba(56, 189, 248, 0.3);
}

.rui-blend-lighten-hover:hover {
  mix-blend-mode: lighten;
}

/* FX-10405 [P0] Difference Blend */
.rui-blend-difference {
  mix-blend-mode: difference;
}

.rui-blend-difference-light {
  mix-blend-mode: difference;
  background: rgba(255, 255, 255, 0.5);
}

.rui-blend-difference-dark {
  mix-blend-mode: difference;
  background: rgba(0, 0, 0, 0.5);
}

.rui-blend-difference-accent {
  mix-blend-mode: difference;
  background: rgba(56, 189, 248, 0.4);
}

.rui-blend-difference-hover:hover {
  mix-blend-mode: difference;
}

/* FX-10406 [P0] Exclusion Blend */
.rui-blend-exclusion {
  mix-blend-mode: exclusion;
}

.rui-blend-exclusion-light {
  mix-blend-mode: exclusion;
  background: rgba(255, 255, 255, 0.5);
}

.rui-blend-exclusion-dark {
  mix-blend-mode: exclusion;
  background: rgba(0, 0, 0, 0.5);
}

.rui-blend-exclusion-accent {
  mix-blend-mode: exclusion;
  background: rgba(56, 189, 248, 0.4);
}

.rui-blend-exclusion-hover:hover {
  mix-blend-mode: exclusion;
}

/* FX-10408 [P0] Screen Blend */
.rui-blend-screen {
  mix-blend-mode: screen;
}

.rui-blend-screen-light {
  mix-blend-mode: screen;
  background: rgba(255, 255, 255, 0.3);
}

.rui-blend-screen-accent {
  mix-blend-mode: screen;
  background: rgba(56, 189, 248, 0.3);
}

.rui-blend-screen-hover:hover {
  mix-blend-mode: screen;
}

.rui-blend-screen-glow {
  mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.4), transparent 70%);
}

/* FX-10409 [P0] Multiply Blend */
.rui-blend-multiply {
  mix-blend-mode: multiply;
}

.rui-blend-multiply-light {
  mix-blend-mode: multiply;
  background: rgba(255, 255, 255, 0.3);
}

.rui-blend-multiply-dark {
  mix-blend-mode: multiply;
  background: rgba(0, 0, 0, 0.3);
}

.rui-blend-multiply-accent {
  mix-blend-mode: multiply;
  background: rgba(56, 189, 248, 0.3);
}

.rui-blend-multiply-hover:hover {
  mix-blend-mode: multiply;
}

/* Combined blend mode effects */
.rui-blend-soft-light {
  mix-blend-mode: soft-light;
}

.rui-blend-hard-light {
  mix-blend-mode: hard-light;
}

.rui-blend-hue {
  mix-blend-mode: hue;
}

.rui-blend-saturation {
  mix-blend-mode: saturation;
}

.rui-blend-color {
  mix-blend-mode: color;
}

.rui-blend-luminosity {
  mix-blend-mode: luminosity;
}

/* Blend mode with isolation */
.rui-blend-isolation-isolate {
  isolation: isolate;
}

.rui-blend-isolation-auto {
  isolation: auto;
}

/* Blend mode overlay container */
.rui-blend-overlay-container {
  position: relative;
}

.rui-blend-overlay-container > *:last-child {
  position: absolute;
  inset: 0;
  mix-blend-mode: overlay;
}

.rui-blend-screen-container {
  position: relative;
}

.rui-blend-screen-container > *:last-child {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
}

.rui-blend-multiply-container {
  position: relative;
}

.rui-blend-multiply-container > *:last-child {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
}

/* Animated blend modes */
.rui-blend-animate-color-dodge {
  animation: rui-blend-color-dodge 3s ease-in-out infinite;
}

@keyframes rui-blend-color-dodge {
  0%, 100% {
    mix-blend-mode: normal;
  }
  50% {
    mix-blend-mode: color-dodge;
  }
}

.rui-blend-animate-overlay {
  animation: rui-blend-overlay 4s ease-in-out infinite;
}

@keyframes rui-blend-overlay {
  0%, 100% {
    mix-blend-mode: normal;
  }
  50% {
    mix-blend-mode: overlay;
  }
}

.rui-blend-animate-difference {
  animation: rui-blend-difference 2.5s ease-in-out infinite;
}

@keyframes rui-blend-difference {
  0%, 100% {
    mix-blend-mode: normal;
  }
  50% {
    mix-blend-mode: difference;
  }
}

/* ========================================
   Reduced Motion for Background & Blend Effects
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .rui-bg-gradient-animated,
  .rui-bg-gradient-flow,
  .rui-bg-gradient-rainbow,
  .rui-bg-gradient-pulse,
  .rui-bg-gradient-aurora,
  .rui-bg-grid-animated,
  .rui-bg-diagonal-lines-animated,
  .rui-bg-contour-animated,
  .rui-blend-animate-color-dodge,
  .rui-blend-animate-overlay,
  .rui-blend-animate-difference {
    animation: none !important;
  }

  .rui-blend-overlay-hover:hover,
  .rui-blend-color-dodge-hover:hover,
  .rui-blend-color-burn-hover:hover,
  .rui-blend-darken-hover:hover,
  .rui-blend-lighten-hover:hover,
  .rui-blend-difference-hover:hover,
  .rui-blend-exclusion-hover:hover,
  .rui-blend-screen-hover:hover,
  .rui-blend-multiply-hover:hover {
    mix-blend-mode: normal !important;
  }
}

/* ========================================
   Motion Preferences
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .rui-transition,
  .rui-transition-fast,
  .rui-transition-medium,
  .rui-transition-slow,
  .rui-transition-multiple,
  .rui-transition-multiple-staggered,
  [class*="rui-transition-"] {
    transition: none !important;
  }

  .rui-animate-fade-in,
  .rui-animate-fade-in-up,
  .rui-animate-fade-in-down,
  .rui-animate-fade-in-left,
  .rui-animate-fade-in-right,
  .rui-animate-scale-in,
  .rui-animate-scale-out,
  .rui-animate-scale-up,
  .rui-animate-pulse-scale,
  .rui-animate-slide-up,
  .rui-animate-slide-down,
  .rui-animate-slide-left,
  .rui-animate-slide-right,
  .rui-animate-float,
  .rui-animate-rotate-in,
  .rui-animate-rotate-in-cw,
  .rui-animate-spin,
  .rui-animate-spin-slow {
    animation: none !important;
  }

  .rui-page-fade-enter-active,
  .rui-page-fade-exit-active,
  .rui-page-slide-enter-active,
  .rui-page-slide-exit-active,
  .rui-page-slide-left-enter-active,
  .rui-page-slide-left-exit-active,
  .rui-page-slide-up-enter-active,
  .rui-page-slide-up-exit-active,
  .rui-page-slide-down-enter-active,
  .rui-page-slide-down-exit-active,
  .rui-page-scale-enter-active,
  .rui-page-scale-exit-active,
  .rui-page-scale-up-enter-active,
  .rui-page-scale-up-exit-active {
    transition: none !important;
  }
}

/* ========================================
   Lists & Grids FX-15801~16200
   ======================================== */

/* --- Basic List (FX-15801) --- */
.rui-list-basic {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rui-list-basic > li {
  position: relative;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--rui-border, rgba(148, 163, 184, 0.24));
  transition: background-color 200ms ease, padding-left 200ms ease;
}

.rui-list-basic > li:last-child {
  border-bottom: none;
}

.rui-list-basic > li:hover {
  background-color: rgba(56, 189, 248, 0.08);
  padding-left: 1.25rem;
}

.rui-list-basic > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 0;
  background: linear-gradient(180deg, var(--rui-accent), var(--rui-accent-2));
  border-radius: 2px;
  transition: height 200ms ease;
}

.rui-list-basic > li:hover::before {
  height: 60%;
}

/* --- Card List (FX-15802) --- */
.rui-list-card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rui-list-card > li {
  background: var(--rui-surface, rgba(14, 22, 46, 0.72));
  border: 1px solid var(--rui-border, rgba(148, 163, 184, 0.24));
  border-radius: 0.75rem;
  padding: 1rem;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}

.rui-list-card > li:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.22);
  border-color: var(--rui-accent);
}

/* --- Timeline List (FX-15803) --- */
.rui-list-timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: 2rem;
}

.rui-list-timeline::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--rui-accent), var(--rui-accent-2));
  border-radius: 1px;
}

.rui-list-timeline > li {
  position: relative;
  padding: 0.75rem 0 1rem 1.25rem;
}

.rui-list-timeline > li::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 0.9rem;
  width: 10px;
  height: 10px;
  background: var(--rui-bg-2);
  border: 2px solid var(--rui-accent);
  border-radius: 50%;
  transition: background-color 200ms ease, transform 200ms ease;
}

.rui-list-timeline > li:hover::before {
  background: var(--rui-accent);
  transform: scale(1.3);
}

.rui-list-timeline .rui-timeline-date {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  color: var(--rui-text-muted);
  margin-bottom: 0.25rem;
}

/* --- Grid Layout (FX-15804) --- */
.rui-grid {
  display: grid;
  gap: 1rem;
}

.rui-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.rui-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.rui-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.rui-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.rui-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.rui-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1024px) {
  .rui-grid-cols-6 { grid-template-columns: repeat(4, 1fr); }
  .rui-grid-cols-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .rui-grid-cols-6,
  .rui-grid-cols-5,
  .rui-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .rui-grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .rui-grid-cols-6,
  .rui-grid-cols-5,
  .rui-grid-cols-4,
  .rui-grid-cols-3,
  .rui-grid-cols-2 { grid-template-columns: 1fr; }
}

/* --- Masonry/Waterfall Layout (FX-15805) --- */
.rui-masonry {
  column-count: 4;
  column-gap: 1rem;
}

.rui-masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
}

@media (max-width: 1024px) {
  .rui-masonry { column-count: 3; }
}

@media (max-width: 768px) {
  .rui-masonry { column-count: 2; }
}

@media (max-width: 480px) {
  .rui-masonry { column-count: 1; }
}

/* --- Row-Column Layout (FX-15806) --- */
.rui-row {
  display: flex;
  flex-wrap: wrap;
  margin: -0.5rem;
}

.rui-row > * {
  flex: 1 1 100%;
  padding: 0.5rem;
}

.rui-row-cols-1 > * { flex: 0 0 100%; max-width: 100%; }
.rui-row-cols-2 > * { flex: 0 0 50%; max-width: 50%; }
.rui-row-cols-3 > * { flex: 0 0 33.333%; max-width: 33.333%; }
.rui-row-cols-4 > * { flex: 0 0 25%; max-width: 25%; }
.rui-row-cols-5 > * { flex: 0 0 20%; max-width: 20%; }
.rui-row-cols-6 > * { flex: 0 0 16.666%; max-width: 16.666%; }

@media (max-width: 768px) {
  .rui-row-cols-6 > *,
  .rui-row-cols-5 > *,
  .rui-row-cols-4 > * { flex: 0 0 50%; max-width: 50%; }
}

@media (max-width: 480px) {
  .rui-row > * { flex: 0 0 100%; max-width: 100%; }
}

/* --- Virtual List (FX-15811) --- */
.rui-virtual-list {
  position: relative;
  overflow-y: auto;
  contain: strict;
}

.rui-virtual-list-item {
  position: absolute;
  left: 0;
  right: 0;
  will-change: transform;
}

/* --- Infinite List (FX-15812) --- */
.rui-infinite-list {
  position: relative;
  overflow-y: auto;
}

.rui-infinite-list-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  color: var(--rui-text-muted);
}

.rui-infinite-list-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--rui-border);
  border-top-color: var(--rui-accent);
  border-radius: 50%;
  animation: rui-spin 0.8s linear infinite;
}

@keyframes rui-spin {
  to { transform: rotate(360deg); }
}

/* ========================================
   Card Components FX-15501~15800
   ======================================== */

/* --- Swipe Card (FX-15505) --- */
.rui-swipe-card {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}

.rui-swipe-card-content {
  transition: transform 300ms ease;
  will-change: transform;
}

.rui-swipe-card[data-swipe-direction="left"] .rui-swipe-card-content {
  transform: translateX(-30%);
}

.rui-swipe-card[data-swipe-direction="right"] .rui-swipe-card-content {
  transform: translateX(30%);
}

.rui-swipe-card-actions {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30%;
  opacity: 0;
  transition: opacity 200ms ease;
}

.rui-swipe-card[data-swipe-direction="left"] .rui-swipe-card-actions-left,
.rui-swipe-card[data-swipe-direction="right"] .rui-swipe-card-actions-right {
  opacity: 1;
}

.rui-swipe-card-actions-left {
  left: 0;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.2), transparent);
}

.rui-swipe-card-actions-right {
  right: 0;
  background: linear-gradient(-90deg, rgba(20, 184, 166, 0.2), transparent);
}

/* --- Hover Card (FX-15506) --- */
.rui-hover-card {
  position: relative;
  transition: transform 280ms ease, box-shadow 280ms ease;
  cursor: pointer;
}

.rui-hover-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(2, 6, 23, 0.28);
}

.rui-hover-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: linear-gradient(135deg, var(--rui-accent), var(--rui-accent-2));
  transition: opacity 280ms ease;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.rui-hover-card:hover::after {
  opacity: 0.08;
}

/* --- Selected Card (FX-15507) --- */
.rui-selected-card {
  position: relative;
  border: 2px solid transparent;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.rui-selected-card[data-selected="true"] {
  border-color: var(--rui-accent);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.2);
  transform: scale(1.02);
}

.rui-selected-card::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 20px;
  height: 20px;
  border: 2px solid var(--rui-border);
  border-radius: 50%;
  transition: all 200ms ease;
  z-index: 1;
}

.rui-selected-card[data-selected="true"]::before {
  background: var(--rui-accent);
  border-color: var(--rui-accent);
}

.rui-selected-card[data-selected="true"]::after {
  content: "";
  position: absolute;
  top: 0.82rem;
  right: 0.82rem;
  width: 6px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
  z-index: 2;
}

/* --- Responsive Card (FX-15509) --- */
.rui-responsive-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

@media (min-width: 640px) {
  .rui-responsive-card {
    flex-direction: row;
    align-items: flex-start;
  }

  .rui-responsive-card-image {
    flex: 0 0 40%;
    max-width: 40%;
  }

  .rui-responsive-card-content {
    flex: 1;
  }
}

@media (min-width: 1024px) {
  .rui-responsive-card {
    padding: 1.5rem;
    gap: 1.5rem;
  }

  .rui-responsive-card-image {
    flex: 0 0 35%;
    max-width: 35%;
  }
}

/* ========================================
   Button & Interaction Animations FX-11201~11500
   ======================================== */

/* --- Button Hover Animation (FX-11201) --- */
.rui-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(135deg, var(--rui-accent), var(--rui-accent-2));
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.rui-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(56, 189, 248, 0.35);
}

.rui-btn:focus-visible {
  outline: 2px solid var(--rui-accent);
  outline-offset: 2px;
}

/* Button variants */
.rui-btn-secondary {
  background: var(--rui-surface);
  border: 1px solid var(--rui-border);
  color: var(--rui-text-main);
}

.rui-btn-secondary:hover {
  background: var(--rui-bg-3);
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.25);
}

.rui-btn-ghost {
  background: transparent;
  color: var(--rui-text-main);
}

.rui-btn-ghost:hover {
  background: rgba(148, 163, 184, 0.12);
  box-shadow: none;
}

/* --- Button Click Animation (FX-11202) --- */
.rui-btn[data-animate="press"] {
  transition: transform 80ms ease;
}

.rui-btn[data-animate="press"]:active {
  transform: scale(0.96);
}

.rui-btn[data-animate="bounce"] {
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rui-btn[data-animate="bounce"]:active {
  transform: scale(0.92);
}

.rui-btn[data-animate="ripple"] {
  position: relative;
  overflow: hidden;
}

.rui-btn[data-animate="ripple"] .rui-btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: rui-btn-ripple-effect 600ms ease-out;
  pointer-events: none;
}

@keyframes rui-btn-ripple-effect {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* --- Switch Toggle Animation (FX-11206) --- */
.rui-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
}

.rui-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.rui-switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--rui-bg-3);
  border: 1px solid var(--rui-border);
  border-radius: 26px;
  transition: background-color 250ms ease, border-color 250ms ease;
}

.rui-switch-slider::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55), background-color 250ms ease;
  box-shadow: 0 2px 6px rgba(2, 6, 23, 0.25);
}

.rui-switch input:checked + .rui-switch-slider {
  background: linear-gradient(135deg, var(--rui-accent), var(--rui-accent-2));
  border-color: transparent;
}

.rui-switch input:checked + .rui-switch-slider::before {
  transform: translateX(22px);
}

.rui-switch input:focus-visible + .rui-switch-slider {
  outline: 2px solid var(--rui-accent);
  outline-offset: 2px;
}

/* Switch sizes */
.rui-switch-sm {
  width: 36px;
  height: 20px;
}

.rui-switch-sm .rui-switch-slider::before {
  height: 14px;
  width: 14px;
}

.rui-switch-sm input:checked + .rui-switch-slider::before {
  transform: translateX(16px);
}

.rui-switch-lg {
  width: 60px;
  height: 32px;
}

.rui-switch-lg .rui-switch-slider::before {
  height: 26px;
  width: 26px;
  bottom: 2px;
}

.rui-switch-lg input:checked + .rui-switch-slider::before {
  transform: translateX(28px);
}

/* --- Checkbox Animation (FX-11207) --- */
.rui-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.rui-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.rui-checkbox-box {
  position: relative;
  width: 20px;
  height: 20px;
  background: var(--rui-bg-2);
  border: 2px solid var(--rui-border);
  border-radius: 4px;
  transition: all 200ms ease;
}

.rui-checkbox:hover .rui-checkbox-box {
  border-color: var(--rui-accent);
}

.rui-checkbox input:checked + .rui-checkbox-box {
  background: linear-gradient(135deg, var(--rui-accent), var(--rui-accent-2));
  border-color: transparent;
}

.rui-checkbox-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) scale(0);
  transition: transform 150ms ease;
}

.rui-checkbox input:checked + .rui-checkbox-box::after {
  transform: rotate(45deg) scale(1);
}

.rui-checkbox input:focus-visible + .rui-checkbox-box {
  outline: 2px solid var(--rui-accent);
  outline-offset: 2px;
}

/* Checkbox animation variants */
.rui-checkbox[data-animate="bounce"] .rui-checkbox-box::after {
  animation: rui-checkbox-bounce 300ms ease;
}

@keyframes rui-checkbox-bounce {
  0% { transform: rotate(45deg) scale(0); }
  50% { transform: rotate(45deg) scale(1.2); }
  100% { transform: rotate(45deg) scale(1); }
}

.rui-checkbox[data-animate="slide"] .rui-checkbox-box::after {
  transform: rotate(45deg) translateX(-10px);
  opacity: 0;
}

.rui-checkbox[data-animate="slide"] input:checked + .rui-checkbox-box::after {
  transform: rotate(45deg) translateX(0);
  opacity: 1;
}

/* --- 3D Flip Card (FX-15501) --- */
.rui-flip-card {
  perspective: 1000px;
  width: 100%;
  height: 300px;
}

.rui-flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.rui-flip-card:hover .rui-flip-card-inner,
.rui-flip-card.flipped .rui-flip-card-inner {
  transform: rotateY(180deg);
}

.rui-flip-card-front,
.rui-flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
}

.rui-flip-card-front {
  background: var(--rui-bg-2);
  border: 1px solid var(--rui-border);
}

.rui-flip-card-back {
  background: linear-gradient(135deg, var(--rui-bg-3), var(--rui-bg-2));
  border: 1px solid var(--rui-border);
  transform: rotateY(180deg);
}

.rui-flip-card:focus-within {
  outline: 2px solid var(--rui-accent);
  outline-offset: 4px;
}

/* --- Hover Popup Card (FX-15502) --- */
.rui-popup-card {
  position: relative;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  z-index: 1;
}

.rui-popup-card:hover,
.rui-popup-card.popup {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px var(--rui-accent),
    0 0 30px rgba(56, 189, 248, 0.15);
  z-index: 10;
}

.rui-popup-card .rui-popup-content {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.rui-popup-card:hover .rui-popup-content,
.rui-popup-card.popup .rui-popup-content {
  opacity: 1;
  transform: translateY(0);
}

/* --- Accordion Card (FX-15503) --- */
.rui-accordion-card {
  background: var(--rui-bg-2);
  border: 1px solid var(--rui-border);
  border-radius: 12px;
  overflow: hidden;
}

.rui-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
  background: var(--rui-bg-1);
  border-bottom: 1px solid transparent;
  transition: background-color 0.2s ease;
}

.rui-accordion-card.open .rui-accordion-header {
  border-bottom-color: var(--rui-border);
}

.rui-accordion-header:hover {
  background: var(--rui-bg-3);
}

.rui-accordion-title {
  font-weight: 600;
  color: var(--rui-text-main);
}

.rui-accordion-icon {
  width: 24px;
  height: 24px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--rui-accent);
}

.rui-accordion-card.open .rui-accordion-icon {
  transform: rotate(180deg);
}

.rui-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.rui-accordion-card.open .rui-accordion-content {
  max-height: 500px;
}

.rui-accordion-body {
  padding: 20px;
  color: var(--rui-text-muted);
  line-height: 1.6;
}

.rui-accordion-header:focus-visible {
  outline: 2px solid var(--rui-accent);
  outline-offset: -2px;
}

/* --- Timeline Card (FX-15504) --- */
.rui-timeline-card {
  position: relative;
  padding-left: 40px;
}

.rui-timeline-card::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--rui-accent), var(--rui-accent-2));
}

.rui-timeline-dot {
  position: absolute;
  left: 6px;
  top: 20px;
  width: 20px;
  height: 20px;
  background: var(--rui-bg-2);
  border: 3px solid var(--rui-accent);
  border-radius: 50%;
  z-index: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rui-timeline-card:hover .rui-timeline-dot {
  transform: scale(1.3);
  box-shadow: 0 0 20px var(--rui-accent);
}

.rui-timeline-card-content {
  background: var(--rui-bg-2);
  border: 1px solid var(--rui-border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rui-timeline-card:hover .rui-timeline-card-content {
  transform: translateX(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.rui-timeline-date {
  font-size: 12px;
  color: var(--rui-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.rui-timeline-title {
  font-weight: 600;
  color: var(--rui-text-main);
  margin-bottom: 8px;
}

.rui-timeline-description {
  color: var(--rui-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* --- Gallery Card (FX-15505) --- */
.rui-gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 4/3;
}

.rui-gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.rui-gallery-card:hover img {
  transform: scale(1.1);
}

.rui-gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
}

.rui-gallery-card:hover .rui-gallery-overlay {
  opacity: 1;
}

.rui-gallery-title {
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.rui-gallery-card:hover .rui-gallery-title {
  transform: translateY(0);
}

.rui-gallery-description {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  margin-top: 8px;
  transform: translateY(20px);
  transition: transform 0.3s ease 0.1s;
}

.rui-gallery-card:hover .rui-gallery-description {
  transform: translateY(0);
}

/* --- Carousel Card (FX-15506) --- */
.rui-carousel-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.rui-carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.rui-carousel-item {
  flex: 0 0 100%;
  aspect-ratio: 16/9;
}

.rui-carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rui-carousel-nav {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}

.rui-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}

.rui-carousel-dot.active {
  background: #fff;
  transform: scale(1.3);
}

.rui-carousel-dot:focus-visible {
  outline: 2px solid var(--rui-accent);
  outline-offset: 2px;
}

.rui-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease, background-color 0.2s ease;
  z-index: 2;
}

.rui-carousel-card:hover .rui-carousel-btn {
  opacity: 1;
}

.rui-carousel-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.rui-carousel-btn.prev {
  left: 16px;
}

.rui-carousel-btn.next {
  right: 16px;
}

.rui-carousel-btn:focus-visible {
  outline: 2px solid var(--rui-accent);
  outline-offset: 2px;
}

/* --- Stacked Cards (FX-15507) --- */
.rui-stacked-cards {
  position: relative;
  height: 320px;
  perspective: 1500px;
}

.rui-stacked-card {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--rui-bg-2);
  border: 1px solid var(--rui-border);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  backface-visibility: hidden;
}

.rui-stacked-card:nth-child(1) {
  z-index: 3;
}

.rui-stacked-card:nth-child(2) {
  z-index: 2;
  transform: translateY(10px) scale(0.95);
  opacity: 0.7;
}

.rui-stacked-card:nth-child(3) {
  z-index: 1;
  transform: translateY(20px) scale(0.9);
  opacity: 0.4;
}

.rui-stacked-cards:hover .rui-stacked-card:nth-child(1) {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.rui-stacked-cards:hover .rui-stacked-card:nth-child(2) {
  transform: translateY(0) scale(1);
  opacity: 0.85;
}

.rui-stacked-cards:hover .rui-stacked-card:nth-child(3) {
  transform: translateY(10px) scale(0.95);
  opacity: 0.6;
}

/* --- Skewed Card (FX-15508) --- */
.rui-skewed-card {
  position: relative;
  background: var(--rui-bg-2);
  border: 1px solid var(--rui-border);
  border-radius: 12px;
  padding: 32px;
  transform: skewX(-3deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rui-skewed-card:hover {
  transform: skewX(-3deg) translateY(-4px);
  box-shadow: 8px 8px 30px rgba(0, 0, 0, 0.3);
}

.rui-skewed-card-content {
  transform: skewX(3deg);
}

.rui-skewed-card-title {
  font-weight: 700;
  font-size: 20px;
  color: var(--rui-text-main);
  margin-bottom: 12px;
}

.rui-skewed-card-text {
  color: var(--rui-text-muted);
  line-height: 1.6;
}

/* --- Border Flow Card (FX-15509) --- */
.rui-border-flow-card {
  position: relative;
  background: var(--rui-bg-2);
  border-radius: 16px;
  padding: 2px;
  overflow: hidden;
}

.rui-border-flow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(
    135deg,
    var(--rui-accent),
    var(--rui-accent-2),
    var(--rui-accent),
    var(--rui-accent-2)
  );
  background-size: 400% 400%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rui-border-flow 4s ease infinite;
}

@keyframes rui-border-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.rui-border-flow-card-inner {
  background: var(--rui-bg-2);
  border-radius: 14px;
  padding: 24px;
  height: 100%;
}

/* --- Glass Card (FX-15510) --- */
.rui-glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rui-glass-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left 0.5s ease;
}

.rui-glass-card:hover::before {
  left: 100%;
}

.rui-glass-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

.rui-glass-card-title {
  font-weight: 600;
  color: var(--rui-text-main);
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.rui-glass-card-text {
  color: var(--rui-text-muted);
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

/* Light mode variants for glass card */
:root[data-rui-color-mode="light"] .rui-glass-card,
html.light .rui-glass-card {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.1);
}

:root[data-rui-color-mode="light"] .rui-glass-card::before,
html.light .rui-glass-card::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.05),
    transparent
  );
}

:root[data-rui-color-mode="light"] .rui-glass-card:hover,
html.light .rui-glass-card:hover {
  border-color: rgba(0, 0, 0, 0.2);
}

/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .rui-list-basic > li,
  .rui-list-card > li,
  .rui-list-timeline > li,
  .rui-hover-card,
  .rui-selected-card,
  .rui-btn,
  .rui-switch-slider,
  .rui-checkbox-box {
    transition: none;
  }

  .rui-btn[data-animate="ripple"] .rui-btn-ripple {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rui-swipe-card-content,
  .rui-infinite-list-spinner,
  .rui-btn-ripple,
  .rui-checkbox-box::after,
  .rui-switch-slider::before {
    transition: none;
  }
}

/* Additional reduced motion for new card components */
@media (prefers-reduced-motion: reduce) {
  .rui-flip-card-inner,
  .rui-popup-card,
  .rui-popup-card .rui-popup-content,
  .rui-accordion-icon,
  .rui-accordion-content,
  .rui-timeline-dot,
  .rui-timeline-card-content,
  .rui-gallery-card img,
  .rui-gallery-overlay,
  .rui-gallery-title,
  .rui-gallery-description,
  .rui-carousel-track,
  .rui-carousel-btn,
  .rui-stacked-card,
  .rui-skewed-card,
  .rui-border-flow-card::before,
  .rui-glass-card,
  .rui-glass-card::before {
    transition: none;
    animation: none;
  }
}

/* ========================================
   FX-18001~19000: Complete Responsive System
   ======================================== */

/* FX-18002: Responsive Layout Classes */
.rui-layout-mobile {
  --rui-layout-type: mobile;
}

.rui-layout-tablet {
  --rui-layout-type: tablet;
}

.rui-layout-desktop {
  --rui-layout-type: desktop;
}

.rui-layout-wide {
  --rui-layout-type: wide;
}

/* FX-18003: Dynamic Font Scaling Base */
:root {
  --rui-font-scale: 1;
  --rui-vw: 100vw;
  --rui-vh: 100vh;
  --rui-sidebar-width: 0px;
  --rui-content-width: 100vw;
  --rui-safe-top: env(safe-area-inset-top, 0px);
  --rui-safe-right: env(safe-area-inset-right, 0px);
  --rui-safe-bottom: env(safe-area-inset-bottom, 0px);
  --rui-safe-left: env(safe-area-inset-left, 0px);
}

/* Safe area padding helpers */
.rui-safe-top { padding-top: var(--rui-safe-top); }
.rui-safe-right { padding-right: var(--rui-safe-right); }
.rui-safe-bottom { padding-bottom: var(--rui-safe-bottom); }
.rui-safe-left { padding-left: var(--rui-safe-left); }

.rui-safe-all {
  padding: var(--rui-safe-top) var(--rui-safe-right) var(--rui-safe-bottom) var(--rui-safe-left);
}

/* Fixed element safe area */
.rui-fixed-top {
  top: var(--rui-safe-top);
}

.rui-fixed-bottom {
  bottom: var(--rui-safe-bottom);
}

/* FX-18004: Touch Optimization */
.rui-touch-optimized {
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
}

.rui-touch-optimized * {
  -webkit-tap-highlight-color: transparent;
}

.rui-touch-active {
  opacity: 0.7;
  transform: scale(0.98);
  transition: transform 0.1s ease, opacity 0.1s ease;
}

/* Touch-friendly button sizing */
@media (hover: none) and (pointer: coarse) {
  .rui-touch-optimized .rui-btn,
  .rui-touch-optimized button,
  .rui-touch-optimized [role="button"] {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 20px;
  }
}

/* FX-18006: Safe Area Adaptation */
@supports (padding: env(safe-area-inset-top)) {
  :root {
    --rui-safe-top: env(safe-area-inset-top);
    --rui-safe-right: env(safe-area-inset-right);
    --rui-safe-bottom: env(safe-area-inset-bottom);
    --rui-safe-left: env(safe-area-inset-left);
  }

  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* FX-18007: Orientation Adaptation */
[data-rui-orientation="landscape"] .rui-portrait-only {
  display: none !important;
}

[data-rui-orientation="portrait"] .rui-landscape-only {
  display: none !important;
}

.rui-landscape-compact .rui-3d-scene {
  height: 280px;
}

.rui-landscape-compact .rui-card {
  max-height: 60vh;
  overflow-y: auto;
}

/* FX-18008: Large Screen Adaptation */
@media (min-width: 1440px) {
  :root {
    --rui-large-screen: 1;
  }

  .rui-layout-wide main,
  .rui-layout-wide #content {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1920px) {
  :root {
    --rui-ultrawide: 1;
  }

  .rui-layout-wide main,
  .rui-layout-wide #content {
    max-width: 1600px;
  }
}

/* FX-18009: Dark Mode Toggle Button */
#rui-color-mode-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rui-border);
  background: var(--rui-surface);
  color: var(--rui-text-main);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

#rui-color-mode-toggle:hover {
  transform: scale(1.1);
  background: var(--rui-bg-3);
}

#rui-color-mode-toggle:focus-visible {
  outline: 2px solid var(--rui-accent);
  outline-offset: 2px;
}

/* FX-18101: Enhanced Mobile Gestures - Swipe Indicator */
.rui-swipe-indicator {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 80px;
  background: var(--rui-surface);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 9998;
  backdrop-filter: blur(8px);
  border: 1px solid var(--rui-border);
}

.rui-swipe-indicator.visible {
  opacity: 1;
}

.rui-swipe-indicator.rui-swipe-back {
  left: 20px;
}

.rui-swipe-indicator.rui-swipe-forward {
  right: 20px;
}

.rui-swipe-hint {
  font-size: 11px;
  color: var(--rui-text-muted);
  margin-bottom: 4px;
}

.rui-swipe-arrow {
  font-size: 20px;
  color: var(--rui-accent);
}

.rui-swipe-back .rui-swipe-arrow::before {
  content: "\2190"; /* left arrow */
}

.rui-swipe-forward .rui-swipe-arrow::before {
  content: "\2192"; /* right arrow */
}

/* FX-18201: Responsive Grid System */
.rui-responsive-grid,
[data-responsive-grid] {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid-sm,
  .rui-responsive-grid.grid-sm,
  [data-responsive-grid].grid-sm {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .grid-md,
  .rui-responsive-grid.grid-md,
  [data-responsive-grid].grid-md {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-lg,
  .rui-responsive-grid.grid-lg,
  [data-responsive-grid].grid-lg {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .grid-xl,
  .rui-responsive-grid.grid-xl,
  [data-responsive-grid].grid-xl {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1536px) {
  .grid-2xl,
  .rui-responsive-grid.grid-2xl,
  [data-responsive-grid].grid-2xl {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* FX-18401: Responsive Visibility */
.show-xs-only { display: none; }
.hide-xs-below { display: none; }

@media (max-width: 639px) {
  .show-sm-only { display: none; }
  .hide-sm-below { display: none; }
  .show-sm-above { display: none; }
}

@media (min-width: 640px) and (max-width: 767px) {
  .show-xs-only { display: none; }
  .hide-xs-above { display: none; }
  .show-md-only { display: none; }
  .hide-md-below { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .show-xs-only { display: none; }
  .hide-xs-above { display: none; }
  .show-sm-only { display: none; }
  .hide-sm-above { display: none; }
  .show-lg-only { display: none; }
  .hide-lg-below { display: none; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .show-xs-only { display: none; }
  .show-sm-only { display: none; }
  .show-md-only { display: none; }
  .hide-md-above { display: none; }
}

@media (min-width: 1280px) {
  .show-xs-only { display: none; }
  .show-sm-only { display: none; }
  .show-md-only { display: none; }
  .show-lg-only { display: none; }
  .hide-lg-above { display: none; }
}

/* FX-18010: Theme Color Adaptation - Time-based theme indicators */
[data-rui-time-theme="dawn"] {
  --rui-time-accent: #f59e0b;
  --rui-time-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

[data-rui-time-theme="day"] {
  --rui-time-accent: #3b82f6;
  --rui-time-bg: linear-gradient(135deg, #0b1020 0%, #111a33 100%);
}

[data-rui-time-theme="dusk"] {
  --rui-time-accent: #8b5cf6;
  --rui-time-bg: linear-gradient(135deg, #1f1f3a 0%, #2d1f3d 100%);
}

[data-rui-time-theme="night"] {
  --rui-time-accent: #6366f1;
  --rui-time-bg: linear-gradient(135deg, #0a0a0f 0%, #12121f 100%);
}

/* Flexbox responsive utilities */
.rui-flex-row { flex-direction: row; }
.rui-flex-col { flex-direction: column; }

@media (max-width: 767px) {
  .rui-flex-row-mobile { flex-direction: row; }
  .rui-flex-col-mobile { flex-direction: column; }
}

@media (min-width: 768px) {
  .rui-flex-row-desktop { flex-direction: row; }
  .rui-flex-col-desktop { flex-direction: column; }
}

/* Responsive spacing */
.rui-spacing-xs { padding: 8px; }
.rui-spacing-sm { padding: 12px; }
.rui-spacing-md { padding: 16px; }
.rui-spacing-lg { padding: 24px; }
.rui-spacing-xl { padding: 32px; }

@media (max-width: 767px) {
  .rui-spacing-xs { padding: 6px; }
  .rui-spacing-sm { padding: 8px; }
  .rui-spacing-md { padding: 12px; }
  .rui-spacing-lg { padding: 16px; }
  .rui-spacing-xl { padding: 20px; }
}

/* Container queries (modern browsers) */
@container (min-width: 400px) {
  .rui-cq-card {
    display: flex;
    flex-direction: row;
  }
}

/* Aspect ratio helpers */
.rui-aspect-video { aspect-ratio: 16 / 9; }
.rui-aspect-square { aspect-ratio: 1 / 1; }
.rui-aspect-portrait { aspect-ratio: 3 / 4; }
.rui-aspect-wide { aspect-ratio: 21 / 9; }

/* Clamp-based responsive sizing */
.rui-clamp-text {
  font-size: clamp(14px, 2vw, 18px);
}

.rui-clamp-title {
  font-size: clamp(20px, 4vw, 32px);
}

.rui-clamp-hero {
  font-size: clamp(32px, 6vw, 56px);
}

/* ========================================
   FX-16201~17000: Background & Texture Effects
   ======================================== */

/* Background container */
.rui-bg-effects-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.rui-bg-effects-container canvas,
.rui-bg-effects-container .rui-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 1. Animated Gradient Background */
.rui-bg-gradient {
  background: linear-gradient(
    -45deg,
    var(--rui-bg-1, #0b1020),
    var(--rui-bg-2, #111a33),
    var(--rui-bg-3, #182752),
    #1e3a5f
  );
  background-size: 400% 400%;
  animation: rui-gradient-shift 15s ease infinite;
}

@keyframes rui-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Gradient variants */
.rui-bg-gradient-ocean { background: linear-gradient(120deg, #0c1929, #134e5e, #1a1a2e); background-size: 400% 400%; animation: rui-gradient-shift 12s ease infinite; }
.rui-bg-gradient-sunset { background: linear-gradient(120deg, #1a0a2e, #4a1942, #8b2500, #ff6b35); background-size: 400% 400%; animation: rui-gradient-shift 18s ease infinite; }
.rui-bg-gradient-forest { background: linear-gradient(120deg, #0d1f0d, #1a3a1a, #2d4a2d, #3d5c3d); background-size: 400% 400%; animation: rui-gradient-shift 20s ease infinite; }
.rui-bg-gradient-neon { background: linear-gradient(120deg, #0f0c29, #302b63, #24243e, #4a00e0); background-size: 400% 400%; animation: rui-gradient-shift 10s ease infinite; }

/* 2. Grid Background */
.rui-bg-grid { background-image: linear-gradient(rgba(56, 189, 248, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, 0.08) 1px, transparent 1px); background-size: 40px 40px; background-position: center center; }
.rui-bg-grid-sm { background-size: 20px 20px; }
.rui-bg-grid-lg { background-size: 80px 80px; }
.rui-bg-grid-animated { background-image: linear-gradient(rgba(56, 189, 248, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, 0.1) 1px, transparent 1px); background-size: 40px 40px; animation: rui-grid-scroll 20s linear infinite; }
@keyframes rui-grid-scroll { 0% { background-position: 0 0; } 100% { background-position: 40px 40px; } }

/* 3. Dot Matrix Background */
.rui-bg-dots { background-image: radial-gradient(rgba(56, 189, 248, 0.25) 1px, transparent 1px); background-size: 20px 20px; }
.rui-bg-dots-sm { background-size: 10px 10px; }
.rui-bg-dots-lg { background-size: 30px 30px; }
.rui-bg-dots-animated { animation: rui-dots-pulse 4s ease-in-out infinite; }
@keyframes rui-dots-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.rui-bg-dots-colorful { background-image: radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.3) 1px, transparent 1px), radial-gradient(circle at 90% 80%, rgba(56, 189, 248, 0.3) 1px, transparent 1px), radial-gradient(circle at 50% 50%, rgba(20, 184, 166, 0.2) 1px, transparent 1px); background-size: 25px 25px; }

/* 4. Noise Texture Background */
.rui-bg-noise { position: relative; }
.rui-bg-noise::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.08; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); pointer-events: none; }
.rui-bg-noise-light::before { opacity: 0.05; }
.rui-bg-noise-heavy::before { opacity: 0.15; }
.rui-bg-noise-animated::before { animation: rui-noise-shift 0.5s steps(10) infinite; }
@keyframes rui-noise-shift { 0% { transform: translate(0, 0); } 10% { transform: translate(-5%, -5%); } 20% { transform: translate(-10%, 5%); } 30% { transform: translate(5%, -10%); } 40% { transform: translate(-5%, 15%); } 50% { transform: translate(-10%, 5%); } 60% { transform: translate(15%, 0); } 70% { transform: translate(0, 10%); } 80% { transform: translate(-15%, 0); } 90% { transform: translate(10%, 5%); } 100% { transform: translate(0, 0); } }

/* 5. Aurora Background */
.rui-bg-aurora { overflow: hidden; }
.rui-bg-aurora::before, .rui-bg-aurora::after { content: ''; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background: radial-gradient(ellipse at center, rgba(34, 211, 238, 0.15) 0%, transparent 50%); animation: rui-aurora-wave 15s ease-in-out infinite; pointer-events: none; }
.rui-bg-aurora::after { background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.12) 0%, transparent 50%); animation: rui-aurora-wave 20s ease-in-out infinite reverse; }
@keyframes rui-aurora-wave { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(10%, 10%) rotate(5deg); } 50% { transform: translate(-5%, 20%) rotate(-3deg); } 75% { transform: translate(15%, 5%) rotate(8deg); } 100% { transform: translate(0, 0) rotate(0deg); } }
.rui-bg-aurora-green { background: linear-gradient(180deg, #0a1628 0%, #0d2818 50%, #0a1628 100%); }
.rui-bg-aurora-purple { background: linear-gradient(180deg, #1a0a2e 0%, #2d1b4e 50%, #1a0a2e 100%); }
.rui-bg-aurora-blue { background: linear-gradient(180deg, #0a1a2e 0%, #0d2d4a 50%, #0a1a2e 100%); }

/* 6. Starfield Background */
.rui-bg-stars { position: relative; }
.rui-bg-stars::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.8), transparent), radial-gradient(1px 1px at 30% 40%, rgba(255, 255, 255, 0.6), transparent), radial-gradient(1.5px 1.5px at 50% 60%, rgba(255, 255, 255, 0.9), transparent), radial-gradient(1px 1px at 70% 30%, rgba(255, 255, 255, 0.5), transparent), radial-gradient(1px 1px at 90% 80%, rgba(255, 255, 255, 0.7), transparent), radial-gradient(1px 1px at 15% 70%, rgba(255, 255, 255, 0.6), transparent), radial-gradient(1px 1px at 45% 85%, rgba(255, 255, 255, 0.8), transparent), radial-gradient(1.5px 1.5px at 80% 15%, rgba(255, 255, 255, 0.5), transparent); background-size: 300px 200px; animation: rui-stars-twinkle 4s ease-in-out infinite; }
@keyframes rui-stars-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.rui-bg-stars-dense::before { background-image: radial-gradient(1px 1px at 5% 5%, rgba(255, 255, 255, 0.8), transparent), radial-gradient(1px 1px at 15% 10%, rgba(255, 255, 255, 0.6), transparent), radial-gradient(1px 1px at 25% 15%, rgba(255, 255, 255, 0.9), transparent), radial-gradient(1px 1px at 35% 20%, rgba(255, 255, 255, 0.5), transparent), radial-gradient(1px 1px at 45% 25%, rgba(255, 255, 255, 0.7), transparent), radial-gradient(1px 1px at 55% 30%, rgba(255, 255, 255, 0.8), transparent), radial-gradient(1px 1px at 65% 35%, rgba(255, 255, 255, 0.6), transparent), radial-gradient(1px 1px at 75% 40%, rgba(255, 255, 255, 0.9), transparent), radial-gradient(1px 1px at 85% 45%, rgba(255, 255, 255, 0.5), transparent), radial-gradient(1px 1px at 95% 50%, rgba(255, 255, 255, 0.7), transparent), radial-gradient(1px 1px at 10% 55%, rgba(255, 255, 255, 0.8), transparent), radial-gradient(1px 1px at 20% 60%, rgba(255, 255, 255, 0.6), transparent), radial-gradient(1px 1px at 30% 65%, rgba(255, 255, 255, 0.9), transparent), radial-gradient(1px 1px at 40% 70%, rgba(255, 255, 255, 0.5), transparent), radial-gradient(1px 1px at 50% 75%, rgba(255, 255, 255, 0.7), transparent), radial-gradient(1px 1px at 60% 80%, rgba(255, 255, 255, 0.8), transparent), radial-gradient(1px 1px at 70% 85%, rgba(255, 255, 255, 0.6), transparent), radial-gradient(1px 1px at 80% 90%, rgba(255, 255, 255, 0.9), transparent), radial-gradient(1px 1px at 90% 95%, rgba(255, 255, 255, 0.5), transparent); background-size: 120px 80px; }
.rui-bg-stars-colorful::before { background-image: radial-gradient(1px 1px at 10% 20%, rgba(255, 200, 100, 0.9), transparent), radial-gradient(1.5px 1.5px at 30% 40%, rgba(200, 220, 255, 0.8), transparent), radial-gradient(1px 1px at 50% 60%, rgba(255, 180, 220, 0.7), transparent), radial-gradient(1px 1px at 70% 30%, rgba(180, 255, 200, 0.8), transparent), radial-gradient(1.5px 1.5px at 90% 80%, rgba(220, 200, 255, 0.9), transparent); background-size: 250px 180px; }

/* 7. Geometric Pattern Background */
.rui-bg-geometric { background-image: linear-gradient(30deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px), linear-gradient(150deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px); background-size: 60px 35px; }
.rui-bg-geometric-triangles { background-image: linear-gradient(60deg, rgba(139, 92, 246, 0.05) 25%, transparent 25%), linear-gradient(-60deg, rgba(139, 92, 246, 0.05) 25%, transparent 25%), linear-gradient(60deg, rgba(139, 92, 246, 0.05) 75%, transparent 75%), linear-gradient(-60deg, rgba(139, 92, 246, 0.05) 75%, transparent 75%); background-size: 80px 140px; background-position: 0 0, 40px 0, 40px -70px, 0 70px; }
.rui-bg-geometric-hex { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2338bdf8' fill-opacity='0.05'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.rui-bg-geometric-circles { background-image: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.05) 0%, transparent 50%), radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.03) 0%, transparent 30%), radial-gradient(circle at 100% 0%, rgba(20, 184, 166, 0.03) 0%, transparent 30%), radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.03) 0%, transparent 30%), radial-gradient(circle at 0% 100%, rgba(168, 85, 247, 0.03) 0%, transparent 30%); background-size: 100% 100%; }
.rui-bg-geometric-animated { animation: rui-geometric-shift 30s linear infinite; }
@keyframes rui-geometric-shift { 0% { background-position: 0 0; } 100% { background-position: 60px 35px; } }

/* 8. Motion Blur Background */
.rui-bg-motion-blur { position: relative; }
.rui-bg-motion-blur::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.1) 0%, transparent 40%); animation: rui-motion-blur-rotate 20s linear infinite; pointer-events: none; }
@keyframes rui-motion-blur-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.rui-bg-motion-blur-fast::before { animation-duration: 10s; }
.rui-bg-motion-blur-slow::before { animation-duration: 40s; }
.rui-bg-motion-blur-streaks { overflow: hidden; }
.rui-bg-motion-blur-streaks::before { content: ''; position: absolute; top: 0; left: -100%; width: 300%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(56, 189, 248, 0.03) 25%, rgba(56, 189, 248, 0.08) 50%, rgba(56, 189, 248, 0.03) 75%, transparent 100%); animation: rui-motion-streaks 8s ease-in-out infinite; pointer-events: none; }
@keyframes rui-motion-streaks { 0% { transform: translateX(-33%); } 50% { transform: translateX(33%); } 100% { transform: translateX(-33%); } }

/* 9. Fractal Background */
.rui-bg-fractal { position: relative; }
.rui-bg-fractal::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.06) 0%, transparent 50%), radial-gradient(circle at 25% 25%, rgba(56, 189, 248, 0.04) 0%, transparent 30%), radial-gradient(circle at 75% 75%, rgba(20, 184, 166, 0.04) 0%, transparent 30%), radial-gradient(circle at 75% 25%, rgba(139, 92, 246, 0.03) 0%, transparent 20%), radial-gradient(circle at 25% 75%, rgba(56, 189, 248, 0.03) 0%, transparent 20%); animation: rui-fractal-pulse 12s ease-in-out infinite; pointer-events: none; }
@keyframes rui-fractal-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } }
.rui-bg-fractal-mandelbrot { background: radial-gradient(ellipse at center, var(--rui-bg-2, #111a33) 0%, var(--rui-bg-1, #0b1020) 100%); }
.rui-bg-fractal-sierpinski::before { background-image: linear-gradient(135deg, rgba(139, 92, 246, 0.04) 25%, transparent 25%), linear-gradient(225deg, rgba(139, 92, 246, 0.04) 25%, transparent 25%), linear-gradient(45deg, rgba(139, 92, 246, 0.04) 25%, transparent 25%), linear-gradient(315deg, rgba(139, 92, 246, 0.04) 25%, transparent 25%); background-position: 0 0, 50px 0, 50px -50px, 0 50px; background-size: 100px 100px; }

/* 10. Particle Flow Background */
.rui-bg-particles { position: relative; overflow: hidden; }
.rui-bg-particles canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.rui-bg-particles-flow { background: radial-gradient(ellipse at bottom, rgba(56, 189, 248, 0.05) 0%, transparent 70%); }

/* Background Effects Panel */
#rui-bg-effects-panel { position: fixed; bottom: 20px; right: 20px; background: rgba(15, 23, 42, 0.95); border: 1px solid rgba(56, 189, 248, 0.2); border-radius: 12px; padding: 16px; z-index: 9999; backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); font-family: "IBM Plex Sans", sans-serif; min-width: 220px; }
#rui-bg-effects-panel h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: #e2e8f0; }
#rui-bg-effects-panel .rui-bg-effect-btns { display: flex; flex-wrap: wrap; gap: 6px; }
#rui-bg-effects-panel button { background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.2); color: #94a3b8; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 11px; transition: all 0.2s ease; }
#rui-bg-effects-panel button:hover { background: rgba(56, 189, 248, 0.2); color: #e2e8f0; }
#rui-bg-effects-panel button.active { background: rgba(56, 189, 248, 0.3); border-color: rgba(56, 189, 248, 0.5); color: #38bdf8; }

/* Responsive adjustments */
@media (max-width: 768px) { #rui-bg-effects-panel { bottom: 10px; right: 10px; left: 10px; min-width: auto; } #rui-bg-effects-panel .rui-bg-effect-btns { justify-content: center; } }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .rui-bg-grid, .rui-bg-dots, .rui-bg-geometric { background-size: 40px 40px; } }
@media (prefers-reduced-motion: reduce) { .rui-bg-gradient, .rui-bg-gradient-ocean, .rui-bg-gradient-sunset, .rui-bg-gradient-forest, .rui-bg-gradient-neon, .rui-bg-grid-animated, .rui-bg-dots-animated, .rui-bg-noise-animated, .rui-bg-aurora::before, .rui-bg-aurora::after, .rui-bg-stars::before, .rui-bg-geometric-animated, .rui-bg-motion-blur::before, .rui-bg-motion-blur-streaks::before, .rui-bg-fractal::before { animation: none; } }

/* =============================================================================
   FX-19001~20000: Advanced Interactions & Experimental Effects
   ============================================================================= */

/* Utility classes */
.rui-fx-hidden { display: none !important; }

/* Master FX Panel Button */
#rui-fx-master-panel:hover { box-shadow: 0 6px 24px rgba(56, 189, 248, 0.5); }

/* FX Panel Base Styles */
.rui-fx-panel {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
  font-family: "IBM Plex Sans", "PingFang SC", sans-serif;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.rui-fx-panel h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #38bdf8;
}

.rui-fx-panel .rui-fx-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.rui-fx-panel .rui-fx-label {
  color: #94a3b8;
  font-size: 12px;
}

.rui-fx-panel .rui-fx-value {
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 500;
}

.rui-fx-panel .rui-fx-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.rui-fx-panel .rui-fx-buttons button {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #e2e8f0;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.rui-fx-panel .rui-fx-buttons button:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.25);
  border-color: rgba(56, 189, 248, 0.5);
  transform: translateY(-1px);
}

.rui-fx-panel .rui-fx-buttons button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.rui-fx-panel .rui-fx-info {
  font-size: 11px;
  color: #64748b;
  margin-top: 8px;
}

.rui-fx-panel .rui-fx-info p {
  margin: 4px 0;
}

.rui-fx-panel .rui-fx-preview {
  margin-top: 12px;
  min-height: 60px;
}

.rui-fx-panel input[type="text"] {
  width: 100%;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 12px;
  margin-bottom: 8px;
}

.rui-fx-panel input[type="text"]:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.5);
}

/* Collaboration cursor */
.rui-collab-cursor {
  position: absolute;
  pointer-events: none;
  z-index: 9999;
}

.rui-collab-cursor svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.rui-collab-name {
  position: absolute;
  top: 20px;
  left: 12px;
  background: rgba(56, 189, 248, 0.9);
  color: #0f172a;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

/* AR Effects buttons */
.rui-ar-effects,
.rui-art-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.rui-ar-effects button,
.rui-art-modes button {
  background: rgba(20, 184, 166, 0.15);
  border: 1px solid rgba(20, 184, 166, 0.3);
  color: #94a3b8;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.2s ease;
}

.rui-ar-effects button:hover,
.rui-art-modes button:hover {
  background: rgba(20, 184, 166, 0.25);
  color: #e2e8f0;
}

.rui-ar-effects button.active,
.rui-art-modes button.active {
  background: rgba(20, 184, 166, 0.3);
  border-color: rgba(20, 184, 166, 0.5);
  color: #14b8a6;
}

/* Responsive adjustments for FX panels */
@media (max-width: 768px) {
  .rui-fx-panel {
    margin: 8px;
    padding: 12px;
  }

  .rui-fx-panel .rui-fx-buttons {
    justify-content: center;
  }

  #rui-fx-container {
    right: 10px;
    left: 10px;
    width: auto;
  }
}

/* Animation for active elements */
@keyframes rui-fx-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(56, 189, 248, 0); }
}

.rui-fx-panel button:active {
  animation: rui-fx-pulse 0.3s ease;
}

/* Dark/light mode adjustments */
:root[data-rui-color-mode="light"] .rui-fx-panel,
html.light .rui-fx-panel {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(2, 132, 199, 0.2);
}

:root[data-rui-color-mode="light"] .rui-fx-panel h3,
html.light .rui-fx-panel h3 {
  color: #0284c7;
}

:root[data-rui-color-mode="light"] .rui-fx-panel .rui-fx-value,
html.light .rui-fx-panel .rui-fx-value {
  color: #0f172a;
}

:root[data-rui-color-mode="light"] .rui-fx-panel .rui-fx-buttons button,
html.light .rui-fx-panel .rui-fx-buttons button {
  background: rgba(2, 132, 199, 0.1);
  border-color: rgba(2, 132, 199, 0.3);
  color: #334155;
}

:root[data-rui-color-mode="light"] .rui-fx-panel .rui-fx-buttons button:hover:not(:disabled),
html.light .rui-fx-panel .rui-fx-buttons button:hover:not(:disabled) {
  background: rgba(2, 132, 199, 0.2);
  color: #0f172a;
}

/* ==========================================================================
   Home Minimal Mode (2026-02-22)
   ========================================================================== */
:root[data-rui-home-mode="minimal"] body::before {
  opacity: 0.035;
  animation: none;
}

:root[data-rui-home-mode="minimal"] body::after {
  opacity: 0.08;
  filter: blur(4px) saturate(0.95) brightness(0.98);
}

:root[data-rui-home-mode="minimal"] #rui-dynamic-hero.rui-home-minimal-hero {
  margin: 0 0 1.08rem;
  border: 1px solid color-mix(in oklab, var(--rui-accent) 26%, rgba(148, 163, 184, 0.42));
  border-radius: 0.92rem;
  box-shadow: 0 12px 26px rgba(2, 6, 23, 0.12);
  background:
    radial-gradient(620px 260px at 8% 0%, color-mix(in oklab, var(--rui-accent) 20%, transparent), transparent 64%),
    linear-gradient(135deg, color-mix(in oklab, var(--rui-bg-1) 90%, #0f172a 10%), color-mix(in oklab, var(--rui-bg-2) 88%, #0f172a 12%));
}

:root[data-rui-home-mode="minimal"] .rui-home-minimal-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.64rem;
  padding: 1.08rem 1.08rem 1rem;
}

:root[data-rui-home-mode="minimal"] .rui-home-minimal-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  color: color-mix(in oklab, var(--rui-text-muted) 88%, #cbd5e1 12%);
}

:root[data-rui-home-mode="minimal"] .rui-home-minimal-title {
  margin: 0;
  font-size: clamp(1.34rem, 2.6vw, 1.86rem);
  line-height: 1.24;
  color: var(--rui-text-main);
}

:root[data-rui-home-mode="minimal"] .rui-home-minimal-summary {
  margin: 0;
  max-width: 72ch;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--rui-text-muted);
}

:root[data-rui-home-mode="minimal"] .rui-home-minimal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

:root[data-rui-home-mode="minimal"] .rui-home-minimal-links a {
  border: 1px solid color-mix(in oklab, var(--rui-border) 70%, #94a3b8 30%);
  border-radius: 999px;
  padding: 0.24rem 0.66rem;
  font-size: 0.76rem;
  color: var(--rui-text-main);
  text-decoration: none;
  background: color-mix(in oklab, var(--rui-bg-2) 82%, transparent);
  transition: border-color 160ms ease, background 160ms ease;
}

:root[data-rui-home-mode="minimal"] .rui-home-minimal-links a:hover {
  border-color: color-mix(in oklab, var(--rui-accent) 44%, var(--rui-border) 56%);
  background: color-mix(in oklab, var(--rui-accent) 12%, var(--rui-bg-2) 88%);
}

:root[data-rui-home-mode="minimal"] .rui-home-kityminder-card {
  border: 1px solid color-mix(in oklab, #22d3ee 44%, var(--rui-border) 56%);
  border-radius: 0.82rem;
  padding: 0.82rem 0.86rem;
  background:
    radial-gradient(440px 160px at 112% -16%, color-mix(in oklab, #22d3ee 20%, transparent), transparent 68%),
    linear-gradient(132deg, color-mix(in oklab, #0f172a 88%, var(--rui-bg-1) 12%), color-mix(in oklab, var(--rui-bg-2) 92%, #0f172a 8%));
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.2);
}

:root[data-rui-home-mode="minimal"] .rui-home-kityminder-eyebrow {
  margin: 0;
  font-size: 0.69rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  color: color-mix(in oklab, #67e8f9 74%, var(--rui-text-muted) 26%);
}

:root[data-rui-home-mode="minimal"] .rui-home-kityminder-card h2 {
  margin: 0.3rem 0 0;
  font-size: clamp(1rem, 2.2vw, 1.24rem);
  color: color-mix(in oklab, var(--rui-text-main) 94%, #dbeafe 6%);
}

:root[data-rui-home-mode="minimal"] .rui-home-kityminder-card > p:not(.rui-home-kityminder-eyebrow) {
  margin: 0.42rem 0 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: color-mix(in oklab, var(--rui-text-muted) 88%, #bfdbfe 12%);
}

:root[data-rui-home-mode="minimal"] .rui-home-kityminder-actions {
  margin-top: 0.62rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.46rem;
}

:root[data-rui-home-mode="minimal"] .rui-home-kityminder-actions a {
  text-decoration: none;
  border-radius: 999px;
  padding: 0.3rem 0.72rem;
  font-size: 0.76rem;
  font-weight: 700;
  border: 1px solid transparent;
}

:root[data-rui-home-mode="minimal"] .rui-home-kityminder-primary {
  color: #082f49;
  background: linear-gradient(120deg, #67e8f9, #2dd4bf);
  border-color: color-mix(in oklab, #22d3ee 70%, #0f172a 30%);
}

:root[data-rui-home-mode="minimal"] .rui-home-kityminder-secondary {
  color: var(--rui-text-main);
  border-color: color-mix(in oklab, var(--rui-border) 66%, #22d3ee 34%);
  background: color-mix(in oklab, var(--rui-bg-1) 82%, transparent);
}

:root[data-rui-home-mode="minimal"] .rui-home-minimal-meta {
  font-size: 0.78rem;
  color: color-mix(in oklab, var(--rui-text-muted) 86%, #cbd5e1 14%);
}

:root[data-rui-home-mode="minimal"] .rui-home-minimal-stats {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.52rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

:root[data-rui-home-mode="minimal"] .rui-home-minimal-stats li {
  border: 1px solid color-mix(in oklab, var(--rui-border) 76%, #94a3b8 24%);
  border-radius: 0.72rem;
  padding: 0.54rem 0.6rem;
  background: color-mix(in oklab, var(--rui-bg-2) 86%, transparent);
}

:root[data-rui-home-mode="minimal"] .rui-home-minimal-stats strong {
  display: block;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  font-size: 1.02rem;
  line-height: 1.16;
  color: var(--rui-text-main);
}

:root[data-rui-home-mode="minimal"] .rui-home-minimal-stats span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--rui-text-muted);
}

:root[data-rui-home-mode="minimal"] section.mx-auto.mt-6.grid.max-w-7xl {
  grid-template-columns: minmax(0, 1fr) !important;
}

:root[data-rui-home-mode="minimal"] section.mx-auto.mt-6.grid.max-w-7xl > .complementary {
  display: none !important;
}

:root[data-rui-home-mode="minimal"] #post-list > div,
:root[data-rui-home-mode="minimal"] #post-list > div.rui-selected,
:root[data-rui-home-mode="minimal"] #post-list > div.rui-onstage {
  transform: none !important;
  box-shadow: none !important;
  border-color: color-mix(in oklab, var(--rui-border) 74%, #94a3b8 26%);
}

:root[data-rui-home-mode="minimal"] #post-list > div::before {
  display: none !important;
}

:root[data-rui-home-mode="minimal"] #post-list > div:hover {
  border-color: color-mix(in oklab, var(--rui-accent) 40%, var(--rui-border) 60%);
  background: color-mix(in oklab, var(--rui-accent) 8%, var(--rui-bg-2) 92%);
}

:root[data-rui-home-mode="minimal"] #post-list > div.rui-read-muted {
  opacity: 0.72;
  filter: saturate(0.9);
}

:root[data-rui-home-mode="minimal"] #rui-year-rail,
:root[data-rui-home-mode="minimal"] #rui-timeline-search,
:root[data-rui-home-mode="minimal"] #rui-timeline-advanced,
:root[data-rui-home-mode="minimal"] #rui-timeline-empty,
:root[data-rui-home-mode="minimal"] #rui-month-heatmap,
:root[data-rui-home-mode="minimal"] #rui-timeline-hover-preview,
:root[data-rui-home-mode="minimal"] #rui-timeline-side-preview,
:root[data-rui-home-mode="minimal"] #rui-qa-fab,
:root[data-rui-home-mode="minimal"] #rui-qa-panel,
:root[data-rui-home-mode="minimal"] #rui-feedback-fab,
:root[data-rui-home-mode="minimal"] #rui-feedback-panel,
:root[data-rui-home-mode="minimal"] #rui-fx-master-panel,
:root[data-rui-home-mode="minimal"] #rui-fx-container,
:root[data-rui-home-mode="minimal"] #rui-textfx-toggle,
:root[data-rui-home-mode="minimal"] #rui-dark-enhancer,
:root[data-rui-home-mode="minimal"] #rui-font-profile,
:root[data-rui-home-mode="minimal"] #rui-explore-launch {
  display: none !important;
}

@media (max-width: 920px) {
  :root[data-rui-home-mode="minimal"] .rui-home-minimal-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  :root[data-rui-home-mode="minimal"] .rui-home-minimal-inner {
    padding: 0.92rem 0.88rem;
  }

  :root[data-rui-home-mode="minimal"] .rui-home-minimal-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  :root[data-rui-home-mode="minimal"] .rui-home-minimal-links a {
    text-align: center;
  }

  :root[data-rui-home-mode="minimal"] .rui-home-minimal-stats {
    grid-template-columns: 1fr;
  }

  :root[data-rui-home-mode="minimal"] .rui-home-kityminder-actions a {
    flex: 1 1 160px;
    text-align: center;
  }
}

/* ==========================================================================
   Tools Hub (2026-02-22)
   ========================================================================== */
#rui-tools-nav-item .rui-tools-nav-link,
#rui-kity-nav-item .rui-kity-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in oklab, var(--rui-border) 64%, #22d3ee 36%);
  border-radius: 999px;
  padding: 0.18rem 0.72rem;
  color: color-mix(in oklab, var(--rui-text-main) 92%, #f8fafc 8%) !important;
  background: color-mix(in oklab, var(--rui-bg-2) 82%, transparent);
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
}

#rui-kity-nav-item .rui-kity-nav-link {
  border-color: color-mix(in oklab, #14b8a6 48%, var(--rui-border) 52%);
  background: color-mix(in oklab, #14b8a6 12%, var(--rui-bg-2) 88%);
}

#rui-tools-nav-item .rui-tools-nav-link:hover,
#rui-tools-nav-item .rui-tools-nav-link.is-active,
#rui-kity-nav-item .rui-kity-nav-link:hover,
#rui-kity-nav-item .rui-kity-nav-link.is-active {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, #22d3ee 64%, var(--rui-border) 36%);
  background: color-mix(in oklab, #22d3ee 20%, var(--rui-bg-2) 80%);
  box-shadow: 0 7px 18px rgba(6, 182, 212, 0.24);
}

#rui-tools-nav-mobile .rui-tools-nav-mobile-link.is-active,
#rui-kity-nav-mobile .rui-kity-nav-mobile-link.is-active {
  color: color-mix(in oklab, var(--rui-accent) 72%, #38bdf8 28%);
  font-weight: 700;
}

#rui-tools-hub {
  margin: 1.04rem 0 1.34rem;
  border: 1px solid color-mix(in oklab, var(--rui-border) 70%, #0ea5e9 30%);
  border-radius: 1rem;
  background:
    radial-gradient(580px 260px at 112% -8%, color-mix(in oklab, #22d3ee 18%, transparent), transparent 72%),
    linear-gradient(148deg, color-mix(in oklab, var(--rui-bg-1) 90%, #020617 10%), color-mix(in oklab, var(--rui-bg-2) 88%, #0f172a 12%));
  box-shadow: 0 16px 36px rgba(2, 6, 23, 0.2);
  overflow: hidden;
}

#rui-tools-hub .rui-tools-head {
  padding: 1rem 1rem 0.74rem;
}

#rui-tools-hub .rui-tools-eyebrow {
  margin: 0 0 0.32rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  color: color-mix(in oklab, var(--rui-text-muted) 86%, #cbd5e1 14%);
}

#rui-tools-hub h2 {
  margin: 0;
  font-size: clamp(1.14rem, 2.3vw, 1.52rem);
  color: var(--rui-text-main);
}

#rui-tools-hub .rui-tools-head > p:last-child {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  color: var(--rui-text-muted);
}

#rui-tools-hub .rui-tools-shell {
  display: grid;
  grid-template-columns: clamp(200px, 34%, 250px) minmax(0, 1fr);
  gap: 0.88rem;
  padding: 0 1rem 1rem;
  align-items: start;
}

#rui-tools-hub .rui-tools-directory {
  border: 1px solid color-mix(in oklab, var(--rui-border) 72%, #22d3ee 28%);
  border-radius: 0.82rem;
  background: color-mix(in oklab, var(--rui-bg-2) 86%, transparent);
  padding: 0.72rem;
  display: grid;
  gap: 0.62rem;
  align-content: start;
  min-width: 0;
}

#rui-tools-hub .rui-tools-search {
  display: grid;
  gap: 0.26rem;
}

#rui-tools-hub .rui-tools-search span {
  font-size: 0.76rem;
  color: var(--rui-text-muted);
}

#rui-tools-hub .rui-tools-search input {
  width: 100%;
  border: 1px solid color-mix(in oklab, var(--rui-border) 68%, #22d3ee 32%);
  border-radius: 0.58rem;
  background: color-mix(in oklab, var(--rui-bg-1) 86%, #0f172a 14%);
  color: var(--rui-text-main);
  padding: 0.46rem 0.56rem;
  font-size: 0.84rem;
}

#rui-tools-hub .rui-tools-category {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-height: 104px;
  overflow: auto;
  padding-right: 0.14rem;
}

#rui-tools-hub .rui-tools-category button {
  border: 1px solid color-mix(in oklab, var(--rui-border) 72%, #38bdf8 28%);
  border-radius: 999px;
  background: color-mix(in oklab, var(--rui-bg-1) 82%, transparent);
  color: var(--rui-text-main);
  padding: 0.24rem 0.62rem;
  font-size: 0.74rem;
  cursor: pointer;
}

#rui-tools-hub .rui-tools-category button[aria-selected="true"] {
  border-color: color-mix(in oklab, #22d3ee 70%, var(--rui-border) 30%);
  background: color-mix(in oklab, #22d3ee 20%, var(--rui-bg-1) 80%);
}

#rui-tools-hub .rui-tools-card-grid {
  display: grid;
  gap: 0.42rem;
  max-height: 560px;
  overflow: auto;
  padding-right: 0.14rem;
}

#rui-tools-hub .rui-tool-card {
  border: 1px solid color-mix(in oklab, var(--rui-border) 72%, #38bdf8 28%);
  border-radius: 0.62rem;
  background: color-mix(in oklab, var(--rui-bg-1) 86%, transparent);
  color: var(--rui-text-main);
  text-align: left;
  padding: 0.52rem 0.58rem;
  cursor: pointer;
  display: grid;
  gap: 0.2rem;
  transition: transform 130ms ease, border-color 130ms ease, background 130ms ease;
}

#rui-tools-hub .rui-tool-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, #22d3ee 62%, var(--rui-border) 38%);
}

#rui-tools-hub .rui-tool-card.active {
  border-color: color-mix(in oklab, #22d3ee 72%, #38bdf8 28%);
  background: color-mix(in oklab, #22d3ee 16%, var(--rui-bg-1) 84%);
}

#rui-tools-hub .rui-tool-card-name {
  font-size: 0.86rem;
  font-weight: 700;
}

#rui-tools-hub .rui-tool-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.36rem;
}

#rui-tools-hub .rui-tool-card-badge {
  border-radius: 999px;
  padding: 0.08rem 0.42rem;
  font-size: 0.65rem;
  font-weight: 700;
  color: color-mix(in oklab, #fef3c7 88%, #f59e0b 12%);
  background: color-mix(in oklab, #f59e0b 20%, transparent);
  border: 1px solid color-mix(in oklab, #f59e0b 62%, transparent);
  flex: 0 0 auto;
}

#rui-tools-hub .rui-tool-card-badge-built {
  color: color-mix(in oklab, #ccfbf1 88%, #2dd4bf 12%);
  background: color-mix(in oklab, #0d9488 22%, transparent);
  border-color: color-mix(in oklab, #14b8a6 64%, transparent);
}

#rui-tools-hub .rui-tool-card-desc {
  font-size: 0.74rem;
  color: var(--rui-text-muted);
}

#rui-tools-hub .rui-tools-empty {
  margin: 0;
  font-size: 0.74rem;
  color: var(--rui-text-muted);
}

#rui-tools-hub .rui-tools-workbench {
  border: 1px solid color-mix(in oklab, var(--rui-border) 72%, #0ea5e9 28%);
  border-radius: 0.82rem;
  background: color-mix(in oklab, var(--rui-bg-2) 84%, transparent);
  min-width: 0;
}

#rui-tools-hub .rui-tools-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.44rem;
  padding: 0.74rem 0.74rem 0;
}

#rui-tools-hub .rui-tools-tabs button {
  border: 1px solid color-mix(in oklab, var(--rui-border) 72%, #38bdf8 28%);
  border-radius: 999px;
  background: color-mix(in oklab, var(--rui-bg-1) 82%, transparent);
  color: var(--rui-text-main);
  padding: 0.3rem 0.66rem;
  font-size: 0.78rem;
  cursor: pointer;
}

#rui-tools-hub .rui-tools-tabs button.active {
  border-color: color-mix(in oklab, #22d3ee 72%, var(--rui-border) 28%);
  background: color-mix(in oklab, #22d3ee 18%, var(--rui-bg-1) 82%);
}

#rui-tools-hub .rui-tools-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.64rem 0.74rem 0;
}

#rui-tools-hub .rui-tools-actions button {
  border: 1px solid color-mix(in oklab, #38bdf8 34%, var(--rui-border) 66%);
  border-radius: 0.56rem;
  background: color-mix(in oklab, var(--rui-bg-1) 88%, rgba(14, 165, 233, 0.2) 12%);
  color: #e6f5ff;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.4rem 0.66rem;
  cursor: pointer;
}

#rui-tools-hub .rui-tool-ai-result {
  margin: 0.56rem 0.74rem 0;
  border: 1px solid color-mix(in oklab, #22d3ee 34%, var(--rui-border) 66%);
  border-radius: 0.62rem;
  background: color-mix(in oklab, #0f172a 86%, transparent);
  color: #d7eefb;
  padding: 0.56rem 0.64rem;
  white-space: pre-wrap;
  font-size: 0.77rem;
  line-height: 1.55;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
}

#rui-tools-hub .rui-tools-panels {
  padding: 0.74rem;
}

#rui-tools-hub .rui-tool-panel {
  display: none;
  border: 1px solid color-mix(in oklab, var(--rui-border) 74%, #38bdf8 26%);
  border-radius: 0.7rem;
  padding: 0.76rem;
  background: color-mix(in oklab, var(--rui-bg-1) 82%, transparent);
}

#rui-tools-hub .rui-tool-panel.active {
  display: block;
}

#rui-tools-hub .rui-tool-panel h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--rui-text-main);
}

#rui-tools-hub .rui-tool-panel p {
  margin: 0.35rem 0 0.72rem;
  font-size: 0.86rem;
  color: var(--rui-text-muted);
}

#rui-tools-hub .rui-tool-calc-box input,
#rui-tools-hub .rui-convert-form input,
#rui-tools-hub .rui-convert-form select,
#rui-tools-hub .rui-convert-form textarea,
#rui-tools-hub .rui-time-grid input,
#rui-tools-hub .rui-json-grid textarea {
  width: 100%;
  border: 1px solid color-mix(in oklab, var(--rui-border) 70%, #38bdf8 30%);
  border-radius: 0.58rem;
  background: color-mix(in oklab, var(--rui-bg-1) 82%, #0f172a 18%);
  color: var(--rui-text-main);
  padding: 0.48rem 0.56rem;
  font-size: 0.84rem;
}

#rui-tools-hub .rui-convert-form textarea,
#rui-tools-hub .rui-json-grid textarea {
  min-height: 132px;
  resize: none;
  overflow-y: hidden;
  line-height: 1.5;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
}

#rui-tools-hub .rui-calc-result,
#rui-tools-hub .rui-convert-result {
  margin-top: 0.5rem;
  border-radius: 0.56rem;
  padding: 0.4rem 0.56rem;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  font-size: 0.79rem;
  border: 1px solid color-mix(in oklab, var(--rui-border) 72%, #22d3ee 28%);
  background: color-mix(in oklab, #0f172a 88%, transparent);
  color: color-mix(in oklab, var(--rui-text-main) 92%, #e2e8f0 8%);
}

#rui-tools-hub .rui-tool-keypad {
  margin-top: 0.58rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
}

#rui-tools-hub .rui-tool-key {
  border: 1px solid color-mix(in oklab, var(--rui-border) 70%, #38bdf8 30%);
  border-radius: 0.54rem;
  padding: 0.46rem 0.2rem;
  background: color-mix(in oklab, var(--rui-bg-2) 82%, transparent);
  color: var(--rui-text-main);
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  cursor: pointer;
  transition: transform 120ms ease, background 140ms ease;
}

#rui-tools-hub .rui-tool-key:hover {
  transform: translateY(-1px);
  background: color-mix(in oklab, #22d3ee 16%, var(--rui-bg-2) 84%);
}

#rui-tools-hub .rui-tool-key-op {
  border-color: color-mix(in oklab, #f97316 56%, var(--rui-border) 44%);
}

#rui-tools-hub .rui-tool-key-equals {
  grid-column: span 2;
  border-color: color-mix(in oklab, #14b8a6 62%, var(--rui-border) 38%);
  background: color-mix(in oklab, #14b8a6 24%, var(--rui-bg-2) 76%);
}

#rui-tools-hub .rui-convert-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem;
}

#rui-tools-hub .rui-convert-form label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.76rem;
  color: var(--rui-text-muted);
}

#rui-tools-hub .rui-convert-form button {
  border: 1px solid color-mix(in oklab, var(--rui-border) 68%, #14b8a6 32%);
  border-radius: 0.56rem;
  background: color-mix(in oklab, #14b8a6 17%, var(--rui-bg-2) 83%);
  color: var(--rui-text-main);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.42rem 0.68rem;
  cursor: pointer;
}

#rui-tools-hub .rui-tool-checkline {
  display: flex !important;
  align-items: center;
  gap: 0.44rem;
}

#rui-tools-hub .rui-tool-checkline input[type="checkbox"] {
  width: auto;
  margin: 0;
}

#rui-tools-hub .rui-convert-form .rui-convert-result {
  grid-column: 1 / -1;
}

#rui-tools-hub .rui-time-grid {
  display: grid;
  gap: 0.62rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#rui-tools-hub .rui-time-card {
  border: 1px solid color-mix(in oklab, var(--rui-border) 72%, #38bdf8 28%);
  border-radius: 0.66rem;
  padding: 0.58rem;
  background: color-mix(in oklab, var(--rui-bg-2) 84%, transparent);
}

#rui-tools-hub .rui-time-card label {
  display: block;
  margin-bottom: 0.36rem;
  font-size: 0.76rem;
  color: var(--rui-text-muted);
}

#rui-tools-hub .rui-tool-inline {
  display: flex;
  gap: 0.42rem;
  flex-wrap: wrap;
}

#rui-tools-hub .rui-tool-inline input {
  flex: 1 1 220px;
  min-width: 0;
}

#rui-tools-hub .rui-tool-inline button {
  flex: 0 0 auto;
}

#rui-tools-hub .rui-tool-inline button,
#rui-tools-hub .rui-json-actions button {
  border: 1px solid color-mix(in oklab, var(--rui-border) 68%, #14b8a6 32%);
  border-radius: 0.56rem;
  background: color-mix(in oklab, #14b8a6 17%, var(--rui-bg-2) 83%);
  color: var(--rui-text-main);
  font-size: 0.77rem;
  font-weight: 600;
  padding: 0.4rem 0.66rem;
  cursor: pointer;
  white-space: nowrap;
}

#rui-tools-hub .rui-time-card pre {
  margin: 0.54rem 0 0;
  padding: 0.48rem 0.56rem;
  border-radius: 0.56rem;
  border: 1px solid color-mix(in oklab, var(--rui-border) 72%, #14b8a6 28%);
  background: color-mix(in oklab, #0f172a 88%, transparent);
  color: color-mix(in oklab, var(--rui-text-main) 94%, #e2e8f0 6%);
  font-size: 0.74rem;
  line-height: 1.45;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  white-space: pre-wrap;
}

#rui-tools-hub .rui-json-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem;
}

#rui-tools-hub .rui-json-grid textarea {
  min-height: 132px;
  max-height: 520px;
}

#rui-tools-hub .rui-json-actions {
  margin-top: 0.62rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.52rem;
}

#rui-tools-hub .rui-kityminder-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  gap: 0.74rem;
  align-items: start;
}

#rui-tools-hub .rui-kityminder-stage-wrap {
  border: 1px solid color-mix(in oklab, var(--rui-border) 68%, #22d3ee 32%);
  border-radius: 0.66rem;
  background: color-mix(in oklab, var(--rui-bg-2) 84%, transparent);
  overflow: hidden;
}

#rui-tools-hub .rui-kityminder-stage {
  width: 100%;
  height: clamp(340px, 58vh, 580px);
  position: relative;
}

#rui-tools-hub .rui-kityminder-placeholder {
  margin: 0;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0.9rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--rui-text-muted);
}

#rui-tools-hub .rui-kityminder-side {
  display: grid;
  gap: 0.56rem;
}

#rui-tools-hub .rui-kityminder-label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.76rem;
  color: var(--rui-text-muted);
}

#rui-tools-hub #rui-kityminder-json {
  min-height: 180px;
  max-height: 480px;
}

@media (max-width: 980px) {
  #rui-tools-hub .rui-tools-shell {
    grid-template-columns: 1fr;
  }

  #rui-tools-hub .rui-convert-form,
  #rui-tools-hub .rui-time-grid,
  #rui-tools-hub .rui-json-grid,
  #rui-tools-hub .rui-kityminder-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1080px) {
  #rui-tools-hub .rui-convert-form,
  #rui-tools-hub .rui-time-grid,
  #rui-tools-hub .rui-json-grid,
  #rui-tools-hub .rui-kityminder-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  #rui-tools-nav-item .rui-tools-nav-link {
    padding: 0.14rem 0.58rem;
    font-size: 0.81rem;
  }

  #rui-tools-hub {
    margin-bottom: 0.96rem;
  }

  #rui-tools-hub .rui-tools-head,
  #rui-tools-hub .rui-tools-shell {
    padding-left: 0.74rem;
    padding-right: 0.74rem;
  }

  #rui-tools-hub .rui-tools-shell {
    padding-bottom: 0.74rem;
  }

  #rui-tools-hub .rui-tools-tabs,
  #rui-tools-hub .rui-tools-panels {
    padding-left: 0.62rem;
    padding-right: 0.62rem;
  }
}

/* Tools Hub UX refresh: cleaner AI engineering look */
#rui-tools-hub {
  position: relative;
  border-color: color-mix(in oklab, #38bdf8 32%, var(--rui-border) 68%);
  background:
    radial-gradient(720px 260px at 108% -12%, rgba(56, 189, 248, 0.2), transparent 68%),
    radial-gradient(520px 220px at -6% 112%, rgba(20, 184, 166, 0.16), transparent 70%),
    linear-gradient(136deg, color-mix(in oklab, var(--rui-bg-1) 94%, #0b1220 6%), color-mix(in oklab, var(--rui-bg-2) 94%, #101826 6%));
  box-shadow:
    0 14px 34px rgba(2, 6, 23, 0.2),
    inset 0 1px 0 rgba(148, 163, 184, 0.14);
}

#rui-tools-hub::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  opacity: 0.28;
}

#rui-tools-hub > * {
  position: relative;
  z-index: 1;
}

#rui-tools-hub .rui-tools-head {
  padding-top: 1.08rem;
}

#rui-tools-hub .rui-tools-head > p:last-child {
  font-size: 0.86rem;
  color: color-mix(in oklab, var(--rui-text-muted) 84%, #cbd5e1 16%);
}

#rui-tools-hub h2,
#rui-tools-hub .rui-tools-head > p:last-child,
#rui-tools-hub .rui-tool-card-name,
#rui-tools-hub .rui-tool-panel h3 {
  color: #e6f5ff;
}

#rui-tools-hub .rui-tool-card-desc,
#rui-tools-hub .rui-tools-search span,
#rui-tools-hub .rui-tools-empty,
#rui-tools-hub .rui-tool-panel p,
#rui-tools-hub .rui-convert-form label,
#rui-tools-hub .rui-time-card label,
#rui-tools-hub .rui-kityminder-label,
#rui-tools-hub .rui-kityminder-placeholder {
  color: #b8d2e6;
}

#rui-tools-hub .rui-tools-search input::placeholder,
#rui-tools-hub .rui-convert-form input::placeholder,
#rui-tools-hub .rui-convert-form textarea::placeholder,
#rui-tools-hub .rui-json-grid textarea::placeholder {
  color: #8aa8be;
}

#rui-tools-hub .rui-tools-category button,
#rui-tools-hub .rui-tools-tabs button,
#rui-tools-hub .rui-tool-key,
#rui-tools-hub .rui-tool-inline button,
#rui-tools-hub .rui-json-actions button,
#rui-tools-hub .rui-convert-form button {
  color: #e6f5ff;
}

#rui-tools-hub .rui-tools-directory,
#rui-tools-hub .rui-tools-workbench {
  background: color-mix(in oklab, var(--rui-bg-2) 88%, rgba(15, 23, 42, 0.42) 12%);
  border-color: color-mix(in oklab, #38bdf8 28%, var(--rui-border) 72%);
}

#rui-tools-hub .rui-tool-card {
  border-color: color-mix(in oklab, #38bdf8 28%, var(--rui-border) 72%);
  background: color-mix(in oklab, var(--rui-bg-1) 88%, rgba(15, 23, 42, 0.3) 12%);
}

#rui-tools-hub .rui-tool-card.active {
  border-color: rgba(34, 211, 238, 0.66);
  background: linear-gradient(130deg, rgba(14, 165, 233, 0.2), rgba(20, 184, 166, 0.14));
}

#rui-tools-hub .rui-tools-tabs {
  border-bottom: 1px solid color-mix(in oklab, #38bdf8 24%, var(--rui-border) 76%);
  padding-bottom: 0.64rem;
}

#rui-tools-hub .rui-tools-tabs button {
  border-color: color-mix(in oklab, #38bdf8 28%, var(--rui-border) 72%);
  background: color-mix(in oklab, var(--rui-bg-1) 90%, rgba(15, 23, 42, 0.28) 10%);
}

#rui-tools-hub .rui-tools-tabs button.active {
  border-color: rgba(34, 211, 238, 0.66);
  background: linear-gradient(128deg, rgba(14, 165, 233, 0.24), rgba(20, 184, 166, 0.18));
}

#rui-tools-hub .rui-tool-panel {
  border-color: color-mix(in oklab, #38bdf8 26%, var(--rui-border) 74%);
  background: color-mix(in oklab, var(--rui-bg-1) 90%, rgba(15, 23, 42, 0.28) 10%);
}

#rui-tools-hub .rui-tool-inline button,
#rui-tools-hub .rui-json-actions button,
#rui-tools-hub .rui-convert-form button {
  border-color: rgba(20, 184, 166, 0.4);
  background: linear-gradient(132deg, rgba(20, 184, 166, 0.2), rgba(14, 165, 233, 0.14));
}

#rui-tools-hub .rui-tool-inline button:hover,
#rui-tools-hub .rui-json-actions button:hover,
#rui-tools-hub .rui-convert-form button:hover {
  border-color: rgba(34, 211, 238, 0.64);
  transform: translateY(-1px);
}

html.dark #rui-tools-hub {
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(148, 163, 184, 0.12);
}

/* Tools Hub scrollbar + active state polish (fix white track seam) */
#rui-tools-hub .rui-tools-category,
#rui-tools-hub .rui-tools-card-grid {
  scrollbar-width: thin;
  scrollbar-color: rgba(34, 211, 238, 0.58) rgba(15, 23, 42, 0.3);
  scrollbar-gutter: stable;
}

#rui-tools-hub .rui-tools-category::-webkit-scrollbar,
#rui-tools-hub .rui-tools-card-grid::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#rui-tools-hub .rui-tools-category::-webkit-scrollbar-track,
#rui-tools-hub .rui-tools-card-grid::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.34);
  border-radius: 999px;
}

#rui-tools-hub .rui-tools-category::-webkit-scrollbar-thumb,
#rui-tools-hub .rui-tools-card-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.72), rgba(20, 184, 166, 0.72));
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.38);
}

#rui-tools-hub .rui-tool-card.active {
  box-shadow:
    inset 0 0 0 1px rgba(34, 211, 238, 0.35),
    0 10px 18px rgba(2, 6, 23, 0.24);
}

/* Standalone mode for /tools/kityminder */
#rui-tools-hub.rui-tools-kityminder-standalone .rui-tools-shell {
  grid-template-columns: 1fr;
}

html.rui-kityminder-page-fullscreen,
html.rui-kityminder-page-fullscreen body {
  width: 100%;
  min-height: 100%;
}

html.rui-kityminder-page-fullscreen body {
  overflow: hidden;
}

html.rui-kityminder-page-fullscreen #header-menu,
html.rui-kityminder-page-fullscreen footer,
html.rui-kityminder-page-fullscreen #btn-scroll-to-top,
html.rui-kityminder-page-fullscreen #rui-skip-link,
html.rui-kityminder-page-fullscreen #rui-color-mode-toggle,
html.rui-kityminder-page-fullscreen #rui-motion-toggle,
html.rui-kityminder-page-fullscreen #rui-motion-density-toggle,
html.rui-kityminder-page-fullscreen #rui-privacy-toggle,
html.rui-kityminder-page-fullscreen #rui-theme-lock,
html.rui-kityminder-page-fullscreen #rui-qa-fab,
html.rui-kityminder-page-fullscreen #rui-qa-panel,
html.rui-kityminder-page-fullscreen #rui-feedback-fab,
html.rui-kityminder-page-fullscreen #rui-feedback-panel,
html.rui-kityminder-page-fullscreen #rui-pointer-glow,
html.rui-kityminder-page-fullscreen #rui-ff-toggle,
html.rui-kityminder-page-fullscreen #rui-ff-panel,
html.rui-kityminder-page-fullscreen #rui-save-data-toggle,
html.rui-kityminder-page-fullscreen #rui-scene-toggle,
html.rui-kityminder-page-fullscreen #rui-card-density-toggle,
html.rui-kityminder-page-fullscreen #rui-comment-theme-toggle,
html.rui-kityminder-page-fullscreen #rui-labs-sandbox-toggle,
html.rui-kityminder-page-fullscreen #rui-scroll-progress,
html.rui-kityminder-page-fullscreen #rui-mouse-follower,
html.rui-kityminder-page-fullscreen #rui-delayed-follower,
html.rui-kityminder-page-fullscreen #rui-soundscape-toggle,
html.rui-kityminder-page-fullscreen #rui-bg-tune-toggle,
html.rui-kityminder-page-fullscreen #rui-bg-tune-panel,
html.rui-kityminder-page-fullscreen #rui-bg-gallery-toggle,
html.rui-kityminder-page-fullscreen #rui-bg-gallery-panel {
  display: none !important;
}

html.rui-kityminder-page-fullscreen .rui-kityminder-page-layout {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

html.rui-kityminder-page-fullscreen .rui-kityminder-page-content {
  min-width: 0;
}

html.rui-kityminder-page-fullscreen .rui-kityminder-page-sidebar,
html.rui-kityminder-page-fullscreen .rui-kityminder-page-layout > aside {
  display: none !important;
}

html.rui-kityminder-page-fullscreen .rui-kityminder-page-card {
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

html.rui-kityminder-page-fullscreen .rui-kityminder-page-meta {
  display: none !important;
}

html.rui-kityminder-page-fullscreen article.markdown-body > :not(#rui-tools-hub) {
  display: none !important;
}

html.rui-kityminder-page-fullscreen #rui-tools-hub.rui-tools-kityminder-standalone {
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  min-height: 100vh;
}

html.rui-kityminder-page-fullscreen #rui-tools-hub.rui-tools-kityminder-standalone::before {
  opacity: 0.2;
}

#rui-tools-hub.rui-tools-kityminder-standalone .rui-tools-directory,
#rui-tools-hub.rui-tools-kityminder-standalone .rui-tools-tabs,
#rui-tools-hub.rui-tools-kityminder-standalone .rui-tools-actions,
#rui-tools-hub.rui-tools-kityminder-standalone #rui-tool-ai-result,
#rui-tools-hub .rui-kityminder-standalone-nav[hidden] {
  display: none !important;
}

#rui-tools-hub .rui-kityminder-standalone-nav {
  margin: 0 0 0.72rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.52rem;
}

#rui-tools-hub .rui-kityminder-standalone-nav a,
#rui-tools-hub .rui-kityminder-standalone-nav button {
  border: 1px solid color-mix(in oklab, #38bdf8 28%, var(--rui-border) 72%);
  border-radius: 999px;
  background: color-mix(in oklab, var(--rui-bg-1) 90%, rgba(15, 23, 42, 0.28) 10%);
  color: #e6f5ff;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.34rem 0.72rem;
  text-decoration: none;
  cursor: pointer;
}

#rui-tools-hub .rui-kityminder-standalone-nav a:hover,
#rui-tools-hub .rui-kityminder-standalone-nav button:hover {
  border-color: rgba(34, 211, 238, 0.64);
  transform: translateY(-1px);
}

#rui-tools-hub.rui-tools-kityminder-standalone .rui-tools-head {
  padding-bottom: 0.62rem;
}

#rui-tools-hub.rui-tools-kityminder-standalone .rui-tools-workbench {
  border: 0;
  background: transparent;
}

#rui-tools-hub.rui-tools-kityminder-standalone .rui-tools-panels {
  padding: 0;
}

#rui-tools-hub.rui-tools-kityminder-standalone .rui-tool-panel {
  display: none;
}

#rui-tools-hub.rui-tools-kityminder-standalone .rui-tool-panel[data-rui-tool-panel="kityminder"] {
  display: block !important;
  border-color: color-mix(in oklab, #38bdf8 32%, var(--rui-border) 68%);
  padding: 0.9rem;
}

#rui-tools-hub.rui-tools-kityminder-standalone .rui-kityminder-shell {
  grid-template-columns: minmax(0, 1.82fr) minmax(300px, 1fr);
  gap: 0.84rem;
}

#rui-tools-hub.rui-tools-kityminder-standalone .rui-kityminder-stage {
  height: clamp(420px, calc(100vh - 200px), 980px);
}

@media (max-width: 1080px) {
  #rui-tools-hub.rui-tools-kityminder-standalone .rui-kityminder-shell {
    grid-template-columns: 1fr;
  }

  #rui-tools-hub.rui-tools-kityminder-standalone .rui-kityminder-stage {
    height: clamp(360px, calc(100vh - 180px), 760px);
  }
}

/* Git Daily report cards (trendforge-like layout) */
.markdown-body .git-trend-report {
  margin: 1rem 0 0.4rem;
}

.markdown-body .git-trend-intro {
  border: 1px solid color-mix(in oklab, #38bdf8 34%, var(--rui-border) 66%);
  border-radius: 0.92rem;
  background: color-mix(in oklab, #eff6ff 82%, var(--rui-bg-2) 18%);
  padding: 0.72rem 0.88rem;
  margin-bottom: 0.84rem;
}

.markdown-body .git-trend-intro h2 {
  margin-top: 0;
  margin-bottom: 0.36rem;
}

.markdown-body .git-trend-intro p {
  margin: 0.26rem 0;
  color: #1e293b;
}

.markdown-body .git-trend-meta {
  border: 1px solid color-mix(in oklab, #60a5fa 38%, var(--rui-border) 62%);
  border-left: 5px solid #3b82f6;
  border-radius: 0.92rem;
  background: color-mix(in oklab, #eff6ff 78%, var(--rui-bg-2) 22%);
  padding: 0.72rem 0.88rem;
  margin-bottom: 0.84rem;
}

.markdown-body .git-trend-meta p {
  margin: 0.24rem 0;
}

html.dark .markdown-body .git-trend-intro {
  background: color-mix(in oklab, #dbeafe 84%, #ffffff 16%);
}

.markdown-body .git-trend-quick {
  margin: 0.9rem 0 1rem;
}

.markdown-body .git-trend-quick-list {
  margin: 0.52rem 0 0;
  padding-left: 1.16rem;
}

.markdown-body .git-trend-quick-list li {
  margin: 0.22rem 0;
}

.markdown-body .git-trend-section {
  margin: 1.02rem 0;
}

.markdown-body .git-trend-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.58rem;
}

.markdown-body .git-trend-kpi-item {
  border: 1px solid color-mix(in oklab, #cbd5e1 72%, var(--rui-border) 28%);
  border-radius: 0.78rem;
  background: color-mix(in oklab, #ffffff 90%, var(--rui-bg-1) 10%);
  padding: 0.56rem 0.62rem;
  min-width: 0;
  color: #0f172a;
}

.markdown-body .git-trend-kpi-label {
  font-size: 0.73rem;
  color: #475569;
}

.markdown-body .git-trend-kpi-value {
  margin-top: 0.22rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
  word-break: break-word;
}

.markdown-body .git-trend-card-grid {
  display: grid;
  gap: 0.78rem;
}

.markdown-body .git-trend-card {
  border: 1px solid color-mix(in oklab, #cbd5e1 76%, var(--rui-border) 24%);
  border-radius: 1rem;
  padding: 0.78rem 0.86rem 0.82rem;
  background: color-mix(in oklab, #ffffff 92%, var(--rui-bg-1) 8%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  position: relative;
  overflow: hidden;
  color: #0f172a;
}

.markdown-body .git-trend-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
}

.markdown-body .git-trend-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.markdown-body .git-trend-card-head h3 {
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.24rem);
  line-height: 1.32;
  color: #0f172a;
}

.markdown-body .git-trend-lang {
  flex: 0 0 auto;
  border: 1px solid color-mix(in oklab, #86efac 58%, #22c55e 42%);
  border-radius: 999px;
  padding: 0.12rem 0.56rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: #15803d;
  background: #f0fdf4;
}

.markdown-body .git-trend-desc {
  margin: 0.58rem 0 0.62rem;
  color: #1f2937;
}

.markdown-body .git-trend-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.markdown-body .git-trend-badge {
  border: 1px solid color-mix(in oklab, #bfdbfe 72%, var(--rui-border) 28%);
  border-radius: 999px;
  padding: 0.08rem 0.52rem;
  font-size: 0.74rem;
  color: #1d4ed8;
  background: color-mix(in oklab, #eff6ff 86%, #ffffff 14%);
}

.markdown-body .git-trend-badge-score {
  border-color: color-mix(in oklab, #86efac 62%, #22c55e 38%);
  color: #166534;
  background: #f0fdf4;
}

.markdown-body .git-trend-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.44rem 0.76rem;
  margin-top: 0.62rem;
  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
  font-size: 0.79rem;
  color: #334155;
}

.markdown-body .git-trend-metrics-sub {
  margin-top: 0.36rem;
  color: #64748b;
  font-family: inherit;
}

.markdown-body .git-trend-actions {
  margin-top: 0.62rem;
}

.markdown-body .git-trend-actions p {
  margin: 0.2rem 0;
  color: #0f172a;
}

.markdown-body .git-trend-link {
  margin: 0.66rem 0 0;
}

.markdown-body .git-trend-link a {
  font-weight: 700;
}

.markdown-body .git-trend-track-list {
  margin: 0.4rem 0 0;
  padding-left: 1.14rem;
}

.markdown-body .git-trend-track-list li {
  margin: 0.24rem 0;
  color: #0f172a;
}

.markdown-body .git-trend-table-wrap {
  overflow-x: auto;
  border: 1px solid color-mix(in oklab, #cbd5e1 72%, var(--rui-border) 28%);
  border-radius: 0.78rem;
}

.markdown-body .git-trend-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}

.markdown-body .git-trend-table th,
.markdown-body .git-trend-table td {
  padding: 0.46rem 0.58rem;
  border-bottom: 1px solid color-mix(in oklab, #e2e8f0 76%, var(--rui-border) 24%);
  text-align: left;
  font-size: 0.82rem;
  color: #0f172a;
}

.markdown-body .git-trend-table th {
  font-weight: 700;
  color: color-mix(in oklab, var(--rui-text-main) 78%, #0f172a 22%);
  background: color-mix(in oklab, #f8fafc 88%, var(--rui-bg-1) 12%);
}

.markdown-body .git-trend-table tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 1080px) {
  .markdown-body .git-trend-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .markdown-body .git-trend-kpi-grid {
    grid-template-columns: 1fr;
  }

  .markdown-body .git-trend-card {
    padding: 0.68rem 0.72rem 0.74rem;
  }

  .markdown-body .git-trend-card-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Product decision (2026-03): remove inline chapter bar, keep sidebar TOC only */
#rui-narrative-scroll {
  display: none !important;
}