/*
 * DreamW Apple Design layer
 *
 * A restrained, system-wide material and motion layer. It intentionally uses
 * compositor-friendly properties (opacity/transform/filter) and keeps every
 * ambient effect removable through the reduced-motion/transparency media
 * queries below.
 */

:root {
  --dw-apple-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dw-apple-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --dw-apple-glass: color-mix(in oklch, var(--background) 72%, transparent);
  --dw-apple-glass-strong: color-mix(
    in oklch,
    var(--background) 88%,
    transparent
  );
  --dw-apple-line: color-mix(in oklch, var(--foreground) 10%, transparent);
  --dw-apple-shadow: 0 18px 45px -28px
    color-mix(in oklch, var(--foreground) 32%, transparent);
  --dw-apple-shadow-hover: 0 24px 60px -28px
    color-mix(in oklch, var(--primary) 34%, transparent);
  --dw-card-x: 50%;
  --dw-card-y: 18%;
}

.dark {
  --dw-apple-glass: color-mix(in oklch, var(--background) 78%, transparent);
  --dw-apple-glass-strong: color-mix(
    in oklch,
    var(--background) 92%,
    transparent
  );
  --dw-apple-line: color-mix(in oklch, var(--foreground) 14%, transparent);
  --dw-apple-shadow: 0 20px 52px -28px rgb(0 0 0 / 0.72);
  --dw-apple-shadow-hover: 0 28px 72px -30px
    color-mix(in oklch, var(--primary) 42%, rgb(0 0 0 / 0.65));
}

html {
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

body {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background-color: var(--background);
  background-image:
    radial-gradient(
      58rem 32rem at 50% 0%,
      color-mix(in oklch, var(--primary) 8%, transparent),
      transparent 68%
    ),
    radial-gradient(
      46rem 28rem at 100% 0%,
      color-mix(in oklch, var(--chart-3) 6%, transparent),
      transparent 72%
    );
  background-attachment: scroll;
  transition: background-color 360ms var(--dw-apple-ease-soft);
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: '';
}

/* A very quiet, slow material drift. It is deliberately below the content. */
body::before {
  background:
    radial-gradient(
      34rem 22rem at 8% 12%,
      color-mix(in oklch, var(--primary) 7%, transparent),
      transparent 72%
    ),
    radial-gradient(
      32rem 24rem at 92% 82%,
      color-mix(in oklch, var(--chart-2) 5%, transparent),
      transparent 72%
    );
  filter: blur(30px);
  opacity: 0.88;
  transform: translate3d(0, 0, 0);
  animation: none;
}

/* Public landing pages may breathe gently; authenticated workspaces stay
 * still so dashboards remain calm and inexpensive to paint. */
body::before {
  animation: dw-apple-ambient 18s ease-in-out infinite alternate;
}

/* Fine grid provides depth without adding a decorative image asset. */
body::after {
  background-image:
    linear-gradient(
      color-mix(in oklch, var(--foreground) 2.2%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in oklch, var(--foreground) 2.2%, transparent) 1px,
      transparent 1px
    );
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 74%);
  opacity: 0.34;
}

#root {
  position: relative;
  z-index: 0;
  min-height: 100svh;
}

::selection {
  color: var(--primary-foreground);
  background: color-mix(in oklch, var(--primary) 82%, transparent);
}

/* ───────────────────────────── Materials / chrome ─────────────────────── */

[data-slot='sidebar-wrapper'] > header {
  background: linear-gradient(
    to bottom,
    color-mix(in oklch, var(--background) 82%, transparent),
    color-mix(in oklch, var(--background) 58%, transparent)
  );
  border-bottom: 1px solid
    color-mix(in oklch, var(--foreground) 7%, transparent);
  box-shadow: 0 8px 24px -20px
    color-mix(in oklch, var(--foreground) 34%, transparent);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

[data-slot='sidebar-wrapper'] > header > div {
  position: relative;
}

[data-slot='sidebar-wrapper'] > header > div::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  pointer-events: none;
  content: '';
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklch, var(--primary) 42%, transparent),
    transparent
  );
  opacity: 0.45;
}

header.pointer-events-none nav {
  border-color: color-mix(
    in oklch,
    var(--foreground) 11%,
    transparent
  ) !important;
  box-shadow: 0 18px 42px -32px
    color-mix(in oklch, var(--foreground) 45%, transparent);
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
}

[data-slot='sidebar-inner'] {
  background: linear-gradient(
    160deg,
    color-mix(in oklch, var(--sidebar) 88%, transparent),
    color-mix(in oklch, var(--background) 38%, transparent)
  );
  border-color: color-mix(in oklch, var(--foreground) 9%, transparent);
  box-shadow: 12px 0 38px -34px
    color-mix(in oklch, var(--foreground) 38%, transparent);
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
}

[data-slot='sidebar-inset'] {
  background: linear-gradient(
    135deg,
    color-mix(in oklch, var(--background) 96%, transparent),
    color-mix(in oklch, var(--primary) 2%, var(--background))
  );
}

/* Keep brand and controls crisp above translucent chrome. */
[data-slot='sidebar-wrapper'] header :is(a, button),
header.pointer-events-none nav :is(a, button) {
  -webkit-tap-highlight-color: transparent;
}

/* ───────────────────────────────── Cards ───────────────────────────────── */

[data-slot='card'] {
  position: relative;
  isolation: isolate;
  border-color: color-mix(in oklch, var(--foreground) 9%, transparent);
  background: linear-gradient(
    145deg,
    color-mix(in oklch, var(--card) 96%, transparent),
    color-mix(in oklch, var(--primary) 2.5%, var(--card))
  );
  box-shadow: var(--dw-apple-shadow);
  transition:
    transform 420ms var(--dw-apple-ease),
    box-shadow 360ms var(--dw-apple-ease),
    border-color 240ms ease,
    background-color 240ms ease;
}

[data-slot='card']::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: '';
  border-radius: inherit;
  background: radial-gradient(
    24rem 18rem at var(--dw-card-x) var(--dw-card-y),
    color-mix(in oklch, var(--primary) 12%, transparent),
    transparent 72%
  );
  opacity: 0.14;
  transition: opacity 420ms var(--dw-apple-ease-soft);
}

[data-slot='card'] > * {
  position: relative;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  [data-slot='card']:hover {
    border-color: color-mix(in oklch, var(--primary) 28%, var(--border));
    box-shadow:
      var(--dw-apple-shadow-hover),
      0 0 0 1px color-mix(in oklch, var(--primary) 18%, transparent) inset;
    transform: translateY(-6px) scale(1.008);
  }

  [data-slot='card']:hover::before,
  [data-slot='card'][data-dw-pointer='true']::before {
    opacity: 1;
  }
}

/* A light-catching edge on important surfaces. */
[data-slot='card'][data-size='default']::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: '';
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    color-mix(in oklch, white 22%, transparent),
    transparent 24% 74%,
    color-mix(in oklch, var(--primary) 12%, transparent)
  );
  opacity: 0.14;
  mix-blend-mode: soft-light;
}

/* ───────────────────────────── Controls / feedback ────────────────────── */

[data-slot='button'] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 220ms var(--dw-apple-ease),
    box-shadow 220ms var(--dw-apple-ease),
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

[data-slot='button']::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: '';
  background: linear-gradient(
    112deg,
    transparent 18%,
    color-mix(in oklch, white 24%, transparent) 48%,
    transparent 72%
  );
  transform: translateX(-130%);
  transition: transform 620ms var(--dw-apple-ease);
}

[data-slot='button']:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -18px
    color-mix(in oklch, var(--primary) 72%, transparent);
}

[data-slot='button']:not(:disabled):hover::after {
  transform: translateX(130%);
}

[data-slot='button']:not(:disabled):active {
  transform: translateY(1px) scale(0.96);
  transition-duration: 90ms;
}

[data-dw-apple-pressed='true'] {
  transform: translateY(1px) scale(0.985) !important;
  transition-duration: 90ms !important;
}

[data-slot='button'] > svg {
  transition: transform 260ms var(--dw-apple-ease);
}

[data-slot='button']:not(:disabled):hover > svg {
  transform: scale(1.06);
}

[data-slot='input'],
[data-slot='textarea'],
[data-slot='select-trigger'],
select,
textarea,
input {
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 220ms var(--dw-apple-ease),
    transform 220ms var(--dw-apple-ease);
}

[data-slot='input']:focus-visible,
[data-slot='textarea']:focus-visible,
[data-slot='select-trigger']:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible {
  border-color: color-mix(in oklch, var(--primary) 62%, var(--border));
  background-color: color-mix(in oklch, var(--background) 90%, var(--primary));
  box-shadow:
    0 0 0 4px color-mix(in oklch, var(--primary) 16%, transparent),
    0 10px 28px -22px color-mix(in oklch, var(--primary) 64%, transparent);
  transform: translateY(-1px);
}

[data-slot='checkbox'],
[data-slot='switch'],
[role='checkbox'],
[role='switch'] {
  transition:
    transform 220ms var(--dw-apple-ease),
    box-shadow 220ms var(--dw-apple-ease),
    background-color 180ms ease;
}

[data-slot='checkbox']:active,
[data-slot='switch']:active,
[role='checkbox']:active,
[role='switch']:active {
  transform: scale(0.94);
}

/* Native focus ring stays visible while matching the material language. */
:where(a, button, input, textarea, select, [role='button']):focus-visible {
  outline: 2px solid color-mix(in oklch, var(--ring) 82%, transparent);
  outline-offset: 2px;
}

/* ─────────────────────────── Navigation / tables ───────────────────────── */

[data-sidebar='menu-button'],
[data-sidebar='menu-sub-button'] {
  position: relative;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 260ms var(--dw-apple-ease),
    padding 220ms var(--dw-apple-ease);
}

[data-sidebar='menu-button']::before,
[data-sidebar='menu-sub-button']::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 2px;
  width: 3px;
  pointer-events: none;
  content: '';
  border-radius: 999px;
  background: var(--sidebar-primary);
  opacity: 0;
  transform: scaleY(0.45);
  transition:
    opacity 220ms ease,
    transform 320ms var(--dw-apple-ease);
}

[data-sidebar='menu-button'][data-active='true'],
[data-sidebar='menu-sub-button'][data-active='true'] {
  background: linear-gradient(
    100deg,
    color-mix(in oklch, var(--sidebar-primary) 14%, transparent),
    transparent
  );
  box-shadow:
    inset 3px 0 0 var(--sidebar-primary),
    0 8px 24px -20px
      color-mix(in oklch, var(--sidebar-primary) 72%, transparent);
}

