/* Neon interface style: cyber-neon HUD with animated light.
   Enabled with html[data-style="neon"] (the default). Follows the shared
   canon in Active/DESIGN.md: glow only on interactive elements and statuses,
   panels are solid with HUD corner brackets, one running border per card,
   moving layers animate transform/opacity only, and both
   prefers-reduced-motion and html[data-anim="off"] switch every animation off.
   Keyframes are prefixed nx- so they never clash with the base sheets. */

@property --nx-ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
:root[data-style="neon"] {
  --font:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI",
    system-ui, sans-serif;
  --font-display:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI",
    system-ui, sans-serif;
  --r-xs: 8px;
  --r-sm: 11px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;
  --ctl: 40px;
  --ctl-sm: 32px;
  --row: 44px;
  --gap: 16px;
  --gap-sm: 10px;
  --gap-lg: 24px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --neon: var(--accent-strong);
  --neon-2: var(--accent-2);
  --grid-size: 56px;
  --nx-aurora: 0.8;
}

/* ---------- palette: dark (default) ---------- */
:root[data-style="neon"][data-theme="dark"] {
  --bg: #04050c;
  --bg-deep: #02030a;
  --panel: #0a0c1a;
  --panel-strong: #0e1124;
  --panel-soft: #11152b;
  --field: #080a16;
  --field-strong: #11152b;
  --text: #eaedff;
  --muted: #9ea6d6;
  --faint: #7580b6;
  --line: rgb(120 140 255 / 17%);
  --line-strong: rgb(130 150 255 / 32%);
  --line-soft: rgb(120 140 255 / 8%);
  --scrim: rgb(2 3 10 / 74%);
  --success: #3ef0a0;
  --warning: #ffc857;
  --danger: #ff6b93;
  --info: #6fb4ff;
  --nx-grid-line: rgb(120 140 255 / 10%);
  --nx-sheen: radial-gradient(
    120% 90% at 0% 0%,
    color-mix(in srgb, var(--accent) 9%, transparent),
    transparent 60%
  );
  --shadow-card: 0 14px 30px -20px rgb(0 0 0 / 80%);
  --glow-sm: 0 0 calc(10px * var(--g)) -2px
    color-mix(in srgb, var(--neon) 55%, transparent);
  --glow-md: 0 0 calc(18px * var(--g)) -3px
    color-mix(in srgb, var(--neon) 60%, transparent);
  --glow-lg: 0 0 calc(30px * var(--g)) -4px
    color-mix(in srgb, var(--neon) 65%, transparent);
}

/* ---------- palette: light neon ---------- */
:root[data-style="neon"][data-theme="light"] {
  --bg: #f1f2ff;
  --bg-deep: #e8eaff;
  --panel: #ffffff;
  --panel-strong: #ffffff;
  --panel-soft: #f1f2ff;
  --field: #ffffff;
  --field-strong: #f1f2ff;
  --text: #14172e;
  --muted: #4f557a;
  --faint: #5f658e;
  --line: rgb(70 80 180 / 16%);
  --line-strong: rgb(70 80 180 / 30%);
  --line-soft: rgb(70 80 180 / 8%);
  --scrim: rgb(20 23 46 / 45%);
  --nx-grid-line: rgb(70 80 180 / 9%);
  --nx-sheen: radial-gradient(
    120% 90% at 0% 0%,
    color-mix(in srgb, var(--accent) 7%, transparent),
    transparent 60%
  );
  --shadow-card:
    0 1px 2px rgb(30 35 90 / 6%), 0 14px 28px -18px rgb(30 35 90 / 24%);
  --glow-sm: 0 0 calc(8px * var(--g)) -2px
    color-mix(in srgb, var(--accent) 45%, transparent);
  --glow-md: 0 0 calc(14px * var(--g)) -3px
    color-mix(in srgb, var(--accent) 50%, transparent);
  --glow-lg: 0 0 calc(24px * var(--g)) -4px
    color-mix(in srgb, var(--accent) 55%, transparent);
  --nx-aurora: 0.35;
}

:root[data-style="neon"] {
  --n-layer-1: var(--shadow-card);
  --n-layer-2: var(--shadow-card);
  --n-layer-3: var(--shadow-card), var(--glow-sm);
  --n-glow-sm: var(--glow-sm);
  --n-glow: var(--glow-md);
  --n-glow-wide: var(--glow-lg);
}

:root[data-style="neon"] body {
  background: var(--bg);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0;
}

/* ================= FX layers (aria-hidden, no pointer events) ================= */

:root[data-style="neon"] #backgroundFx {
  background: var(--bg);
  z-index: -2;
}
:root[data-style="neon"] .bg-grid {
  display: block;
  opacity: calc(0.55 + 0.35 * var(--g));
  background-image:
    linear-gradient(var(--nx-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--nx-grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-mask-image: radial-gradient(
    90% 75% at 50% 0%,
    #000 6%,
    transparent 80%
  );
  mask-image: radial-gradient(90% 75% at 50% 0%, #000 6%, transparent 80%);
}

/* Aurora: three slowly drifting colour pools. Each pool is a soft radial
   gradient (no filter: blur, no blend mode), so moving it only moves a layer
   that is already painted. */
:root[data-style="neon"] .bg-blob {
  display: block;
  position: absolute;
  border-radius: 50%;
  opacity: var(--nx-aurora);
  will-change: transform;
}
:root[data-style="neon"] .bg-blob-a {
  width: 44vmax;
  height: 44vmax;
  left: -6%;
  top: -10%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--accent) 38%, transparent),
    transparent
  );
  animation: nx-drift-a 34s var(--ease) infinite alternate;
}
:root[data-style="neon"] .bg-blob-b {
  width: 36vmax;
  height: 36vmax;
  right: -8%;
  top: 14%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--accent-2) 36%, transparent),
    transparent
  );
  animation: nx-drift-b 28s var(--ease) infinite alternate;
}
:root[data-style="neon"] .bg-blob-c {
  width: 28vmax;
  height: 28vmax;
  left: 38%;
  bottom: -14%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--accent) 22%, var(--accent-2) 22%),
    transparent
  );
  animation: nx-drift-c 40s var(--ease) infinite alternate;
}

