:root {
  --background: 38 45% 97%;
  --foreground: 252 32% 15%;
  --primary: 265 88% 58%;
  --secondary: 28 95% 62%;
  --muted: 32 28% 90%;
  --destructive: 0 78% 58%;
  --border: 252 18% 84%;
  --card: 0 0% 100%;
  --shadow-sm: 0 6px 18px hsla(265, 60%, 35%, 0.08);
  --shadow-md: 0 16px 40px hsla(265, 60%, 25%, 0.14);
  --shadow-lg: 0 26px 70px hsla(265, 80%, 25%, 0.22);
  --transition-fast: 120ms ease;
  --transition-smooth: 220ms cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
}

.dark {
  --background: 249 26% 10%;
  --foreground: 36 60% 96%;
  --primary: 271 92% 68%;
  --secondary: 29 92% 64%;
  --muted: 249 18% 18%;
  --destructive: 0 72% 62%;
  --border: 248 16% 24%;
  --card: 247 24% 14%;
  --shadow-sm: 0 8px 18px hsla(0, 0%, 0%, 0.2);
  --shadow-md: 0 20px 44px hsla(0, 0%, 0%, 0.28);
  --shadow-lg: 0 28px 80px hsla(0, 0%, 0%, 0.38);
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  background:
    radial-gradient(circle at top left, hsla(28, 95%, 62%, 0.16), transparent 28%),
    radial-gradient(circle at top right, hsla(265, 88%, 58%, 0.18), transparent 34%),
    hsl(var(--background));
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

::selection {
  background: hsla(265, 88%, 58%, 0.2);
}

.card-sheen {
  position: relative;
  overflow: hidden;
}

.card-sheen::before {
  content: '';
  position: absolute;
  inset: -120% auto auto -30%;
  width: 60%;
  height: 260%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.35), transparent);
  pointer-events: none;
}

.slot-window {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0.48), transparent), hsl(var(--card));
}

.slot-window::before,
.slot-window::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 22%;
  z-index: 2;
  pointer-events: none;
}

.slot-window::before {
  top: 0;
  background: linear-gradient(180deg, hsl(var(--card)), transparent);
}

.slot-window::after {
  bottom: 0;
  background: linear-gradient(0deg, hsl(var(--card)), transparent);
}

.slot-center-line {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  height: 64px;
  border-radius: 16px;
  border: 2px solid hsla(265, 88%, 58%, 0.28);
  background: hsla(265, 88%, 58%, 0.06);
  z-index: 1;
  pointer-events: none;
}

.slot-strip {
  transition: transform 2400ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.glow-ring {
  box-shadow:
    0 0 0 1px hsla(265, 88%, 58%, 0.16),
    0 0 0 10px hsla(265, 88%, 58%, 0.05),
    var(--shadow-md);
}

.insight-bar {
  height: 10px;
  border-radius: 999px;
  background: hsla(252, 18%, 70%, 0.18);
  overflow: hidden;
}

.insight-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, hsla(28, 95%, 62%, 0.9), hsla(265, 88%, 58%, 0.95));
}

.surface-blur {
  backdrop-filter: blur(14px);
}

@keyframes pulse-soft {
  0%,
  100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.pulse-soft {
  animation: pulse-soft 1.8s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, hsla(252, 18%, 78%, 0.16), hsla(252, 18%, 78%, 0.28), hsla(252, 18%, 78%, 0.16));
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

.hash-nav-active {
  background: hsla(265, 88%, 58%, 0.12);
  color: hsl(var(--primary));
}

input:focus,
textarea:focus,
select:focus,
button:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px hsla(265, 88%, 58%, 0.18);
}

.fade-in {
  animation: fade-in 260ms var(--transition-smooth);
}

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