[data-sidebar='menu-button'][data-active='true']::before,
[data-sidebar='menu-sub-button'][data-active='true']::before {
  opacity: 1;
  transform: scaleY(1);
}

@media (hover: hover) and (pointer: fine) {
  [data-sidebar='menu-button']:not([data-active='true']):hover,
  [data-sidebar='menu-sub-button']:not([data-active='true']):hover {
    transform: translateX(2px);
  }
}

[data-slot='table'] {
  border-collapse: separate;
  border-spacing: 0 0.28rem;
}

[data-slot='table'] thead tr {
  color: color-mix(in oklch, var(--foreground) 68%, var(--muted-foreground));
}

[data-slot='table'] tbody tr {
  transition:
    background-color 180ms ease,
    transform 220ms var(--dw-apple-ease),
    box-shadow 220ms var(--dw-apple-ease);
}

[data-slot='table'] tbody tr:hover {
  background: color-mix(in oklch, var(--primary) 5%, var(--table-row));
  box-shadow: 0 10px 28px -24px
    color-mix(in oklch, var(--primary) 40%, transparent);
  transform: translateX(3px);
}

/* ─────────────────────────── Popovers / sheets ────────────────────────── */

:where(
  [data-slot='dialog-content'],
  [data-slot='sheet-content'],
  [data-slot='drawer-content'],
  [data-slot='popover-content'],
  [data-slot='dropdown-menu-content'],
  [data-slot='select-content'],
  [data-slot='command']
) {
  border-color: color-mix(in oklch, var(--foreground) 13%, transparent);
  background: var(--dw-apple-glass-strong);
  box-shadow:
    0 30px 80px -42px color-mix(in oklch, var(--foreground) 60%, transparent),
    0 0 0 1px color-mix(in oklch, white 12%, transparent) inset;
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  transform-origin: var(--transform-origin, center);
  transition:
    opacity 180ms var(--dw-apple-ease),
    filter 220ms var(--dw-apple-ease),
    box-shadow 220ms var(--dw-apple-ease);
}

:where(
  [data-slot='dialog-content'],
  [data-slot='sheet-content'],
  [data-slot='drawer-content'],
  [data-slot='popover-content'],
  [data-slot='dropdown-menu-content'],
  [data-slot='select-content'],
  [data-slot='command']
)[data-starting-style],
:where(
  [data-slot='dialog-content'],
  [data-slot='sheet-content'],
  [data-slot='drawer-content'],
  [data-slot='popover-content'],
  [data-slot='dropdown-menu-content'],
  [data-slot='select-content'],
  [data-slot='command']
)[data-ending-style],
:where(
  [data-slot='dialog-content'],
  [data-slot='sheet-content'],
  [data-slot='drawer-content'],
  [data-slot='popover-content'],
  [data-slot='dropdown-menu-content'],
  [data-slot='select-content'],
  [data-slot='command']
)[data-closed] {
  opacity: 0;
  filter: blur(6px);
}