/* Perspective floor and scanlines: dark mode, desktop only. */
:root[data-style="neon"] .bg-floor {
  position: absolute;
  left: -20vw;
  right: -20vw;
  bottom: -2vh;
  height: 44vh;
  overflow: hidden;
  transform: perspective(520px) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 78%);
  mask-image: linear-gradient(to top, #000 0%, transparent 78%);
  opacity: calc(0.22 + 0.2 * var(--g));
}
:root[data-style="neon"] .bg-floor::before {
  content: "";
  position: absolute;
  inset: -64px 0 0;
  will-change: transform;
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--accent-2) 36%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent) 36%, transparent) 1px,
      transparent 1px
    );
  background-size: 64px 64px;
  animation: nx-floor 4.5s linear infinite;
}
:root[data-style="neon"] .bg-scan {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: repeating-linear-gradient(
    0deg,
    rgb(0 0 0 / 14%) 0 1px,
    transparent 1px 3px
  );
  opacity: calc(0.25 + 0.3 * var(--g));
}
:root[data-style="neon"] .bg-scan::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 22vh;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--accent) 12%, transparent),
    transparent
  );
  animation: nx-scan 9s linear infinite;
}
:root[data-style="neon"] .bg-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 760px;
  height: 760px;
  will-change: transform;
  transform: translate3d(
    calc(var(--px, 50vw) - 380px),
    calc(var(--py, 40vh) - 380px),
    0
  );
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--accent) 15%, transparent),
    transparent
  );
  opacity: calc(0.35 + 0.5 * var(--g));
}
:root[data-style="neon"][data-theme="light"] .bg-floor,
:root[data-style="neon"][data-theme="light"] .bg-scan {
  display: none;
}
:root[data-style="neon"] .bg-floor,
:root[data-style="neon"] .bg-scan,
:root[data-style="neon"] .bg-cursor {
  display: block;
}
@media (hover: none) {
  :root[data-style="neon"] .bg-cursor {
    display: none;
  }
}
@media (max-width: 767px) {
  :root[data-style="neon"] .bg-floor,
  :root[data-style="neon"] .bg-scan {
    display: none;
  }
  :root[data-style="neon"] .bg-blob {
    opacity: calc(var(--nx-aurora) * 0.7);
  }
}
/* FX layers are only for the neon style. */
:root:not([data-style="neon"]) .bg-floor,
:root:not([data-style="neon"]) .bg-scan,
:root:not([data-style="neon"]) .bg-cursor {
  display: none;
}

/* ================= typography ================= */

:root[data-style="neon"] h1,
:root[data-style="neon"] h2,
:root[data-style="neon"] h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
}
:root[data-style="neon"] .view-head h2 {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.12;
  text-shadow: 0 0 calc(26px * var(--g))
    color-mix(in srgb, var(--accent) 40%, transparent);
}
:root[data-style="neon"][data-theme="light"] .view-head h2 {
  text-shadow: none;
}
:root[data-style="neon"] .view-head-copy p {
  max-width: 62ch;
  color: var(--muted);
}

/* Kickers: small mono caps led by a short glowing line, like the landing page. */
:root[data-style="neon"] .eyebrow,
:root[data-style="neon"] .section-kicker,
:root[data-style="neon"] .field-label,
:root[data-style="neon"] .stat-label,
:root[data-style="neon"] .card-label,
:root[data-style="neon"] .nav-group-label,
:root[data-style="neon"] .home-card-head h3 {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
:root[data-style="neon"] .view-head .eyebrow,
:root[data-style="neon"] .hero .eyebrow,
:root[data-style="neon"] .home-card-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
:root[data-style="neon"] .view-head .eyebrow::before,
:root[data-style="neon"] .hero .eyebrow::before,
:root[data-style="neon"] .home-card-head h3::before {
  content: "";
  flex: none;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 calc(8px * var(--g)) var(--accent);
}
:root[data-style="neon"] .stat-value,
:root[data-style="neon"] .progress-stat-value,
:root[data-style="neon"] .bar-value,
:root[data-style="neon"] .recorder-timer,
:root[data-style="neon"] .ring-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
:root[data-style="neon"] .stat-value,
:root[data-style="neon"] .progress-stat-value,
:root[data-style="neon"] .home-focus {
  color: var(--neon);
  text-shadow: 0 0 calc(18px * var(--g))
    color-mix(in srgb, var(--neon) 55%, transparent);
}
:root[data-style="neon"][data-theme="light"] .stat-value,
:root[data-style="neon"][data-theme="light"] .progress-stat-value,
:root[data-style="neon"][data-theme="light"] .home-focus {
  color: var(--accent);
  text-shadow: none;
}
:root[data-style="neon"] .home-focus {
  color: var(--text);
}
:root[data-style="neon"][data-theme="light"] .home-focus {
  color: var(--text);
}

/* ================= HUD panels ================= */

:root[data-style="neon"] .ios-section,
:root[data-style="neon"] .study-card,
:root[data-style="neon"] .home-card,
:root[data-style="neon"] .progress-stat,
:root[data-style="neon"] .task-block,
:root[data-style="neon"] .task-editor,
:root[data-style="neon"] .stat-card,
:root[data-style="neon"] .world-card,
:root[data-style="neon"] .collection-card,
:root[data-style="neon"] .feedback-item {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  /* glass: a soft light from the top corner over a deep panel */
  background-color: var(--panel);
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 7%, transparent),
      transparent 42%
    ),
    var(--nx-sheen);
  background-repeat: no-repeat;
  box-shadow:
    var(--shadow-card),
    inset 0 1px 0 color-mix(in srgb, #fff 9%, transparent);
  transition:
    transform 260ms var(--spring),
    border-color 200ms var(--ease),
    box-shadow 200ms var(--ease);
}
:root[data-style="neon"] .ios-section,
:root[data-style="neon"] .study-card,
:root[data-style="neon"] .home-card {
  padding: 22px 24px;
}
:root[data-style="neon"] .study-card,
:root[data-style="neon"] .home-card,
:root[data-style="neon"] .progress-stat,
:root[data-style="neon"] .world-card,
:root[data-style="neon"] .task-block {
  overflow: hidden;
}

