:root {
  color-scheme: light;
  --bg: #f7f8fa;
  --surface: #ffffff;
  --border: #e6e8ec;
  --text: #111827;
  --text-2: #374151;
  --text-3: #6b7280;
  --primary-600: #3b4bff;
  --primary-500: #4f7cff;
  --primary-100: #e9eeff;
  --violet-600: #7c3aed;
  --violet-100: #f3e8ff;
  --success-600: #22c55e;
  --success-100: #dcfce7;
  --shadow-soft: 0 10px 30px rgba(17, 24, 39, 0.07);
  --shadow-glow: 0 0 0 1px rgba(59, 75, 255, 0.2), 0 16px 40px rgba(59, 75, 255, 0.14);
}

body {
  background: var(--bg);
  color: var(--text);
}

.noise {
  background-image:
    radial-gradient(1200px 600px at 20% 0%, rgba(79, 124, 255, 0.1), transparent 60%),
    radial-gradient(1000px 600px at 80% 8%, rgba(124, 58, 237, 0.06), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(247, 248, 250, 0.4));
}

.gridlines {
  background-image:
    linear-gradient(to right, rgba(17, 24, 39, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 24, 39, 0.025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(60% 58% at 50% 10%, black 58%, transparent 100%);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.stroke {
  border: 1px solid var(--border);
}

.shine {
  position: relative;
  overflow: hidden;
}

.shine::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(560px 260px at 18% 0%, rgba(79, 124, 255, 0.15), transparent 66%),
    radial-gradient(420px 240px at 88% 2%, rgba(124, 58, 237, 0.1), transparent 62%);
  pointer-events: none;
}

.progress-track {
  background: #eef1f5;
}

.progress-bar {
  background: linear-gradient(90deg, var(--primary-600), var(--violet-600));
  animation: processing 2.4s ease-in-out infinite;
}

@keyframes processing {
  0% { width: 18%; }
  50% { width: 76%; }
  100% { width: 42%; }
}

.demo-chip {
  border: 1px solid var(--border);
  background: #f9fafb;
  color: var(--text-2);
}

.demo-chip.is-active {
  border-color: rgba(34, 197, 94, 0.35);
  background: var(--success-100);
  color: #15803d;
}

.toggle-pill {
  border: 1px solid var(--border);
  background: #f3f4f6;
}

.toggle-option {
  color: var(--text-3);
}

.toggle-option[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08);
}

.share-panel[hidden] {
  display: none;
}

.formatted-app {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff, #fbfcff);
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    animation: none;
    width: 64%;
  }
}