[data-slot='tooltip-content'] {
  border-color: color-mix(in oklch, var(--foreground) 18%, transparent);
  background: color-mix(in oklch, var(--popover) 90%, transparent);
  box-shadow: 0 12px 26px -18px
    color-mix(in oklch, var(--foreground) 62%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

[data-sonner-toaster] [data-sonner-toast] {
  border-color: color-mix(in oklch, var(--foreground) 12%, transparent);
  background: var(--dw-apple-glass-strong);
  box-shadow: 0 20px 48px -30px
    color-mix(in oklch, var(--foreground) 55%, transparent);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

/* ───────────────────── More visible motion pass ──────────────────────── */

body[data-dw-apple-ready='true'] [data-slot='sidebar-inset'],
body[data-dw-apple-public='true'] #root {
  animation: dw-apple-surface-in 720ms var(--dw-apple-ease) both;
}

[data-slot='card']::after {
  background-size: 220% 100%;
  animation: dw-apple-edge-shimmer 9s ease-in-out infinite;
}

[data-slot='card'][data-dw-apple-reveal],
[data-slot='sidebar-group'][data-dw-apple-reveal],
[data-slot='section'][data-dw-apple-reveal] {
  will-change: transform, opacity, filter;
}

@keyframes dw-apple-surface-in {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes dw-apple-edge-shimmer {
  0%,
  72%,
  100% {
    background-position: 120% 0;
  }
  86% {
    background-position: -20% 0;
  }
}

/* ─────────────────────────── Entry / ambient motion ───────────────────── */

[data-dw-apple-reveal] {
  animation: dw-apple-reveal 520ms var(--dw-apple-ease) both;
}

[data-dw-apple-reveal='delayed'] {
  animation-delay: 90ms;
}

@keyframes dw-apple-reveal {
  from {
    opacity: 0;
    filter: blur(7px);
    transform: translate3d(0, 10px, 0) scale(0.988);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes dw-apple-ambient {
  0% {
    transform: translate3d(-1%, -1%, 0) scale(1);
  }
  100% {
    transform: translate3d(1%, 1%, 0) scale(1.04);
  }
}

/* Hide the pointer-responsive shine on coarse pointers; the base material
 * remains intact on phones and tablets. */
@media (pointer: coarse) {
  body {
    background-image: radial-gradient(
      44rem 28rem at 50% 0%,
      color-mix(in oklch, var(--primary) 6%, transparent),
      transparent 72%
    );
    background-attachment: scroll;
  }

  body::before,
  body::after,
  [data-slot='card']::before {
    display: none;
  }
}

@media (max-width: 767px) {
  body::before,
  body::after {
    display: none;
  }
}

/* Apple-style accessibility fallbacks: retain feedback, remove travel. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body::before,
  body::after,
  [data-slot='card']::after,
  body[data-dw-apple-ready='true'] [data-slot='sidebar-inset'],
  body[data-dw-apple-public='true'] #root,
  [data-dw-apple-reveal],
  :where(
    [data-slot='dialog-content'],
    [data-slot='sheet-content'],
    [data-slot='drawer-content'],
    [data-slot='popover-content'],
    [data-slot='dropdown-menu-content'],
    [data-slot='select-content'],
    [data-slot='command']
  ) {
    animation: none !important;
    filter: none !important;
    transition: opacity 120ms ease !important;
  }

  [data-slot='card'],
  [data-slot='button'],
  [data-sidebar='menu-button'],
  [data-sidebar='menu-sub-button'] {
    transition-duration: 120ms;
  }
}

/* ───────────────────── DreamW about page: release r7 ──────────────────── */
body[data-dw-about-page] {
  --dw-about-ink: color-mix(in oklch, var(--foreground) 94%, var(--primary));
  --dw-about-muted: color-mix(
    in oklch,
    var(--muted-foreground) 88%,
    var(--primary)
  );
  --dw-about-line: color-mix(in oklch, var(--foreground) 12%, transparent);
  --dw-about-accent: color-mix(in oklch, var(--primary) 88%, #8b5cf6 12%);
  background:
    radial-gradient(
      64rem 28rem at 8% -6%,
      color-mix(in oklch, var(--primary) 14%, transparent),
      transparent 72%
    ),
    radial-gradient(
      48rem 26rem at 100% 22%,
      color-mix(in oklch, var(--chart-2) 11%, transparent),
      transparent 73%
    ),
    var(--background);
}

body[data-dw-about-page] main.container {
  width: 100%;
  max-width: none;
  padding: 5.7rem 0 4.5rem;
}

body[data-dw-about-page] main.container > div:has(> .dw-about-content) {
  width: min(100% - 2rem, 76rem);
  max-width: none;
  margin: 0 auto;
  padding: 1.2rem 0 2.5rem;
}

.dw-about-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--dw-about-ink);
}

.dw-about-content > .dw-about-shell {
  display: grid;
  gap: 1rem;
}

.dw-about-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.66fr);
  gap: clamp(1.35rem, 4vw, 4rem);
  align-items: end;
  min-height: 19rem;
  overflow: hidden;
  padding: clamp(1.65rem, 4vw, 3.4rem);
  border: 1px solid
    color-mix(in oklch, var(--primary) 25%, var(--dw-about-line));
  border-radius: 1.7rem;
  background:
    linear-gradient(
      120deg,
      color-mix(in oklch, var(--card) 96%, var(--primary) 4%),
      color-mix(in oklch, var(--background) 87%, var(--chart-2) 13%)
    ),
    var(--card);
  box-shadow:
    0 32px 78px -52px color-mix(in oklch, var(--primary) 85%, transparent),
    0 0 0 1px color-mix(in oklch, white 18%, transparent) inset;
}

.dw-about-hero::before,
.dw-about-hero::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  content: '';
  border-radius: 999px;
}

.dw-about-hero::before {
  top: -12rem;
  right: -5rem;
  width: 27rem;
  height: 27rem;
  border: 1px solid color-mix(in oklch, var(--chart-2) 24%, transparent);
  box-shadow:
    0 0 0 3.5rem color-mix(in oklch, var(--chart-2) 3%, transparent),
    0 0 0 8rem color-mix(in oklch, var(--primary) 2%, transparent);
  animation: dw-about-orb 15s ease-in-out infinite alternate;
}

.dw-about-hero::after {
  right: 33%;
  bottom: -13rem;
  width: 20rem;
  height: 20rem;
  border: 1px solid color-mix(in oklch, var(--primary) 20%, transparent);
}

.dw-about-hero-main {
  position: relative;
  z-index: 1;
}

.dw-about-eyebrow {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  margin-bottom: 1rem;
  color: var(--dw-about-muted);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.dw-about-eyebrow span {
  padding: 0.34rem 0.48rem;
  border: 1px solid color-mix(in oklch, var(--primary) 28%, transparent);
  border-radius: 999px;
  color: var(--dw-about-accent);
  background: color-mix(in oklch, var(--primary) 8%, transparent);
}

.dw-about-eyebrow i {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 0.24rem color-mix(in oklch, #22c55e 14%, transparent);
  animation: dw-about-pulse 2.4s ease-in-out infinite;
}

.dw-about-hero h1 {
  max-width: 14em;
  margin: 0 !important;
  color: var(--dw-about-ink);
  font-size: clamp(2rem, 4.7vw, 4rem) !important;
  font-weight: 760 !important;
  letter-spacing: -0.07em;
  line-height: 1.03;
  text-wrap: balance;
}

.dw-about-hero p {
  max-width: 40rem;
  margin: 1rem 0 0 !important;
  color: var(--dw-about-muted);
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  line-height: 1.8;
}

.dw-about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.35rem;
}

.dw-about-actions a {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  min-height: 2.65rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--dw-about-line);
  border-radius: 0.8rem;
  color: var(--dw-about-ink) !important;
  background: color-mix(in oklch, var(--card) 72%, transparent);
  font-size: 0.75rem;
  font-weight: 750;
  text-decoration: none !important;
  transition:
    transform 220ms var(--dw-apple-ease),
    border-color 220ms ease,
    box-shadow 220ms ease,
    background-color 220ms ease;
}

.dw-about-actions a:first-child {
  border-color: transparent;
  color: var(--primary-foreground) !important;
  background: linear-gradient(
    110deg,
    var(--dw-about-accent),
    color-mix(in oklch, var(--primary) 66%, var(--chart-2))
  );
  box-shadow: 0 14px 28px -19px
    color-mix(in oklch, var(--primary) 90%, transparent);
}

.dw-about-actions a:hover {
  transform: translate3d(0, -3px, 0);
  border-color: color-mix(in oklch, var(--primary) 40%, var(--dw-about-line));
}
.dw-about-actions a:first-child:hover {
  box-shadow: 0 20px 36px -20px
    color-mix(in oklch, var(--primary) 90%, transparent);
}
.dw-about-actions a:first-child span {
  font-size: 1.05rem;
  transition: transform 220ms var(--dw-apple-ease);
}
.dw-about-actions a:first-child:hover span {
  transform: translateX(0.2rem);
}

.dw-about-endpoint-card {
  display: grid;
  gap: 0.75rem;
  align-self: stretch;
  min-height: 11rem;
  padding: 1.15rem;
  border: 1px solid rgb(164 181 255 / 0.17);
  border-radius: 1.1rem;
  color: #dce7ff;
  background: linear-gradient(155deg, #111b36, #0b1022 72%);
  box-shadow:
    0 28px 56px -32px rgb(10 15 42 / 0.84),
    0 0 0 1px rgb(150 170 255 / 0.1) inset;
}

.dw-about-endpoint-card > div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  color: #97a9cf;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.dw-about-endpoint-card > div b {
  display: inline-flex;
  gap: 0.38rem;
  align-items: center;
  color: #79efb5;
  font-size: 0.58rem;
}
.dw-about-endpoint-card > div b i {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 999px;
  background: #22c55e;
}
.dw-about-endpoint-card > code {
  display: block;
  overflow-wrap: anywhere;
  color: #f5f7ff;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(0.72rem, 1.3vw, 0.85rem);
  line-height: 1.5;
}
.dw-about-endpoint-card > button {
  justify-self: start;
  min-height: 2rem;
  padding: 0.4rem 0.62rem;
  border: 1px solid rgb(163 184 255 / 0.25);
  border-radius: 0.55rem;
  color: #dce8ff;
  background: rgb(108 122 255 / 0.14);
  font-size: 0.67rem;
  font-weight: 750;
}
.dw-about-endpoint-card > button:hover {
  transform: translate3d(0, -1px, 0) !important;
  background: rgb(108 122 255 / 0.26);
  filter: none !important;
}
.dw-about-endpoint-card > small {
  color: #879bc2;
  font-size: 0.62rem;
  line-height: 1.5;
}

.dw-about-layout {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.dw-about-sidebar {
  position: sticky;
  top: 5rem;
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--dw-about-line);
  border-radius: 1.15rem;
  background: color-mix(in oklch, var(--card) 72%, transparent);
  box-shadow: 0 18px 36px -36px
    color-mix(in oklch, var(--foreground) 70%, transparent);
}

.dw-about-sidebar-label {
  color: var(--dw-about-muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dw-about-sidebar nav {
  display: grid;
  gap: 0.25rem;
}
.dw-about-sidebar nav a {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.35rem;
  align-items: center;
  padding: 0.5rem 0.45rem;
  border-radius: 0.55rem;
  color: var(--dw-about-muted) !important;
  font-size: 0.68rem;
  line-height: 1.35;
  text-decoration: none !important;
  transition:
    transform 200ms var(--dw-apple-ease),
    color 180ms ease,
    background-color 180ms ease;
}
.dw-about-sidebar nav a span {
  color: color-mix(in oklch, var(--primary) 80%, var(--muted-foreground));
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.58rem;
}
.dw-about-sidebar nav a:hover {
  transform: translateX(0.18rem);
  color: var(--dw-about-ink) !important;
  background: color-mix(in oklch, var(--primary) 8%, transparent);
}
.dw-about-sidebar-help {
  display: grid;
  gap: 0.48rem;
  padding: 0.85rem;
  border: 1px solid color-mix(in oklch, var(--primary) 20%, transparent);
  border-radius: 0.85rem;
  background: linear-gradient(
    145deg,
    color-mix(in oklch, var(--primary) 10%, var(--card)),
    color-mix(in oklch, var(--chart-2) 5%, var(--card))
  );
}
.dw-about-sidebar-help span {
  color: var(--dw-about-muted);
  font-size: 0.6rem;
  font-weight: 800;
}
.dw-about-sidebar-help b {
  color: var(--dw-about-ink);
  font-size: 0.69rem;
  line-height: 1.55;
}
.dw-about-sidebar-help a {
  color: var(--dw-about-accent) !important;
  font-size: 0.64rem;
  font-weight: 750;
  text-decoration: none !important;
}

.dw-about-article {
  min-width: 0;
}
.dw-about-section {
  margin: 0 0 0.9rem;
  padding: clamp(1.15rem, 3vw, 2rem);
  border: 1px solid var(--dw-about-line);
  border-radius: 1.2rem;
  background: color-mix(in oklch, var(--card) 76%, transparent);
  box-shadow: 0 18px 38px -38px
    color-mix(in oklch, var(--foreground) 68%, transparent);
  scroll-margin-top: 5.7rem;
}
.dw-about-section::before {
  display: block;
  width: 3.4rem;
  height: 0.16rem;
  margin-bottom: 1.05rem;
  border-radius: 999px;
  content: '';
  background: linear-gradient(90deg, var(--dw-about-accent), var(--chart-2));
}
.dw-about-section h2 {
  margin: 0 0 1.1rem !important;
  color: var(--dw-about-ink);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem) !important;
  font-weight: 760 !important;
  letter-spacing: -0.04em;
}
.dw-about-section p,
.dw-about-section li {
  color: var(--dw-about-muted);
  line-height: 1.75;
}
.dw-about-section ol {
  margin-top: 0.45rem !important;
}
.dw-about-section ol li::marker {
  color: var(--dw-about-accent);
  font-weight: 800;
}
.dw-about-section table {
  width: 100% !important;
  margin: 0.4rem 0 0 !important;
  border: 1px solid var(--dw-about-line);
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: 0.9rem;
  overflow: hidden;
  background: color-mix(in oklch, var(--background) 50%, var(--card));
}
.dw-about-section table th,
.dw-about-section table td {
  padding: 0.72rem 0.82rem !important;
  border-color: var(--dw-about-line) !important;
  font-size: 0.75rem;
}
.dw-about-section table th {
  color: var(--dw-about-muted);
  background: color-mix(in oklch, var(--primary) 7%, var(--card));
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dw-about-section table td {
  color: var(--dw-about-muted);
  line-height: 1.55;
}
.dw-about-section table td:first-child {
  color: var(--dw-about-ink);
  font-weight: 730;
}
.dw-about-section table tbody tr {
  transition: background-color 180ms ease;
}
.dw-about-section table tbody tr:hover {
  background: color-mix(in oklch, var(--primary) 7%, transparent);
}
.dw-about-section a {
  color: var(--dw-about-accent) !important;
}
.dw-about-section blockquote {
  border-color: #f59e0b !important;
  border-radius: 0 0.7rem 0.7rem 0;
  color: var(--dw-about-muted);
  background: color-mix(in oklch, #f59e0b 8%, transparent) !important;
}

.dw-about-code-frame {
  overflow: hidden;
  margin: 0.8rem 0;
  border: 1px solid rgb(159 176 255 / 0.15);
  border-radius: 0.9rem;
  background: #0d1429;
  box-shadow: 0 18px 34px -30px rgb(7 12 30 / 0.78);
}
.dw-about-code-frame > div {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  min-height: 2.55rem;
  padding: 0 0.75rem;
  border-bottom: 1px solid rgb(159 176 255 / 0.12);
}
.dw-about-code-frame > div > span {
  display: inline-flex;
  gap: 0.3rem;
}
.dw-about-code-frame > div > span i {
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 999px;
  background: #fb7185;
}
.dw-about-code-frame > div > span i:nth-child(2) {
  background: #fbbf24;
}
.dw-about-code-frame > div > span i:nth-child(3) {
  background: #34d399;
}
.dw-about-code-frame > div > b {
  flex: 1;
  color: #9eafe0;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
}
.dw-about-code-frame button {
  min-height: 1.8rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgb(163 184 255 / 0.23);
  border-radius: 0.45rem;
  color: #dce8ff;
  background: rgb(108 122 255 / 0.12);
  font-size: 0.62rem;
  font-weight: 700;
}
.dw-about-code-frame button:hover {
  transform: translateY(-1px) !important;
  background: rgb(108 122 255 / 0.24);
  filter: none !important;
}
.dw-about-code-frame pre {
  margin: 0 !important;
  padding: 0.9rem 1rem !important;
  overflow-x: auto;
  border: 0 !important;
  border-radius: 0 !important;
  color: #dce7ff !important;
  background: transparent !important;
  font-size: 0.74rem;
  line-height: 1.7;
}
.dw-about-code-frame pre code {
  padding: 0 !important;
  color: inherit !important;
  background: transparent !important;
}

.dw-about-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--dw-about-line);
  border-radius: 0.95rem;
  color: var(--dw-about-muted);
  background: color-mix(in oklch, var(--card) 68%, transparent);
}
.dw-about-footer > span {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  color: var(--dw-about-ink);
  font-size: 0.72rem;
  font-weight: 750;
}
.dw-about-footer > span i {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border-radius: 0.5rem;
  color: white;
  background: linear-gradient(135deg, var(--dw-about-accent), var(--chart-2));
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
}
.dw-about-footer small {
  font-size: 0.62rem;
}
.dw-about-footer a {
  color: var(--dw-about-accent) !important;
  font-size: 0.67rem;
  font-weight: 750;
  text-decoration: none !important;
}

@keyframes dw-about-orb {
  from {
    transform: translate3d(-0.8rem, -0.3rem, 0) rotate(0deg);
  }
  to {
    transform: translate3d(0.8rem, 0.4rem, 0) rotate(14deg);
  }
}
@keyframes dw-about-pulse {
  0%,
  100% {
    transform: scale(0.86);
    opacity: 0.72;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

@media (max-width: 820px) {
  .dw-about-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .dw-about-endpoint-card {
    min-height: auto;
  }
  .dw-about-layout {
    grid-template-columns: 1fr;
  }
  .dw-about-sidebar {
    position: static;
  }
  .dw-about-sidebar nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }
  .dw-about-sidebar-help {
    display: none;
  }
}

@media (max-width: 560px) {
  body[data-dw-about-page] main.container {
    padding-top: 4.75rem;
  }
  body[data-dw-about-page] main.container > div:has(> .dw-about-content) {
    width: min(100% - 1rem, 76rem);
    padding-top: 0.5rem;
  }
  .dw-about-hero {
    padding: 1.35rem;
    border-radius: 1.25rem;
  }
  .dw-about-hero h1 {
    font-size: clamp(1.9rem, 10vw, 2.7rem) !important;
  }
  .dw-about-layout {
    gap: 0.7rem;
  }
  .dw-about-sidebar,
  .dw-about-section {
    border-radius: 1rem;
  }
  .dw-about-section {
    padding: 1rem;
  }
  .dw-about-sidebar nav {
    grid-template-columns: 1fr;
  }
  .dw-about-section table th,
  .dw-about-section table td {
    padding: 0.62rem !important;
    font-size: 0.7rem;
  }
  .dw-about-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dw-about-hero::before,
  .dw-about-eyebrow i {
    animation: none !important;
  }
  .dw-about-actions a,
  .dw-about-sidebar nav a {
    transition-duration: 120ms !important;
  }
}

/* ───────────────────── DreamW custom home: release r6 ─────────────────── */
/* The home page arrives from the admin Markdown setting.  The small DOM
 * enhancement in dreamw-apple-ui.js turns that semantic content into these
 * presentation regions without changing the API or restarting the service. */

body[data-dw-home-page] {
  --dw-home-ink: color-mix(in oklch, var(--foreground) 93%, var(--primary));
  --dw-home-muted: color-mix(
    in oklch,
    var(--muted-foreground) 88%,
    var(--primary)
  );
  --dw-home-panel: color-mix(in oklch, var(--card) 94%, var(--primary) 6%);
  --dw-home-line: color-mix(in oklch, var(--foreground) 12%, transparent);
  --dw-home-violet: color-mix(in oklch, var(--primary) 88%, #8b5cf6 12%);
  --dw-home-cyan: color-mix(in oklch, var(--chart-2) 76%, #22d3ee 24%);
  background:
    radial-gradient(
      62rem 31rem at 9% -7%,
      color-mix(in oklch, var(--primary) 18%, transparent),
      transparent 72%
    ),
    radial-gradient(
      48rem 28rem at 100% 12%,
      color-mix(in oklch, var(--chart-2) 13%, transparent),
      transparent 73%
    ),
    var(--background);
}

body[data-dw-home-page]::before {
  display: none;
}

body[data-dw-home-page] main.container {
  width: 100%;
  max-width: none;
  padding: 5.7rem 0 0;
}

body[data-dw-home-page] main.container > div:has(> .custom-home-content) {
  width: min(100% - 2rem, 74rem);
  max-width: none;
  padding: 1.25rem 0 5rem;
}

.custom-home-content.dw-home-content {
  width: 100%;
  max-width: none;
  color: var(--dw-home-ink);
}

.dw-home-content [data-dw-home-original-top='true'],
.dw-home-content .dw-home-decorative-image {
  display: none !important;
}

.dw-home-showcase {
  position: relative;
  margin: 0 0 1.15rem;
}

.dw-home-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(25rem, 0.98fr);
  gap: clamp(2.2rem, 5vw, 5.5rem);
  align-items: center;
  min-height: 31.5rem;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4.8rem);
  border: 1px solid color-mix(in oklch, var(--primary) 28%, var(--dw-home-line));
  border-radius: clamp(1.55rem, 3vw, 2.4rem);
  background:
    linear-gradient(
      125deg,
      color-mix(in oklch, var(--card) 96%, var(--primary) 4%),
      color-mix(in oklch, var(--background) 88%, var(--chart-2) 12%)
    ),
    var(--dw-home-panel);
  box-shadow:
    0 34px 90px -56px color-mix(in oklch, var(--primary) 90%, transparent),
    0 0 0 1px color-mix(in oklch, white 18%, transparent) inset;
}

.dw-home-hero::before,
.dw-home-hero::after {
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  content: '';
}

.dw-home-hero::before {
  top: -14rem;
  right: -10rem;
  width: 31rem;
  height: 31rem;
  border: 1px solid color-mix(in oklch, var(--chart-2) 24%, transparent);
  box-shadow:
    0 0 0 4rem color-mix(in oklch, var(--chart-2) 3%, transparent),
    0 0 0 9rem color-mix(in oklch, var(--primary) 2%, transparent);
}

.dw-home-hero::after {
  bottom: -16rem;
  left: -10rem;
  width: 28rem;
  height: 28rem;
  border: 1px solid color-mix(in oklch, var(--primary) 22%, transparent);
  box-shadow: 0 0 0 5rem color-mix(in oklch, var(--primary) 3%, transparent);
}

.dw-home-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 36rem;
}

.dw-home-eyebrow {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  margin: 0 0 1.25rem;
  color: var(--dw-home-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.dw-home-eyebrow > span,
.dw-home-meta i,
.dw-home-console-footer i {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 0.24rem color-mix(in oklch, #22c55e 16%, transparent);
}

.dw-home-eyebrow > span {
  animation: dw-home-status 2.2s ease-in-out infinite;
}

.dw-home-hero h1 {
  max-width: 11.5em;
  margin: 0;
  color: var(--dw-home-ink);
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  font-weight: 760;
  letter-spacing: -0.075em;
  line-height: 1.03;
  text-wrap: balance;
}

.dw-home-hero h1 span {
  color: transparent;
  background: linear-gradient(
    105deg,
    var(--dw-home-violet),
    var(--dw-home-cyan)
  );
  -webkit-background-clip: text;
  background-clip: text;
}

.dw-home-hero p {
  max-width: 32rem;
  margin: 1.4rem 0 0;
  color: var(--dw-home-muted);
  font-size: clamp(0.96rem, 1.25vw, 1.08rem);
  line-height: 1.8;
}

.dw-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.85rem;
}

.dw-home-actions a,
.dw-home-footer > a {
  position: relative;
  display: inline-flex;
  gap: 0.65rem;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding: 0.78rem 1.1rem;
  border-radius: 0.95rem;
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1;
  text-decoration: none !important;
  transition:
    transform 220ms var(--dw-apple-ease),
    box-shadow 220ms ease,
    border-color 220ms ease,
    background-color 220ms ease;
}

.dw-home-action-primary,
.dw-home-footer > a {
  color: var(--primary-foreground) !important;
  background: linear-gradient(
    110deg,
    var(--dw-home-violet),
    color-mix(in oklch, var(--primary) 70%, var(--chart-2))
  );
  box-shadow: 0 16px 32px -20px
    color-mix(in oklch, var(--primary) 90%, transparent);
}

.dw-home-action-primary span,
.dw-home-footer > a span {
  font-size: 1.2rem;
  transition: transform 220ms var(--dw-apple-ease);
}

.dw-home-action-secondary {
  border: 1px solid var(--dw-home-line);
  color: var(--dw-home-ink) !important;
  background: color-mix(in oklch, var(--card) 68%, transparent);
}

.dw-home-actions a:hover,
.dw-home-footer > a:hover {
  transform: translate3d(0, -3px, 0);
}

.dw-home-action-primary:hover,
.dw-home-footer > a:hover {
  box-shadow: 0 22px 40px -20px
    color-mix(in oklch, var(--primary) 96%, transparent);
}

.dw-home-action-primary:hover span,
.dw-home-footer > a:hover span {
  transform: translateX(0.22rem);
}

.dw-home-action-secondary:hover {
  border-color: color-mix(in oklch, var(--primary) 45%, var(--dw-home-line));
  background: color-mix(in oklch, var(--primary) 8%, var(--card));
}

.dw-home-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  margin-top: 1.85rem;
  color: var(--dw-home-muted);
  font-size: 0.7rem;
  font-weight: 650;
}

.dw-home-meta span {
  display: inline-flex;
  gap: 0.42rem;
  align-items: center;
}

.dw-home-meta i {
  width: 0.38rem;
  height: 0.38rem;
}

.dw-home-hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 23rem;
  perspective: 1000px;
}

.dw-home-orbit {
  position: absolute;
  width: min(29rem, 94%);
  aspect-ratio: 1;
  border: 1px solid color-mix(in oklch, var(--primary) 22%, transparent);
  border-radius: 50%;
  transform: rotateX(65deg) rotateZ(-18deg);
  animation: dw-home-orbit 16s linear infinite;
}

.dw-home-orbit::before,
.dw-home-orbit::after,
.dw-home-orbit i {
  position: absolute;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 999px;
  content: '';
  background: var(--dw-home-cyan);
  box-shadow:
    0 0 0 0.28rem color-mix(in oklch, var(--chart-2) 12%, transparent),
    0 0 1.2rem var(--dw-home-cyan);
}

.dw-home-orbit::before {
  top: 8%;
  left: 22%;
}
.dw-home-orbit::after {
  right: 15%;
  bottom: 12%;
}
.dw-home-orbit i:nth-child(1) {
  top: 48%;
  right: -0.2rem;
  background: var(--dw-home-violet);
}
.dw-home-orbit i:nth-child(2) {
  bottom: 18%;
  left: 2%;
  background: #f59e0b;
}
.dw-home-orbit i:nth-child(3) {
  top: -0.1rem;
  right: 40%;
  background: #34d399;
}

.dw-home-console {
  position: relative;
  z-index: 2;
  width: min(100%, 28rem);
  overflow: hidden;
  border: 1px solid color-mix(in oklch, white 18%, var(--primary));
  border-radius: 1.2rem;
  color: #dceaff;
  background: linear-gradient(155deg, #111b36, #0b1022 72%);
  box-shadow:
    0 34px 64px -32px rgb(14 18 50 / 0.85),
    0 0 0 1px rgb(137 150 255 / 0.12) inset;
  transition:
    transform 220ms var(--dw-apple-ease),
    box-shadow 220ms ease;
}

.dw-home-console::after {
  position: absolute;
  top: 0;
  left: -35%;
  width: 25%;
  height: 100%;
  pointer-events: none;
  content: '';
  background: linear-gradient(
    90deg,
    transparent,
    rgb(255 255 255 / 0.08),
    transparent
  );
  transform: skewX(-18deg);
  animation: dw-home-console-sheen 8s ease-in-out infinite;
}

.dw-home-console-bar,
.dw-home-console-footer {
  display: flex;
  align-items: center;
}

.dw-home-console-bar {
  justify-content: space-between;
  min-height: 2.9rem;
  padding: 0 1rem;
  border-bottom: 1px solid rgb(170 190 255 / 0.11);
  color: rgb(218 229 255 / 0.72);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.dw-home-console-dots,
.dw-home-code-frame-bar > span {
  display: inline-flex;
  gap: 0.32rem;
}

.dw-home-console-dots i,
.dw-home-code-frame-bar > span i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #fb7185;
}

.dw-home-console-dots i:nth-child(2),
.dw-home-code-frame-bar > span i:nth-child(2) {
  background: #fbbf24;
}
.dw-home-console-dots i:nth-child(3),
.dw-home-code-frame-bar > span i:nth-child(3) {
  background: #34d399;
}

.dw-home-console-bar b {
  padding: 0.26rem 0.45rem;
  border-radius: 999px;
  color: #7cf5b9;
  background: rgb(45 212 151 / 0.11);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
}

.dw-home-endpoint {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  padding: 1.05rem 1.1rem 0;
}

.dw-home-endpoint b {
  padding: 0.26rem 0.42rem;
  border-radius: 0.32rem;
  color: #5eead4;
  background: rgb(45 212 191 / 0.12);
  font-size: 0.61rem;
  letter-spacing: 0.08em;
}

.dw-home-endpoint code,
.dw-home-console code,
.dw-home-code,
.dw-home-footer code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.dw-home-endpoint code {
  color: #f3f7ff;
  font-size: 0.77rem;
}

.dw-home-code {
  display: grid;
  gap: 0.4rem;
  padding: 1.05rem 1.1rem 1.2rem;
  color: #b8c6e4;
  font-size: clamp(0.66rem, 1vw, 0.77rem);
  line-height: 1.55;
}

.dw-home-code em {
  color: #c084fc;
  font-style: normal;
}
.dw-home-code strong {
  color: #67e8f9;
  font-weight: 650;
}
.dw-home-code b {
  color: #fde68a;
  font-weight: 580;
}
.dw-home-code-response {
  margin-top: 0.22rem;
  color: #86efac;
}

.dw-home-console-footer {
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid rgb(170 190 255 / 0.11);
  color: #8ca2c8;
  font-size: 0.65rem;
}

.dw-home-console-footer > span {
  display: inline-flex;
  gap: 0.38rem;
  align-items: center;
}

.dw-home-console-footer i {
  width: 0.32rem;
  height: 0.32rem;
  box-shadow: none;
}

.dw-home-console-footer button,
.dw-home-code-frame button {
  min-height: 1.85rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgb(163 184 255 / 0.23);
  border-radius: 0.48rem;
  color: #dce8ff;
  background: rgb(108 122 255 / 0.12);
  font-size: 0.64rem;
  font-weight: 700;
  box-shadow: none;
}

.dw-home-console-footer button:hover,
.dw-home-code-frame button:hover {
  transform: translate3d(0, -1px, 0) !important;
  color: white;
  background: rgb(108 122 255 / 0.25);
  filter: none !important;
}

.dw-home-model-chip {
  position: absolute;
  z-index: 3;
  padding: 0.4rem 0.58rem;
  border: 1px solid color-mix(in oklch, var(--foreground) 13%, transparent);
  border-radius: 999px;
  color: var(--dw-home-ink);
  background: color-mix(in oklch, var(--card) 92%, transparent);
  box-shadow: 0 13px 26px -18px
    color-mix(in oklch, var(--foreground) 55%, transparent);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  will-change: transform;
}

.dw-home-model-gpt {
  top: 5%;
  left: 4%;
  color: #0f9f6e;
  animation: dw-home-chip-gpt 4.8s ease-in-out infinite;
}
.dw-home-model-claude {
  top: 11%;
  right: 1%;
  color: #d97706;
  animation: dw-home-chip-claude 5.5s ease-in-out -1.4s infinite;
}
.dw-home-model-grok {
  bottom: 7%;
  left: 0;
  color: #2563eb;
  animation: dw-home-chip-grok 5.1s ease-in-out -0.6s infinite;
}
.dw-home-model-image {
  right: 7%;
  bottom: 1%;
  color: #9333ea;
  animation: dw-home-chip-image 5.8s ease-in-out -2.2s infinite;
}

.dw-home-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 3.6rem;
}

.dw-home-quick a {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 0.7rem;
  align-items: center;
  min-height: 6.3rem;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid var(--dw-home-line);
  border-radius: 1.15rem;
  color: var(--dw-home-ink) !important;
  background: color-mix(in oklch, var(--card) 76%, transparent);
  text-decoration: none !important;
  box-shadow: 0 15px 34px -30px
    color-mix(in oklch, var(--foreground) 55%, transparent);
  transition:
    transform 260ms var(--dw-apple-ease),
    border-color 220ms ease,
    background-color 220ms ease,
    box-shadow 260ms ease;
}

.dw-home-quick a::after {
  position: absolute;
  right: -1.8rem;
  bottom: -2.2rem;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  pointer-events: none;
  content: '';
  background: color-mix(in oklch, var(--primary) 12%, transparent);
  transform: scale(0.4);
  opacity: 0;
  transition:
    transform 320ms var(--dw-apple-ease),
    opacity 220ms ease;
}

.dw-home-quick a:hover {
  z-index: 1;
  transform: translate3d(0, -5px, 0);
  border-color: color-mix(in oklch, var(--primary) 42%, var(--dw-home-line));
  background: color-mix(in oklch, var(--primary) 7%, var(--card));
  box-shadow: 0 24px 42px -29px
    color-mix(in oklch, var(--primary) 65%, transparent);
}

.dw-home-quick a:hover::after {
  opacity: 1;
  transform: scale(1);
}

.dw-home-quick-icon {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border-radius: 0.7rem;
  color: var(--primary-foreground);
  background: linear-gradient(
    135deg,
    var(--dw-home-violet),
    var(--dw-home-cyan)
  );
  box-shadow: 0 10px 22px -15px var(--dw-home-violet);
}

.dw-home-quick-icon svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.dw-home-quick b {
  font-size: 0.83rem;
  font-weight: 800;
}
.dw-home-quick small {
  grid-column: 2 / 4;
  color: var(--dw-home-muted);
  font-size: 0.67rem;
  line-height: 1.45;
}
.dw-home-quick > a > i {
  grid-row: 1;
  grid-column: 3;
  color: var(--dw-home-muted);
  font-size: 1.1rem;
  font-style: normal;
  transition: transform 220ms var(--dw-apple-ease);
}
.dw-home-quick a:hover > i {
  transform: translateX(0.2rem);
  color: var(--primary);
}

.dw-home-section {
  position: relative;
  margin: 1.2rem 0;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  overflow: hidden;
  border: 1px solid var(--dw-home-line);
  border-radius: 1.45rem;
  background: color-mix(in oklch, var(--card) 78%, transparent);
  box-shadow: 0 22px 44px -42px
    color-mix(in oklch, var(--foreground) 68%, transparent);
}

.dw-home-section::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 4.5rem;
  height: 0.18rem;
  border-radius: 0 0 999px 0;
  content: '';
  background: linear-gradient(
    90deg,
    var(--dw-home-violet),
    var(--dw-home-cyan)
  );
}

.dw-home-section h2 {
  margin: 0 0 1.5rem !important;
  color: var(--dw-home-ink);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem) !important;
  font-weight: 760 !important;
  letter-spacing: -0.04em;
}