/* Spotlight under the pointer and one running contour per hovered card. */
:root[data-style="neon"] .study-card::before,
:root[data-style="neon"] .home-card::before,
:root[data-style="neon"] .progress-stat::before,
:root[data-style="neon"] .world-card::before,
:root[data-style="neon"] .ios-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    260px circle at var(--cx, 50%) var(--cy, 0%),
    color-mix(in srgb, var(--accent) 15%, transparent),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 220ms var(--ease);
}
:root[data-style="neon"] .study-card::after,
:root[data-style="neon"] .home-card::after,
:root[data-style="neon"] .progress-stat::after,
:root[data-style="neon"] .world-card::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  pointer-events: none;
  border-radius: inherit;
  background: conic-gradient(
    from var(--nx-ang),
    transparent 0 56%,
    var(--accent) 76%,
    var(--accent-2) 90%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 220ms var(--ease);
}
:root[data-style="neon"] .study-card > *,
:root[data-style="neon"] .home-card > *,
:root[data-style="neon"] .progress-stat > *,
:root[data-style="neon"] .world-card > * {
  position: relative;
  z-index: 1;
}
:root[data-style="neon"] .study-card:hover,
:root[data-style="neon"] .home-card:hover,
:root[data-style="neon"] .progress-stat:hover,
:root[data-style="neon"] .world-card:hover,
:root[data-style="neon"] .ios-section:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  box-shadow: var(--shadow-card), var(--glow-sm);
}
:root[data-style="neon"] .study-card:hover::before,
:root[data-style="neon"] .home-card:hover::before,
:root[data-style="neon"] .progress-stat:hover::before,
:root[data-style="neon"] .world-card:hover::before,
:root[data-style="neon"] .ios-section:hover::before {
  opacity: 1;
}
:root[data-style="neon"] .study-card:hover::after,
:root[data-style="neon"] .home-card:hover::after,
:root[data-style="neon"] .progress-stat:hover::after,
:root[data-style="neon"] .world-card:hover::after {
  opacity: calc(0.35 + 0.65 * var(--g));
  animation: nx-spin 2.8s linear infinite;
}

/* "Today" card is the one that should glow at rest. */
:root[data-style="neon"] .home-card--today {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  box-shadow: var(--shadow-card), var(--glow-md);
}
:root[data-style="neon"] .home-card--today::after {
  opacity: calc(0.25 + 0.5 * var(--g));
  animation: nx-pulse 3.2s ease-in-out infinite;
}

:root[data-style="neon"] .list-row {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  transition:
    border-color 180ms var(--ease),
    transform 220ms var(--spring),
    box-shadow 180ms var(--ease);
}
:root[data-style="neon"] .list-row:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  transform: translateX(3px);
  box-shadow: var(--glow-sm);
}
:root[data-style="neon"] .table-wrap {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--panel);
  overflow-x: auto;
}
:root[data-style="neon"] th {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
:root[data-style="neon"] tbody tr {
  transition: background-color 160ms var(--ease);
}
:root[data-style="neon"] tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
:root[data-style="neon"] .empty-state {
  border-radius: var(--r-md);
  border: 1px dashed var(--line-strong);
  background: transparent;
}

/* ================= shell ================= */

:root[data-style="neon"] .sidebar {
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
}
:root[data-style="neon"] .brand-mark {
  border-radius: 12px;
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: var(--glow-md);
  animation: nx-breathe 3.6s ease-in-out infinite;
}
:root[data-style="neon"] .brand-title {
  font-weight: 750;
  letter-spacing: -0.01em;
}
:root[data-style="neon"] .nav-item {
  position: relative;
  min-height: 42px;
  border: 0;
  border-radius: var(--r-sm);
  font-weight: 540;
  letter-spacing: 0;
  text-transform: none;
  transition:
    background-color 160ms var(--ease),
    color 160ms var(--ease),
    transform 220ms var(--spring);
}
:root[data-style="neon"] .nav-item:hover {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  transform: translateX(3px);
}
:root[data-style="neon"] .nav-item[aria-current="page"] {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 20%, transparent),
    transparent 90%
  );
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--neon);
}
:root[data-style="neon"] .nav-item[aria-current="page"] .icon {
  color: var(--neon);
  filter: drop-shadow(0 0 calc(5px * var(--g)) var(--neon));
}
:root[data-style="neon"][data-theme="light"]
  .nav-item[aria-current="page"]
  .icon {
  color: var(--accent);
  filter: none;
}
:root[data-style="neon"] .topbar {
  position: sticky;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}