.dw-home-section h3 {
  margin: 1.45rem 0 0.7rem !important;
  color: var(--dw-home-ink);
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dw-home-section h3 + .dw-home-code-frame {
  margin-top: 0.7rem;
}

.dw-home-section p,
.dw-home-section li {
  color: var(--dw-home-muted);
  line-height: 1.75;
}

.dw-home-section[data-dw-home-section='steps'] > ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  counter-reset: dw-home-steps;
}

.dw-home-section[data-dw-home-section='steps'] > ol > li {
  position: relative;
  min-height: 8.25rem;
  padding: 1.2rem 1.05rem 1rem 3.7rem !important;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
  border-radius: 1rem;
  background: linear-gradient(
    145deg,
    color-mix(in oklch, var(--primary) 9%, var(--card)),
    var(--card)
  );
  counter-increment: dw-home-steps;
  transition:
    transform 250ms var(--dw-apple-ease),
    border-color 220ms ease,
    box-shadow 250ms ease;
}

.dw-home-section[data-dw-home-section='steps'] > ol > li::before {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: grid;
  width: 1.95rem;
  height: 1.95rem;
  place-items: center;
  border-radius: 0.62rem;
  color: var(--primary-foreground);
  content: counter(dw-home-steps, decimal-leading-zero);
  background: linear-gradient(
    135deg,
    var(--dw-home-violet),
    var(--dw-home-cyan)
  );
  font-size: 0.67rem;
  font-weight: 850;
  box-shadow: 0 10px 22px -15px var(--dw-home-violet);
}