/* The thread of light under the header. */
:root[data-style="neon"] .topbar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 40%;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--neon), transparent);
  opacity: calc(0.35 + 0.65 * var(--g));
  will-change: transform;
  animation: nx-line 5.5s linear infinite;
}
:root[data-style="neon"] .content {
  padding-block: 28px;
}
:root[data-style="neon"] .app-view:not([hidden]) {
  animation: nx-view-in 420ms var(--spring) both;
}

/* Cards arrive one after another. */
:root[data-style="neon"] .home-board > *,
:root[data-style="neon"] .progress-stats > *,
:root[data-style="neon"] .about-grid > *,
:root[data-style="neon"] .card-list > *,
:root[data-style="neon"] .world-grid > * {
  animation: nx-pop 460ms var(--spring) both;
  animation-delay: calc(var(--nx-i, 0) * 45ms);
}
:root[data-style="neon"]
  :is(.home-board, .progress-stats, .about-grid, .card-list, .world-grid)
  > :nth-child(2) {
  --nx-i: 1;
}
:root[data-style="neon"]
  :is(.home-board, .progress-stats, .about-grid, .card-list, .world-grid)
  > :nth-child(3) {
  --nx-i: 2;
}
:root[data-style="neon"]
  :is(.home-board, .progress-stats, .about-grid, .card-list, .world-grid)
  > :nth-child(4) {
  --nx-i: 3;
}
:root[data-style="neon"]
  :is(.home-board, .progress-stats, .about-grid, .card-list, .world-grid)
  > :nth-child(5) {
  --nx-i: 4;
}
:root[data-style="neon"]
  :is(.home-board, .progress-stats, .about-grid, .card-list, .world-grid)
  > :nth-child(6) {
  --nx-i: 5;
}
:root[data-style="neon"]
  :is(.home-board, .progress-stats, .about-grid, .card-list, .world-grid)
  > :nth-child(n + 7) {
  --nx-i: 6;
}

/* ================= controls ================= */

:root[data-style="neon"] .btn,
:root[data-style="neon"] .icon-btn,
:root[data-style="neon"] .table-action {
  border-radius: var(--r-pill);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  transition:
    transform 220ms var(--spring),
    box-shadow 200ms var(--ease),
    border-color 160ms var(--ease),
    background-color 160ms var(--ease);
}
:root[data-style="neon"] .btn:hover,
:root[data-style="neon"] .icon-btn:hover,
:root[data-style="neon"] .table-action:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  box-shadow: var(--glow-sm);
}
:root[data-style="neon"] .btn:active,
:root[data-style="neon"] .icon-btn:active {
  transform: translateY(0) scale(0.98);
}
:root[data-style="neon"] .btn--primary {
  border-color: transparent;
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: var(--glow-sm);
}
:root[data-style="neon"] .btn--primary:hover {
  border-color: transparent;
  box-shadow: var(--glow-lg);
  filter: brightness(1.08);
}
:root[data-style="neon"] .btn--ghost,
:root[data-style="neon"] .btn--soft {
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--text);
}
:root[data-style="neon"] .btn--danger {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--line));
}
:root[data-style="neon"] .btn:focus-visible,
:root[data-style="neon"] .icon-btn:focus-visible,
:root[data-style="neon"] .nav-item:focus-visible,
:root[data-style="neon"] .workspace-tab:focus-visible,
:root[data-style="neon"] .check-chip:focus-within {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
}

:root[data-style="neon"] input,
:root[data-style="neon"] select,
:root[data-style="neon"] textarea,
:root[data-style="neon"] .input,
:root[data-style="neon"] .select,
:root[data-style="neon"] .textarea {
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--field);
  color: var(--text);
  transition:
    border-color 160ms var(--ease),
    box-shadow 200ms var(--ease);
}
:root[data-style="neon"] input:focus-visible,
:root[data-style="neon"] select:focus-visible,
:root[data-style="neon"] textarea:focus-visible {
  outline: none;
  border-color: var(--neon);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent),
    var(--glow-sm);
}
:root[data-style="neon"] input::placeholder,
:root[data-style="neon"] textarea::placeholder {
  color: var(--faint);
}
:root[data-style="neon"] input[type="radio"],
:root[data-style="neon"] input[type="checkbox"] {
  accent-color: var(--accent);
}

:root[data-style="neon"] .segmented {
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--panel-soft);
  padding: 3px;
}
:root[data-style="neon"] .segmented button {
  border-radius: var(--r-pill);
  transition:
    background-color 180ms var(--ease),
    box-shadow 200ms var(--ease);
}
:root[data-style="neon"] .segmented button.is-active,
:root[data-style="neon"] .study-status-control .seg.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  box-shadow: var(--glow-sm);
}
:root[data-style="neon"] .pill,
:root[data-style="neon"] .status-pill,
:root[data-style="neon"] .role-pill,
:root[data-style="neon"] .chip {
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  letter-spacing: 0;
  text-transform: none;
}
:root[data-style="neon"] .chip--xp {
  color: var(--text);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--glow-sm);
  animation: nx-pulse 3.2s ease-in-out infinite;
}
:root[data-style="neon"] .chip--button:hover {
  box-shadow: var(--glow-sm);
}
:root[data-style="neon"] .status-pill::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-end: 6px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 calc(8px * var(--g)) var(--neon);
  vertical-align: 1px;
}
:root[data-style="neon"] .study-status.is-known {
  box-shadow: 0 0 calc(10px * var(--g)) -3px var(--success);
}