.dw-home-section[data-dw-home-section='steps'] > ol > li:hover {
  transform: translate3d(0, -4px, 0);
  border-color: color-mix(in oklch, var(--primary) 42%, transparent);
  box-shadow: 0 18px 30px -24px
    color-mix(in oklch, var(--primary) 72%, transparent);
}

.dw-home-section[data-dw-home-section='steps'] > ol strong {
  color: var(--dw-home-ink);
}

.dw-home-code-frame {
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--foreground) 13%, transparent);
  border-radius: 0.95rem;
  background: #0d1429;
  box-shadow: 0 19px 34px -30px rgb(7 12 30 / 0.78);
}

.dw-home-code-frame-bar {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
  min-height: 2.7rem;
  padding: 0 0.8rem;
  border-bottom: 1px solid rgb(159 176 255 / 0.12);
  color: #a7b7d7;
}

.dw-home-code-frame-bar b {
  flex: 1;
  color: #9eafe0;
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.dw-home-code-frame-bar > span i {
  width: 0.44rem;
  height: 0.44rem;
}

.dw-home-code-frame pre {
  max-width: none !important;
  margin: 0 !important;
  padding: 1rem 1.05rem !important;
  overflow-x: auto;
  border: 0 !important;
  border-radius: 0 !important;
  color: #dce7ff !important;
  background: transparent !important;
  font-size: 0.76rem;
  line-height: 1.7;
}

.dw-home-code-frame pre code {
  padding: 0 !important;
  color: inherit !important;
  background: transparent !important;
}

.dw-home-section[data-dw-home-section='benefits'] table,
.dw-home-section[data-dw-home-section='products'] table {
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid var(--dw-home-line);
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: 1rem;
  background: color-mix(in oklch, var(--background) 54%, var(--card));
}

.dw-home-section table thead {
  background: color-mix(in oklch, var(--primary) 8%, var(--card));
}
.dw-home-section table th,
.dw-home-section table td {
  padding: 0.8rem 0.9rem !important;
  border-color: var(--dw-home-line) !important;
  vertical-align: middle;
}

.dw-home-section table th {
  color: var(--dw-home-muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dw-home-section table td {
  color: var(--dw-home-muted);
  font-size: 0.8rem;
  line-height: 1.55;
}
.dw-home-section table td:first-child {
  width: 33%;
  color: var(--dw-home-ink);
  font-weight: 720;
}
.dw-home-section table tr {
  transition:
    background-color 180ms ease,
    transform 200ms var(--dw-apple-ease);
}
.dw-home-section table tbody tr:hover {
  transform: none;
  background: color-mix(in oklch, var(--primary) 7%, transparent);
  box-shadow: none;
}

.dw-home-section[data-dw-home-section='clients'] > ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.72rem;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.dw-home-section[data-dw-home-section='clients'] > ul li {
  min-height: 6.4rem;
  padding: 1rem 1rem 1rem 1.15rem !important;
  border-left: 3px solid var(--dw-home-violet);
  border-radius: 0 0.85rem 0.85rem 0;
  background: color-mix(in oklch, var(--primary) 6%, var(--card));
  font-size: 0.78rem;
}

.dw-home-section[data-dw-home-section='clients'] > ul li::marker {
  content: '';
}
.dw-home-section code:not(pre code) {
  color: color-mix(in oklch, var(--primary) 88%, var(--foreground));
  background: color-mix(in oklch, var(--primary) 9%, transparent);
}
.dw-home-section blockquote {
  border-color: #f59e0b !important;
  border-radius: 0 0.8rem 0.8rem 0;
  color: var(--dw-home-muted);
  background: color-mix(in oklch, #f59e0b 8%, transparent) !important;
}

.dw-home-footer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1.25rem;
  align-items: center;
  margin: 3.4rem 0 0;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--dw-home-line);
  border-radius: 1.2rem;
  color: var(--dw-home-muted);
  background: color-mix(in oklch, var(--card) 72%, transparent);
}

.dw-home-footer-brand {
  display: flex;
  gap: 0.72rem;
  align-items: center;
}
.dw-home-footer-brand > i {
  display: grid;
  width: 2.3rem;
  height: 2.3rem;
  place-items: center;
  border-radius: 0.7rem;
  color: white;
  background: linear-gradient(
    135deg,
    var(--dw-home-violet),
    var(--dw-home-cyan)
  );
  font-size: 1rem;
  font-style: normal;
  font-weight: 850;
}
.dw-home-footer-brand > span {
  display: grid;
  gap: 0.14rem;
}
.dw-home-footer b {
  color: var(--dw-home-ink);
  font-size: 0.8rem;
  font-weight: 800;
}
.dw-home-footer small {
  color: var(--dw-home-muted);
  font-size: 0.64rem;
}
.dw-home-footer-endpoint {
  display: grid;
  gap: 0.12rem;
  text-align: right;
}
.dw-home-footer-endpoint > span {
  color: var(--dw-home-muted);
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.dw-home-footer code {
  color: var(--dw-home-ink);
  font-size: 0.7rem;
}
.dw-home-footer > a {
  min-height: 2.65rem;
  padding: 0.7rem 0.82rem;
  font-size: 0.74rem;
}

@keyframes dw-home-status {
  0%,
  100% {
    transform: scale(0.88);
    opacity: 0.72;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

@keyframes dw-home-orbit {
  to {
    transform: rotateX(65deg) rotateZ(342deg);
  }
}

@keyframes dw-home-console-sheen {
  0%,
  66% {
    transform: translateX(0) skewX(-18deg);
    opacity: 0;
  }
  74% {
    opacity: 1;
  }
  86%,
  100% {
    transform: translateX(620%) skewX(-18deg);
    opacity: 0;
  }
}

@keyframes dw-home-chip-gpt {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-3deg);
  }
  50% {
    transform: translate3d(0, -0.55rem, 0) rotate(2deg);
  }
}

@keyframes dw-home-chip-claude {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(3deg);
  }
  50% {
    transform: translate3d(0.45rem, -0.35rem, 0) rotate(-1deg);
  }
}

@keyframes dw-home-chip-grok {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(2deg);
  }
  50% {
    transform: translate3d(-0.36rem, -0.55rem, 0) rotate(-2deg);
  }
}

@keyframes dw-home-chip-image {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-2deg);
  }
  50% {
    transform: translate3d(0.3rem, -0.45rem, 0) rotate(2deg);
  }
}