/* Progress: bars fill with a lit head. */
:root[data-style="neon"] .bar-track {
  border-radius: var(--r-pill);
  background: var(--panel-soft);
  overflow: hidden;
}
:root[data-style="neon"] .bar-fill {
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 calc(12px * var(--g)) -2px var(--neon);
  animation: nx-bar-in 700ms var(--spring) both;
  transform-origin: left center;
}

/* Skeletons shimmer with a hint of colour. */
:root[data-style="neon"] .skeleton {
  background: linear-gradient(
    105deg,
    var(--line-soft) 25%,
    color-mix(in srgb, var(--accent) 16%, transparent) 45%,
    var(--line-soft) 65%
  );
  background-size: 240% 100%;
}

/* ================= overlays ================= */

:root[data-style="neon"] .dialog-card {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
  background: var(--panel);
  box-shadow: var(--shadow-card), var(--glow-md);
  animation: nx-modal 320ms var(--spring) both;
}
:root[data-style="neon"] dialog::backdrop {
  background: var(--scrim);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
:root[data-style="neon"] .toast {
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  box-shadow: var(--shadow-card), var(--glow-md);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
:root[data-style="neon"] .bottom-nav {
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}
:root[data-style="neon"] .bottom-nav button {
  position: relative;
  border: 0;
  border-radius: var(--r-md);
}
:root[data-style="neon"] .bottom-nav button.is-active {
  background: transparent;
  color: var(--text);
}
:root[data-style="neon"] .bottom-nav button.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22%;
  right: 22%;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--neon);
  box-shadow: 0 0 calc(10px * var(--g)) var(--neon);
}

/* ================= workspace and accents ================= */

:root[data-style="neon"] .workspace-tab.is-active {
  border-bottom-color: var(--neon);
  text-shadow: 0 0 calc(12px * var(--g))
    color-mix(in srgb, var(--neon) 60%, transparent);
}
:root[data-style="neon"][data-theme="light"] .workspace-tab.is-active {
  text-shadow: none;
}
:root[data-style="neon"] .accent-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(56px, 1fr));
  gap: 8px 6px;
}
:root[data-style="neon"] .accent-swatch {
  width: 28px;
  height: 28px;
  margin: 0 auto 22px;
  border-radius: 50%;
  border: 2px solid var(--panel);
  box-shadow: 0 0 0 1px var(--line-strong);
  transition:
    transform 220ms var(--spring),
    box-shadow 200ms var(--ease);
}
:root[data-style="neon"] .accent-swatch:hover {
  transform: scale(1.12);
  box-shadow:
    0 0 0 1px var(--line-strong),
    0 0 calc(14px * var(--g)) var(--swatch);
}
:root[data-style="neon"] .accent-swatch::before {
  content: attr(title);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: 58px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  pointer-events: none;
}
:root[data-style="neon"] .accent-swatch.is-active {
  box-shadow:
    0 0 0 2px var(--panel),
    0 0 0 4px var(--swatch),
    0 0 calc(16px * var(--g)) var(--swatch);
}
:root[data-style="neon"] .accent-swatch.is-active::before {
  color: var(--text);
  font-weight: 650;
}
:root[data-style="neon"] .accent-swatch.is-active::after {
  display: none;
}
:root[data-style="neon"] .setting-row:has(.accent-picker) {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
:root[data-style="neon"] .pricing-card,
:root[data-style="neon"] .auth-card {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background-color: var(--panel);
  box-shadow: var(--shadow-card);
}
:root[data-style="neon"] .pricing-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: var(--shadow-card), var(--glow-md);
}

/* ================= keyframes ================= */

@keyframes nx-drift-a {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(7vw, 5vh, 0) scale(1.14);
  }
}
@keyframes nx-drift-b {
  from {
    transform: translate3d(0, 0, 0) scale(1.1);
  }
  to {
    transform: translate3d(-6vw, 7vh, 0) scale(0.94);
  }
}
@keyframes nx-drift-c {
  from {
    transform: translate3d(0, 0, 0) scale(0.9);
  }
  to {
    transform: translate3d(5vw, -6vh, 0) scale(1.16);
  }
}
@keyframes nx-floor {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(64px);
  }
}
@keyframes nx-scan {
  from {
    transform: translateY(-30vh);
  }
  to {
    transform: translateY(110vh);
  }
}
@keyframes nx-line {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(150%, 0, 0);
  }
}
@keyframes nx-spin {
  to {
    --nx-ang: 360deg;
  }
}
@keyframes nx-view-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes nx-pop {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes nx-modal {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes nx-bar-in {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes nx-breathe {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.18);
  }
}
@keyframes nx-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.78;
  }
}

/* ================= vivid shell: top bar, side bar, titles =================
   The cabinet speaks the landing page's language: deep glass, one light that
   runs along the top bar, gradient headings, glowing controls. Only transform
   and opacity move. */