@media (max-width: 980px) {
  .dw-home-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .dw-home-hero-copy {
    max-width: 42rem;
  }
  .dw-home-hero-visual {
    min-height: 22rem;
  }
  .dw-home-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dw-home-footer {
    grid-template-columns: 1fr auto;
  }
  .dw-home-footer-endpoint {
    display: none;
  }
}

@media (max-width: 680px) {
  body[data-dw-home-page] main.container {
    padding-top: 4.75rem;
  }
  body[data-dw-home-page] main.container > div:has(> .custom-home-content) {
    width: min(100% - 1rem, 74rem);
    padding-bottom: 2.5rem;
  }
  .dw-home-hero {
    gap: 1.5rem;
    padding: 1.45rem;
    border-radius: 1.35rem;
  }
  .dw-home-hero h1 {
    font-size: clamp(2.2rem, 11vw, 3.2rem);
  }
  .dw-home-hero-visual {
    min-height: 19rem;
    margin-inline: -0.5rem;
  }
  .dw-home-console {
    width: min(100%, 23.5rem);
  }
  .dw-home-model-chip {
    font-size: 0.58rem;
  }
  .dw-home-model-gpt {
    top: 2%;
    left: 0;
  }
  .dw-home-model-claude {
    top: 4%;
    right: 0;
  }
  .dw-home-model-grok {
    bottom: 2%;
    left: 0;
  }
  .dw-home-model-image {
    right: 3%;
    bottom: -1%;
  }
  .dw-home-quick {
    grid-template-columns: 1fr;
    margin-bottom: 2.4rem;
  }
  .dw-home-quick a {
    min-height: 5.3rem;
  }
  .dw-home-section {
    padding: 1.15rem;
    border-radius: 1.1rem;
  }
  .dw-home-section[data-dw-home-section='steps'] > ol,
  .dw-home-section[data-dw-home-section='clients'] > ul {
    grid-template-columns: 1fr;
  }
  .dw-home-section[data-dw-home-section='steps'] > ol > li {
    min-height: auto;
  }
  .dw-home-section table {
    display: table !important;
    overflow: visible !important;
  }
  .dw-home-section table th,
  .dw-home-section table td {
    padding: 0.67rem !important;
    font-size: 0.73rem;
  }
  .dw-home-section table td:first-child {
    width: 39%;
  }
  .dw-home-footer {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    margin-top: 2.4rem;
  }
  .dw-home-footer > a {
    justify-self: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dw-home-eyebrow > span,
  .dw-home-orbit,
  .dw-home-console::after,
  .dw-home-model-chip {
    animation: none !important;
  }

  .dw-home-actions a,
  .dw-home-footer > a,
  .dw-home-quick a,
  .dw-home-section[data-dw-home-section='steps'] > ol > li,
  .dw-home-console {
    transition-duration: 120ms !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body {
    background-image: none;
  }

  body::before,
  body::after,
  header.pointer-events-none nav,
  [data-slot='sidebar-wrapper'] > header {
    background-image: none;
    background-color: var(--background);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  [data-slot='sidebar-inner'] {
    background-image: none;
    background-color: var(--sidebar);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  :where(
    [data-slot='dialog-content'],
    [data-slot='sheet-content'],
    [data-slot='drawer-content'],
    [data-slot='popover-content'],
    [data-slot='dropdown-menu-content'],
    [data-slot='select-content'],
    [data-slot='command'],
    [data-slot='tooltip-content'],
    [data-sonner-toaster] [data-sonner-toast]
  ) {
    background-image: none;
    background-color: var(--popover);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  [data-slot='card'] {
    border-color: color-mix(in oklch, var(--foreground) 22%, transparent);
    background: var(--card);
  }
}

@media (prefers-contrast: more) {
  body {
    background-image: none;
  }

  body::before,
  body::after,
  header.pointer-events-none nav,
  [data-slot='sidebar-wrapper'] > header {
    background-image: none;
    background-color: var(--background);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  [data-slot='sidebar-inner'] {
    background-image: none;
    background-color: var(--sidebar);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  :where(
    [data-slot='dialog-content'],
    [data-slot='sheet-content'],
    [data-slot='drawer-content'],
    [data-slot='popover-content'],
    [data-slot='dropdown-menu-content'],
    [data-slot='select-content'],
    [data-slot='command'],
    [data-slot='tooltip-content'],
    [data-sonner-toaster] [data-sonner-toast]
  ) {
    background-image: none;
    background-color: var(--popover);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  [data-slot='card'] {
    border-color: color-mix(in oklch, var(--foreground) 22%, transparent);
    background: var(--card);
  }
}

@media (forced-colors: active) {
  *,
  *::before,
  *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  [data-slot='card'],
  [data-slot='sidebar-inner'],
  :where(
    [data-slot='dialog-content'],
    [data-slot='sheet-content'],
    [data-slot='drawer-content'],
    [data-slot='popover-content'],
    [data-slot='dropdown-menu-content'],
    [data-slot='select-content'],
    [data-slot='command']
  ) {
    color: CanvasText !important;
    background: Canvas !important;
    border: 1px solid CanvasText !important;
  }
}

@media print {
  body,
  [data-slot='sidebar-inner'],
  [data-slot='sidebar-wrapper'] > header {
    background: white !important;
    color: black !important;
  }

  body::before,
  body::after {
    display: none !important;
  }
}

/* ───────────────────── DreamW smoothness pass ─────────────────────────── */
/* Keep the redesign expressive, but avoid continuous paint work on every
 * card and avoid filter-heavy hover states. */

body.dw-apple-v3-ready::before {
  filter: none;
  opacity: 0.7;
  animation-duration: 28s;
  will-change: transform;
}

[data-slot='sidebar-wrapper'] > header,
header.pointer-events-none,
[data-slot='sidebar-inner'] {
  background-color: color-mix(in oklch, var(--background) 94%, var(--primary));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

:where(
  [data-slot='dialog-content'],
  [data-slot='sheet-content'],
  [data-slot='popover-content'],
  [data-slot='dropdown-menu-content'],
  [data-slot='select-content'],
  [data-slot='command']
) {
  backdrop-filter: blur(10px) saturate(125%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
}

body.dw-apple-v3-ready #root {
  filter: none;
  will-change: opacity, transform;
}

body.dw-apple-v3-ready main::before,
body.dw-apple-v3-ready [role='main']::before,
body.dw-apple-v3-ready [data-sidebar='content']::before {
  background: radial-gradient(
    560px 240px at 50% 0%,
    color-mix(in oklch, var(--primary) 12%, transparent),
    transparent 72%
  );
  opacity: 0.38;
}

.dw-cursor-aura {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 240px;
  height: 240px;
  pointer-events: none;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    color-mix(in oklch, var(--primary) 18%, transparent),
    transparent 68%
  );
  opacity: 0;
  transform: translate3d(-320px, -320px, 0);
  transition: opacity 180ms ease;
  will-change: transform;
  contain: strict;
}

.dw-cursor-aura[data-active='true'] {
  opacity: 0.72;
}

[data-slot='card'] {
  filter: none;
  contain: paint;
  will-change: auto;
}

[data-slot='card']::after {
  animation: none;
  background-position: 120% 0;
  transform: translate3d(8%, 0, 0);
  transition:
    transform 700ms var(--dw-apple-ease),
    opacity 220ms ease;
  will-change: auto;
}

[data-slot='card']:hover {
  filter: none;
  will-change: transform, box-shadow;
}

[data-slot='card']:hover::after {
  transform: translate3d(-8%, 0, 0);
  opacity: 0.3;
}

[data-slot='button'],
button,
a[role='button'],
[role='button'] {
  filter: none;
  will-change: auto;
}

[data-slot='button']:not(:disabled):hover,
button:not(:disabled):hover,
a[role='button']:hover,
[role='button']:hover {
  filter: none;
  will-change: transform, box-shadow;
}

[data-slot='table'] tbody tr {
  will-change: auto;
}

[data-slot='table'] tbody tr:hover {
  will-change: transform, box-shadow;
}

.dw-ripple {
  will-change: transform, opacity;
}

@media (pointer: coarse) {
  .dw-cursor-aura {
    display: none;
  }

  body.dw-apple-v3-ready::before {
    animation: none;
    filter: none;
    opacity: 0.38;
  }

  [data-slot='card']:hover {
    transform: none;
    filter: none;
    box-shadow:
      0 20px 48px -32px color-mix(in oklch, var(--foreground) 48%, transparent),
      0 0 0 1px color-mix(in oklch, white 8%, transparent) inset;
  }
}

/* Redefine entry motion with compositor-only properties. */
@keyframes dw-apple-reveal {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes dw-v3-root-in {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.988);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes dw-v3-pop-in {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.dw-apple-v3-ready::before,
  body.dw-apple-v3-ready #root,
  .dw-cursor-aura,
  [data-slot='card']::after {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* ───────────────────── DreamW expressive interaction pass ─────────────── */
/* This pass intentionally makes the redesign obvious at a glance while
 * keeping motion compositor-friendly and scoped to the presentation layer. */

:root {
  --dw-v3-accent: color-mix(in oklch, var(--primary) 82%, white 18%);
  --dw-v3-accent-soft: color-mix(in oklch, var(--primary) 22%, transparent);
  --dw-v3-surface: color-mix(in oklch, var(--background) 84%, white 16%);
  --dw-v3-radius: 1.15rem;
}

body.dw-apple-v3-ready {
  background:
    radial-gradient(
      1100px 520px at 10% -8%,
      color-mix(in oklch, var(--primary) 18%, transparent),
      transparent 68%
    ),
    radial-gradient(
      900px 520px at 96% 0%,
      color-mix(in oklch, var(--chart-2) 14%, transparent),
      transparent 68%
    ),
    linear-gradient(
      135deg,
      color-mix(in oklch, var(--background) 94%, var(--primary) 6%),
      var(--background)
    );
}

body.dw-apple-v3-ready::before {
  opacity: 1;
  filter: blur(42px) saturate(150%);
  animation: dw-v3-ambient 12s ease-in-out infinite alternate;
}

body.dw-apple-v3-ready::after {
  opacity: 0.5;
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 88%);
}

body.dw-apple-v3-ready #root {
  animation: dw-v3-root-in 780ms var(--dw-apple-ease) both;
}

body.dw-apple-v3-ready main,
body.dw-apple-v3-ready [role='main'],
body.dw-apple-v3-ready [data-sidebar='content'] {
  position: relative;
  isolation: isolate;
}

body.dw-apple-v3-ready main::before,
body.dw-apple-v3-ready [role='main']::before,
body.dw-apple-v3-ready [data-sidebar='content']::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: '';
  background: radial-gradient(
    560px 240px at var(--dw-pointer-x, 50%) var(--dw-pointer-y, 0%),
    var(--dw-v3-accent-soft),
    transparent 72%
  );
  opacity: 0.6;
  transition: opacity 260ms ease;
}

[data-slot='sidebar-wrapper'] > header,
header.pointer-events-none,
[data-slot='sidebar-inner'] {
  background-color: color-mix(in oklch, var(--dw-v3-surface) 82%, transparent);
  border-color: color-mix(in oklch, var(--dw-v3-accent) 18%, var(--border));
  box-shadow: 0 18px 52px -34px
    color-mix(in oklch, var(--primary) 58%, transparent);
  backdrop-filter: blur(30px) saturate(175%);
  -webkit-backdrop-filter: blur(30px) saturate(175%);
}

[data-slot='sidebar-inner'] {
  border-right-width: 1px;
}

[data-slot='card'],
[data-slot='section'],
form,
fieldset,
[data-slot='table-container'] {
  border-radius: var(--dw-v3-radius);
}

[data-slot='card'],
[data-slot='section'],
form,
fieldset {
  border: 1px solid color-mix(in oklch, var(--foreground) 12%, transparent);
  background:
    linear-gradient(
      145deg,
      color-mix(in oklch, var(--card) 93%, transparent),
      color-mix(in oklch, var(--primary) 7%, var(--card))
    ),
    var(--card);
  box-shadow:
    0 20px 48px -32px color-mix(in oklch, var(--foreground) 48%, transparent),
    0 0 0 1px color-mix(in oklch, white 8%, transparent) inset;
}

[data-slot='card'] {
  overflow: hidden;
  transition:
    transform 360ms var(--dw-apple-ease),
    box-shadow 360ms var(--dw-apple-ease),
    border-color 220ms ease,
    filter 220ms ease;
}

[data-slot='card']::before {
  opacity: 0.22;
  background:
    radial-gradient(
      340px 240px at var(--dw-card-x) var(--dw-card-y),
      color-mix(in oklch, var(--primary) 28%, transparent),
      transparent 72%
    ),
    linear-gradient(
      115deg,
      color-mix(in oklch, white 16%, transparent),
      transparent 34% 70%,
      color-mix(in oklch, var(--primary) 16%, transparent)
    );
}

[data-slot='card']:hover {
  transform: translateY(-8px) scale(1.012);
  filter: saturate(1.08);
  border-color: color-mix(in oklch, var(--primary) 48%, var(--border));
  box-shadow:
    0 30px 70px -34px color-mix(in oklch, var(--primary) 68%, transparent),
    0 0 0 1px color-mix(in oklch, var(--primary) 22%, transparent) inset;
}

[data-slot='card']:hover::before {
  opacity: 1;
}

.dw-interactive {
  -webkit-tap-highlight-color: transparent;
}

[data-slot='button'],
button,
a[role='button'],
[role='button'] {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition:
    transform 180ms var(--dw-apple-ease),
    box-shadow 220ms var(--dw-apple-ease),
    filter 180ms ease,
    background-color 180ms ease;
}

[data-slot='button']:not(:disabled):hover,
button:not(:disabled):hover,
a[role='button']:hover,
[role='button']:hover {
  transform: translateY(-3px) scale(1.025);
  filter: brightness(1.08) saturate(1.14);
  box-shadow:
    0 14px 30px -18px color-mix(in oklch, var(--primary) 84%, transparent),
    0 0 0 1px color-mix(in oklch, var(--primary) 30%, transparent) inset;
}

[data-slot='button']:not(:disabled):active,
button:not(:disabled):active,
a[role='button']:active,
[role='button']:active,
[data-dw-apple-pressed='true'] {
  transform: translateY(1px) scale(0.94) !important;
  filter: brightness(0.98);
}

.dw-ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
  border-radius: 999px;
  background: color-mix(in oklch, white 70%, var(--primary));
  opacity: 0.5;
  transform: translate(-50%, -50%) scale(0);
  animation: dw-v3-ripple 560ms ease-out forwards;
}

[data-sidebar='menu-button'],
[data-sidebar='menu-sub-button'] {
  min-height: 2.65rem;
  border: 1px solid transparent;
  border-radius: 0.8rem;
  transition:
    transform 220ms var(--dw-apple-ease),
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 220ms ease;
}

[data-sidebar='menu-button']:hover,
[data-sidebar='menu-sub-button']:hover {
  transform: translateX(5px);
  border-color: color-mix(in oklch, var(--sidebar-primary) 26%, transparent);
  background: color-mix(in oklch, var(--sidebar-primary) 11%, transparent);
  box-shadow: 0 10px 24px -20px
    color-mix(in oklch, var(--sidebar-primary) 82%, transparent);
}

[data-sidebar='menu-button'][data-active='true'],
[data-sidebar='menu-sub-button'][data-active='true'] {
  border-color: color-mix(in oklch, var(--sidebar-primary) 34%, transparent);
  background: linear-gradient(
    100deg,
    color-mix(in oklch, var(--sidebar-primary) 26%, transparent),
    color-mix(in oklch, var(--sidebar-primary) 8%, transparent)
  );
  box-shadow: 0 12px 28px -22px
    color-mix(in oklch, var(--sidebar-primary) 100%, transparent);
}

[data-sidebar='menu-button'][data-active='true']::before,
[data-sidebar='menu-sub-button'][data-active='true']::before {
  left: -1px;
  width: 4px;
  box-shadow: 0 0 14px var(--sidebar-primary);
}

input,
textarea,
select,
[data-slot='input'],
[data-slot='textarea'],
[data-slot='select-trigger'] {
  border-radius: 0.8rem;
  border-color: color-mix(in oklch, var(--foreground) 14%, transparent);
  background: color-mix(in oklch, var(--background) 74%, var(--card));
}

input:hover,
textarea:hover,
select:hover,
[data-slot='input']:hover,
[data-slot='textarea']:hover,
[data-slot='select-trigger']:hover {
  border-color: color-mix(in oklch, var(--primary) 38%, var(--border));
  background: color-mix(in oklch, var(--primary) 6%, var(--background));
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[data-slot='input']:focus-visible,
[data-slot='textarea']:focus-visible,
[data-slot='select-trigger']:focus-visible {
  transform: translateY(-2px) scale(1.008);
  box-shadow:
    0 0 0 4px color-mix(in oklch, var(--primary) 22%, transparent),
    0 16px 34px -24px color-mix(in oklch, var(--primary) 90%, transparent);
}

[data-slot='table'] tbody tr {
  border-radius: 0.65rem;
  transition:
    transform 220ms var(--dw-apple-ease),
    background-color 180ms ease,
    box-shadow 220ms ease;
}

[data-slot='table'] tbody tr:hover {
  transform: translateX(7px) scale(1.006);
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--primary) 12%, transparent),
    transparent
  );
  box-shadow: 0 12px 28px -24px
    color-mix(in oklch, var(--primary) 80%, transparent);
}

:where(
  [data-slot='dialog-content'],
  [data-slot='sheet-content'],
  [data-slot='popover-content'],
  [data-slot='dropdown-menu-content'],
  [data-slot='select-content'],
  [data-slot='command']
) {
  animation: dw-v3-pop-in 320ms var(--dw-apple-ease) both;
  border-width: 1px;
  border-color: color-mix(in oklch, var(--primary) 28%, var(--border));
  box-shadow:
    0 36px 90px -38px color-mix(in oklch, var(--primary) 65%, transparent),
    0 0 0 1px color-mix(in oklch, white 12%, transparent) inset;
}

[data-sonner-toaster] [data-sonner-toast] {
  animation: dw-v3-toast-in 420ms var(--dw-apple-ease) both;
  border-left: 3px solid var(--primary);
}

@keyframes dw-v3-root-in {
  from {
    opacity: 0;
    transform: scale(0.985) translateY(14px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

@keyframes dw-v3-ambient {
  0% {
    transform: translate3d(-3%, -2%, 0) scale(1);
  }
  100% {
    transform: translate3d(3%, 2%, 0) scale(1.1);
  }
}

@keyframes dw-v3-ripple {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(18);
  }
}

@keyframes dw-v3-pop-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes dw-v3-toast-in {
  from {
    opacity: 0;
    transform: translateX(34px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.dw-apple-v3-ready,
  body.dw-apple-v3-ready::before,
  body.dw-apple-v3-ready #root,
  [data-slot='card']::after,
  :where(
    [data-slot='dialog-content'],
    [data-slot='sheet-content'],
    [data-slot='popover-content'],
    [data-slot='dropdown-menu-content'],
    [data-slot='select-content'],
    [data-slot='command']
  ),
  [data-sonner-toaster] [data-sonner-toast] {
    animation: none !important;
  }
}

/* r16: AuthLayout now uses div, not main. Scope to the existing
   auth-page flag so flat forms and password controls match both layouts. */
/* DreamW auth iOS-flat r11 — 只作用于登录/注册/找回密码，不影响控制台卡片 */
[data-dw-auth-page] form,
[data-dw-auth-page] fieldset {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  filter: none !important;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding-inline: 0 !important;
  isolation: auto;
}

[data-dw-auth-page] form::before,
[data-dw-auth-page] form::after,
[data-dw-auth-page] fieldset::before,
[data-dw-auth-page] fieldset::after {
  content: none !important;
  display: none !important;
}

[data-dw-auth-page] form:hover,
[data-dw-auth-page] fieldset:hover {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

[data-dw-auth-page] form input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']),
[data-dw-auth-page] form textarea,
[data-dw-auth-page] form [data-slot='input'] {
  min-height: 44px;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

[data-dw-auth-page] form button:not(:disabled):hover,
[data-dw-auth-page] form [data-slot='button']:not(:disabled):hover,
[data-dw-auth-page] a[role='button']:hover {
  transform: none !important;
  filter: none !important;
}

[data-dw-auth-page] form button[type='submit'] {
  height: 44px !important;
  min-height: 44px;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  background: var(--primary) !important;
  color: var(--primary-foreground, #fff) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
}

[data-dw-auth-page] form button[type='submit']:not(:disabled):hover {
  transform: none !important;
  filter: none !important;
  opacity: 0.92;
}

[data-dw-auth-page] form button[type='submit']:not(:disabled):active {
  transform: scale(0.98) !important;
  opacity: 0.88;
}

[data-dw-auth-page] form button[type='submit']:disabled {
  opacity: 0.45;
}

[data-dw-auth-page] form button[type='button'] {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

[data-dw-auth-page] form label,
[data-dw-auth-page] form [data-slot='form-label'],
[data-dw-auth-page] form [data-slot='checkbox'] {
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  [data-dw-auth-page] form button[type='submit']:not(:disabled):active {
    transform: none !important;
  }
}

/* r12: 密码框只留一个眼睛。组件切换钉回输入框内，隐藏浏览器自带 reveal。 */
[data-dw-auth-page] form input[type='password']::-ms-reveal,
[data-dw-auth-page] form input[type='password']::-ms-clear,
[data-dw-auth-page] form input::-webkit-credentials-auto-fill-button,
[data-dw-auth-page] form input::-webkit-strong-password-auto-fill-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

[data-dw-auth-page] form button[aria-label='Toggle password visibility'] {
  position: absolute !important;
  top: 50% !important;
  right: 6px !important;
  left: auto !important;
  inset-inline-end: 6px !important;
  inset-inline-start: auto !important;
  z-index: 3;
  width: 24px !important;
  height: 24px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: translateY(-50%) !important;
}

[data-dw-auth-page] form button[aria-label='Toggle password visibility']:not(:disabled):hover,
[data-dw-auth-page] form button[aria-label='Toggle password visibility']:not(:disabled):active {
  transform: translateY(-50%) !important;
  filter: none !important;
  opacity: 0.8;
}

/* r13: 眼睛下移对齐字符，整颗图标可点，避免被「忘记密码」盖住 */
[data-dw-auth-page] form [data-slot='form-control'] {
  position: relative !important;
}

[data-dw-auth-page] form a[href*='forgot-password'] {
  z-index: 2 !important;
  pointer-events: auto;
}

[data-dw-auth-page] form button[aria-label='Toggle password visibility'],
[data-dw-auth-page] form button[aria-label='Toggle password visibility'][data-dw-apple-pressed='true'] {
  position: absolute !important;
  top: auto !important;
  right: 4px !important;
  bottom: 4px !important;
  left: auto !important;
  inset-inline-end: 4px !important;
  inset-inline-start: auto !important;
  z-index: 40 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  pointer-events: auto !important;
}

[data-dw-auth-page] form button[aria-label='Toggle password visibility']:not(:disabled):hover,
[data-dw-auth-page] form button[aria-label='Toggle password visibility']:not(:disabled):active,
[data-dw-auth-page] form button[aria-label='Toggle password visibility'][data-dw-apple-pressed='true'] {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

[data-dw-auth-page] form button[aria-label='Toggle password visibility'] svg {
  pointer-events: none !important;
  width: 18px !important;
  height: 18px !important;
}

[data-dw-auth-page] form [data-slot='form-control']:has(> button[aria-label='Toggle password visibility']) input {
  padding-inline-end: 42px !important;
}

/* r14: 眼睛相对输入框拉满并垂直居中，覆盖 r12/r13 的 top/height 过约束 */
/* Tailwind v4 用 translate 属性，不是 transform；必须同时清掉，否则会往上抬半个图标 */
[data-dw-auth-page] form :has(> button[aria-label='Toggle password visibility']) {
  position: relative !important;
  display: block !important;
}

[data-dw-auth-page] form [data-slot='form-control']:has(> button[aria-label='Toggle password visibility']) {
  position: relative !important;
  display: block !important;
  min-height: 40px;
}

[data-dw-auth-page] form [data-slot='form-item']:has(> a[href*='forgot-password']) {
  position: relative !important;
}

[data-dw-auth-page] form a[href*='forgot-password'] {
  z-index: 2 !important;
  pointer-events: auto;
}

[data-dw-auth-page] form button[aria-label='Toggle password visibility'],
[data-dw-auth-page] form [data-slot='form-control'] > button[aria-label='Toggle password visibility'],
[data-dw-auth-page] form :has(> button[aria-label='Toggle password visibility']) > button[aria-label='Toggle password visibility'],
[data-dw-auth-page] form button[aria-label='Toggle password visibility'][data-dw-apple-pressed='true'] {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  inset: 0 0 0 auto !important;
  inset-inline-end: 0 !important;
  inset-inline-start: auto !important;
  z-index: 40 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: auto !important;
  min-width: 44px !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 12px 12px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  --tw-translate-x: 0 !important;
  --tw-translate-y: 0 !important;
  --tw-translate-z: 0 !important;
  filter: none !important;
  pointer-events: auto !important;
}

[data-dw-auth-page] form button[aria-label='Toggle password visibility']:not(:disabled):hover,
[data-dw-auth-page] form button[aria-label='Toggle password visibility']:not(:disabled):active,
[data-dw-auth-page] form button[aria-label='Toggle password visibility'][data-dw-apple-pressed='true'],
[data-dw-auth-page] form [data-slot='form-control'] > button[aria-label='Toggle password visibility']:not(:disabled):hover,
[data-dw-auth-page] form [data-slot='form-control'] > button[aria-label='Toggle password visibility']:not(:disabled):active {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  transform: none !important;
  translate: none !important;
  --tw-translate-x: 0 !important;
  --tw-translate-y: 0 !important;
  filter: none !important;
  box-shadow: none !important;
}

[data-dw-auth-page] form button[aria-label='Toggle password visibility']::after {
  content: none !important;
  display: none !important;
}

[data-dw-auth-page] form button[aria-label='Toggle password visibility'] svg {
  pointer-events: none !important;
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
}

[data-dw-auth-page] form :has(> button[aria-label='Toggle password visibility']) input,
[data-dw-auth-page] form [data-slot='form-control']:has(> button[aria-label='Toggle password visibility']) input {
  padding-inline-end: 44px !important;
}

/* r15: 顶栏通知角标完整显示；切主题后继续用新首页而不是旧 HTML */
header.pointer-events-none,
header.pointer-events-none nav,
header.pointer-events-none nav > div {
  overflow: visible !important;
}

header.pointer-events-none nav :is(button, [data-slot='button'], a[role='button']) {
  overflow: visible !important;
}

header.pointer-events-none nav :is(button, [data-slot='button'])::after {
  content: none !important;
  display: none !important;
}

header.pointer-events-none nav [data-slot='badge'] {
  z-index: 6 !important;
  overflow: visible !important;
  pointer-events: none;
}