:root[data-style="neon"] .topbar {
  min-height: 76px;
  padding-inline: clamp(16px, 2.4vw, 32px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(
      60% 140% at 12% -40%,
      color-mix(in srgb, var(--accent) 20%, transparent),
      transparent 70%
    ),
    radial-gradient(
      50% 140% at 92% -50%,
      color-mix(in srgb, var(--accent-2) 16%, transparent),
      transparent 70%
    ),
    color-mix(in srgb, var(--bg) 82%, transparent);
  box-shadow: 0 24px 60px -40px
    color-mix(in srgb, var(--accent) 60%, transparent);
}
:root[data-style="neon"] .topbar-title {
  display: grid;
  gap: 2px;
}
:root[data-style="neon"] .topbar-title small {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-readable, var(--accent));
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
:root[data-style="neon"] .topbar-title small::before {
  content: "";
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 calc(8px * var(--g)) var(--accent);
}
:root[data-style="neon"] .topbar-title h1 {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  background: linear-gradient(
    100deg,
    var(--text) 0%,
    var(--text) 40%,
    color-mix(in srgb, var(--accent) 75%, var(--text)) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (min-width: 768px) and (max-width: 1023px) {
  :root[data-style="neon"] .topbar-title h1 {
    font-size: 20px;
    line-height: 1.12;
  }
}
@media (max-width: 767px) {
  :root[data-style="neon"] .topbar-title h1 {
    font-size: 18px;
    line-height: 1.12;
  }
}
:root[data-style="neon"] .topbar-actions {
  gap: 10px;
}
:root[data-style="neon"] .topbar .icon-btn,
:root[data-style="neon"] .topbar .quick-control {
  width: 42px;
  height: 42px;
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  background:
    radial-gradient(
      circle at 30% 25%,
      color-mix(in srgb, var(--accent) 22%, transparent),
      transparent 70%
    ),
    var(--panel-soft);
  box-shadow: 0 0 calc(14px * var(--g)) -4px
    color-mix(in srgb, var(--accent) 60%, transparent);
}
:root[data-style="neon"] .topbar .icon-btn:hover {
  border-color: var(--accent);
  box-shadow: 0 0 calc(24px * var(--g)) -2px
    color-mix(in srgb, var(--accent) 75%, transparent);
  transform: translateY(-2px) scale(1.05);
}
:root[data-style="neon"] .topbar .segmented {
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
  box-shadow: 0 0 calc(16px * var(--g)) -6px
    color-mix(in srgb, var(--accent) 55%, transparent);
}
/* the light on the top bar is brighter and has a head */
:root[data-style="neon"] .topbar::after {
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent) 45%,
    #fff 70%,
    var(--accent-2) 85%,
    transparent
  );
  box-shadow: 0 0 calc(14px * var(--g)) var(--accent);
}

/* side bar: a glass column, an indicator that glows on the current page */
:root[data-style="neon"] .sidebar {
  background:
    radial-gradient(
      120% 40% at 0% 0%,
      color-mix(in srgb, var(--accent) 16%, transparent),
      transparent 70%
    ),
    color-mix(in srgb, var(--panel) 92%, transparent);
  border-right: 1px solid var(--line);
}
:root[data-style="neon"] .brand-title {
  font-size: 17px;
  background: linear-gradient(100deg, var(--text), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root[data-style="neon"] .nav-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
:root[data-style="neon"] .nav-group-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}
:root[data-style="neon"] .nav-item {
  min-height: 42px;
  overflow: hidden;
}
:root[data-style="neon"] .nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 calc(12px * var(--g)) var(--accent);
  transform: scaleY(0);
  transition: transform 320ms var(--spring);
}
:root[data-style="neon"] .nav-item[aria-current="page"]::after {
  transform: scaleY(1);
}
:root[data-style="neon"] .nav-item[aria-current="page"] {
  box-shadow: none;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 26%, transparent),
    color-mix(in srgb, var(--accent-2) 8%, transparent) 70%,
    transparent
  );
}
:root[data-style="neon"] .nav-item .icon {
  transition:
    transform 260ms var(--spring),
    color 160ms var(--ease);
}
:root[data-style="neon"] .nav-item:hover .icon {
  transform: scale(1.18) rotate(-6deg);
}

/* page headings: gradient and a soft light */
:root[data-style="neon"] .view-head h2 {
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(
    100deg,
    var(--text) 30%,
    color-mix(in srgb, var(--accent) 80%, var(--text))
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(
    0 0 calc(18px * var(--g)) color-mix(in srgb, var(--accent) 35%, transparent)
  );
}
:root[data-style="neon"][data-theme="light"] .view-head h2 {
  filter: none;
}
:root[data-style="neon"] .home-card-head h3 {
  color: var(--accent-readable, var(--accent));
}
:root[data-style="neon"] .home-focus {
  font-weight: 800;
  letter-spacing: -0.03em;
}
/* the primary buttons shine once when the pointer arrives */
:root[data-style="neon"] .btn--primary {
  position: relative;
  overflow: hidden;
}
:root[data-style="neon"] .btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgb(255 255 255 / 45%) 50%,
    transparent 65%
  );
  transform: translate3d(-120%, 0, 0);
  transition: transform 700ms var(--ease);
  pointer-events: none;
}
:root[data-style="neon"] .btn--primary:hover::after {
  transform: translate3d(120%, 0, 0);
}

@media (max-width: 560px) {
  /* the one-line kicker would wrap over the title on a phone */
  :root[data-style="neon"] .topbar-title small {
    display: none;
  }
  :root[data-style="neon"] .topbar {
    min-height: 64px;
  }
}

/* hero panels (teacher, admin): aurora glass with a light that crosses it */
:root[data-style="neon"] .hero {
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: var(--r-lg);
  background:
    radial-gradient(
      70% 130% at 0% 0%,
      color-mix(in srgb, var(--accent) 26%, transparent),
      transparent 65%
    ),
    radial-gradient(
      60% 130% at 100% 100%,
      color-mix(in srgb, var(--accent-2) 22%, transparent),
      transparent 65%
    ),
    var(--panel);
  box-shadow:
    var(--shadow-card),
    var(--glow-md),
    inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}
:root[data-style="neon"] .hero--admin,
:root[data-style="neon"] .hero--teacher {
  background:
    radial-gradient(
      70% 130% at 0% 0%,
      color-mix(in srgb, var(--accent) 26%, transparent),
      transparent 65%
    ),
    radial-gradient(
      60% 130% at 100% 100%,
      color-mix(in srgb, var(--accent-2) 22%, transparent),
      transparent 65%
    ),
    var(--panel);
}
:root[data-style="neon"] .hero::after {
  width: 40%;
  height: 100%;
  right: auto;
  left: 0;
  top: 0;
  border-radius: 0;
  filter: none;
  background: linear-gradient(
    105deg,
    transparent 30%,
    color-mix(in srgb, #fff 14%, transparent) 50%,
    transparent 70%
  );
  transform: translate3d(-120%, 0, 0);
  animation: nx-hero-sweep 9s ease-in-out 1.2s infinite;
}
:root[data-style="neon"] .hero-title {
  letter-spacing: -0.05em;
  background: linear-gradient(
    100deg,
    var(--text) 35%,
    color-mix(in srgb, var(--accent) 80%, var(--text))
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@keyframes nx-hero-sweep {
  0%,
  55% {
    transform: translate3d(-120%, 0, 0);
  }
  100% {
    transform: translate3d(330%, 0, 0);
  }
}

/* ================= tab strips: a glass rail with a light that slides ================= */
/* Vocabulary / Phrases, Homework / Quests / Speaking and the student workspace.
   tabs-fx.js adds one <i class="tabs-ink"> and sets --x / --w on it. */

:root[data-style="neon"] :is(.words-tabs, .workspace-tabs) {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  gap: 2px;
  max-width: 100%;
  margin-top: 0;
  padding: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--r-pill);
  background:
    radial-gradient(
      80% 160% at 50% -60%,
      color-mix(in srgb, var(--accent) 18%, transparent),
      transparent 70%
    ),
    var(--panel-soft);
  box-shadow:
    0 0 calc(26px * var(--g)) -12px
      color-mix(in srgb, var(--accent) 70%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}
:root[data-style="neon"] :is(.words-tabs, .workspace-tabs)::-webkit-scrollbar {
  display: none;
}
:root[data-style="neon"] .words-tabs {
  display: flex;
  width: fit-content;
}
:root[data-style="neon"] .tabs-ink {
  position: absolute;
  z-index: -1;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: var(--w, 0);
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:
    0 0 calc(22px * var(--g)) color-mix(in srgb, var(--accent) 70%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 35%);
  transform: translate3d(var(--x, 0), 0, 0);
  transition:
    transform 560ms var(--spring),
    width 560ms var(--spring),
    opacity 200ms var(--ease);
  overflow: hidden;
}
/* a highlight crosses the light now and then */
:root[data-style="neon"] .tabs-ink::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgb(255 255 255 / 42%) 50%,
    transparent 70%
  );
  transform: translate3d(-120%, 0, 0);
  animation: nx-ink-sheen 5.5s ease-in-out 1s infinite;
}
:root[data-style="neon"] :is(.words-tabs, .workspace-tabs) > button {
  position: relative;
  flex: 1 0 auto;
  min-height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition:
    color 220ms var(--ease),
    transform 260ms var(--spring);
}
:root[data-style="neon"] :is(.words-tabs, .workspace-tabs) > button:hover {
  color: var(--text);
  transform: translateY(-1px);
  background: transparent;
  box-shadow: none;
  border-color: transparent;
}
:root[data-style="neon"] :is(.words-tabs, .workspace-tabs) > button:active {
  transform: scale(0.96);
}
:root[data-style="neon"]
  :is(.words-tabs, .workspace-tabs)
  > :is([aria-current="page"], .is-active, [aria-pressed="true"]) {
  color: var(--on-accent);
  background: transparent;
  box-shadow: none;
  text-shadow: none;
  font-weight: 750;
  border-bottom: 0;
}
:root[data-style="neon"] .workspace-tabs {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  margin-top: 16px;
}
:root[data-style="neon"] .workspace-tabs > button {
  flex: 1 0 auto;
  padding: 0 12px;
}
@keyframes nx-ink-sheen {
  0%,
  60% {
    transform: translate3d(-120%, 0, 0);
  }
  100% {
    transform: translate3d(120%, 0, 0);
  }
}
@media (max-width: 767px) {
  :root[data-style="neon"] .words-tabs {
    display: flex;
    width: 100%;
  }
  :root[data-style="neon"] :is(.words-tabs, .workspace-tabs) {
    padding: 3px;
  }
  :root[data-style="neon"] .tabs-ink {
    top: 3px;
    bottom: 3px;
  }
  :root[data-style="neon"] :is(.words-tabs, .workspace-tabs) > button {
    min-height: 44px;
  }
  :root[data-style="neon"] .words-tabs > button {
    padding: 0 10px;
    font-size: 13px;
  }
}

/* ================= Apple neon: iridescent light, cascades, springs =================
   Added on purpose beyond the old "glow only on interactive things" canon:
   one iridescent third hue, headings and hero panels that slowly flow, cards
   that cascade in, buttons that press like glass. At rest only the focal
   element of a screen moves; everything else lights up on hover/focus. */

:root[data-style="neon"] {
  --nx-iris: #ff7ad9;
}
:root[data-style="neon"][data-theme="light"] {
  --nx-iris: #c2409e;
}

/* headings: accent -> second hue -> iris, drifting slowly (one h2 per screen) */
@keyframes nx-flow {
  to {
    background-position: 200% 0;
  }
}
:root[data-style="neon"] .view-head h2,
:root[data-style="neon"] .hero-title {
  background-image: linear-gradient(
    100deg,
    var(--text) 8%,
    color-mix(in srgb, var(--accent) 85%, var(--text)) 30%,
    color-mix(in srgb, var(--accent-2) 85%, var(--text)) 52%,
    color-mix(in srgb, var(--nx-iris) 80%, var(--text)) 70%,
    var(--text) 92%
  );
  background-size: 200% 100%;
  animation: nx-flow 12s linear infinite;
}

/* cards cascade in; `backwards` so hover transforms are not held by the animation */
:root[data-style="neon"]
  .app-view:not([hidden])
  :is(.home-card, .progress-stat, .stat-card) {
  animation: nx-pop 520ms var(--spring) backwards;
}
:root[data-style="neon"]
  .app-view:not([hidden])
  :is(.home-card, .progress-stat, .stat-card):nth-child(2) {
  animation-delay: 70ms;
}
:root[data-style="neon"]
  .app-view:not([hidden])
  :is(.home-card, .progress-stat, .stat-card):nth-child(3) {
  animation-delay: 140ms;
}
:root[data-style="neon"]
  .app-view:not([hidden])
  :is(.home-card, .progress-stat, .stat-card):nth-child(4) {
  animation-delay: 210ms;
}
:root[data-style="neon"]
  .app-view:not([hidden])
  :is(.home-card, .progress-stat, .stat-card):nth-child(5) {
  animation-delay: 280ms;
}
:root[data-style="neon"]
  .app-view:not([hidden])
  :is(.home-card, .progress-stat, .stat-card):nth-child(n + 6) {
  animation-delay: 350ms;
}

/* big numbers hold a soft pulse of light once they have counted up */
@keyframes nx-num-glow {
  50% {
    text-shadow:
      0 0 calc(22px * var(--g))
        color-mix(in srgb, var(--accent) 80%, transparent),
      0 0 calc(44px * var(--g))
        color-mix(in srgb, var(--nx-iris) 45%, transparent);
  }
}
:root[data-style="neon"] .stat-value[data-counted],
:root[data-style="neon"] .progress-stat-value[data-counted] {
  animation: nx-num-glow 1.6s ease-out 1;
}

/* hero panels: an iridescent edge that runs around the glass */
:root[data-style="neon"] .hero,
:root[data-style="neon"] .practice-hero {
  --nx-edge: conic-gradient(
    from var(--nx-ang),
    transparent 0 55%,
    var(--accent) 72%,
    var(--nx-iris) 86%,
    var(--accent-2) 94%,
    transparent 100%
  );
}
:root[data-style="neon"] .hero {
  position: relative;
  isolation: isolate;
}
:root[data-style="neon"] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: var(--nx-edge);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: calc(0.4 + 0.6 * var(--g));
  animation: nx-spin 9s linear infinite;
  pointer-events: none;
}

/* buttons: lift on hover, squash like glass under the finger, springy release */
:root[data-style="neon"] .btn--primary {
  background-image: linear-gradient(
    120deg,
    var(--accent),
    var(--accent-2) 55%,
    color-mix(in srgb, var(--nx-iris) 80%, var(--accent-2))
  );
  background-size: 160% 100%;
  background-position: 0 0;
  transition:
    transform 260ms var(--spring),
    box-shadow 200ms var(--ease),
    filter 200ms var(--ease),
    background-position 500ms var(--ease);
}
:root[data-style="neon"] .btn--primary:hover {
  transform: translateY(-2px);
  background-position: 100% 0;
  box-shadow:
    var(--glow-lg),
    0 0 calc(34px * var(--g)) -6px
      color-mix(in srgb, var(--nx-iris) 70%, transparent);
}
:root[data-style="neon"] .btn:active {
  transform: translateY(0) scale(0.95);
  transition-duration: 90ms;
}
:root[data-style="neon"] .btn--primary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--bg) 70%, transparent),
    0 0 0 5px var(--accent),
    var(--glow-lg);
}

/* the sidebar's current item keeps a steady glowing marker */
:root[data-style="neon"] .nav-item[aria-current="page"] {
  box-shadow:
    inset 3px 0 0 var(--neon),
    0 0 calc(20px * var(--g)) -6px var(--neon);
}

/* glass top bar: the page glows through it, like vibrancy */
:root[data-style="neon"] .topbar {
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
}

/* ================= off switches ================= */

@media (prefers-reduced-motion: reduce) {
  :root[data-style="neon"] *,
  :root[data-style="neon"] *::before,
  :root[data-style="neon"] *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  :root[data-style="neon"] .bg-blob,
  :root[data-style="neon"] .bg-floor,
  :root[data-style="neon"] .bg-scan,
  :root[data-style="neon"] .bg-cursor {
    display: none;
  }
}
:root[data-style="neon"][data-anim="off"] *,
:root[data-style="neon"][data-anim="off"] *::before,
:root[data-style="neon"][data-anim="off"] *::after {
  animation: none !important;
  transition-duration: 0.01ms !important;
}
:root[data-style="neon"][data-anim="off"] .bg-blob,
:root[data-style="neon"][data-anim="off"] .bg-floor,
:root[data-style="neon"][data-anim="off"] .bg-scan,
:root[data-style="neon"][data-anim="off"] .bg-cursor {
  display: none;
}

@media (max-width: 767px) {
  :root[data-style="neon"] .ios-section,
  :root[data-style="neon"] .study-card,
  :root[data-style="neon"] .home-card {
    padding: 16px;
  }
  :root[data-style="neon"] .content {
    padding-block: 18px;
  }
}

@media (max-width: 767px) {
  :root[data-style="neon"] .accent-swatch {
    margin-bottom: 34px;
  }
}