/* ════════════════════════════════════════════════════════════════════
   Hoang Long Vi — portfolio
   Dark engineer aesthetic: terminal × modern dev-tools landing.
   Zero external assets — system fonts only.
   Also styles every class emitted by public/js/ai-demo.js:
     ai-demo-msg[-user|-assistant|-error], ai-demo-bubble, ai-demo-interim,
     ai-demo-chips, ai-demo-chip[-tool|-tag|-error|-reset], ai-demo-streaming,
     tag-chip / .tag-hit (CRM tags side panel)

   Theming: every color is a custom property, mostly expressed as an
   "-rgb" triplet (e.g. --accent-rgb) so rgba(var(--x-rgb), alpha) call
   sites recolor automatically. Default theme below is "slop" (dark
   cyan/violet). A second theme, "sylveon" (white/pastel pink/pastel
   blue), lives in a single override block at the bottom of this file —
   see [data-theme="sylveon"]. Toggle is wired in public/js/theme.js.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #0a0e14;
  --bg-rgb: 10, 14, 20;
  --deep: #06090e;                 /* recessed panel base: terminal, tool cards, code wells */
  --deep-rgb: 6, 9, 14;
  --surface-rgb: 255, 255, 255;    /* tint added to raised elements: cards, chips, hairlines, grid */
  --well-rgb: 0, 0, 0;             /* tint for the deepest nested boxes: code/args blocks */
  --bg-raised: rgba(var(--surface-rgb), 0.035);
  --bg-raised-2: rgba(var(--surface-rgb), 0.06);
  --border: rgba(var(--surface-rgb), 0.09);
  --text: #e6edf3;
  --muted: #8b98a9;
  --dim: #5c6773;
  --accent: #22d3ee;      /* cyan */
  --accent-rgb: 34, 211, 238;
  --accent-2: #8b5cf6;    /* violet */
  --accent2-rgb: 139, 92, 246;
  --accent-soft: rgba(var(--accent-rgb), 0.12);
  --border-bright: rgba(var(--accent-rgb), 0.5);
  --good: #34d399;
  --good-rgb: 52, 211, 153;
  --warn: #fbbf24;
  --warn-rgb: 251, 191, 36;
  --bad: #f87171;
  --bad-rgb: 248, 113, 113;
  --on-accent: #06090e;    /* text sitting on top of the accent gradient buttons */
  --mono: "JetBrains Mono", "Cascadia Code", "Fira Code", Consolas, "SF Mono", ui-monospace, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 0.25s ease, color 0.25s ease;
}

::selection { background: rgba(var(--accent-rgb), 0.28); }

a { color: var(--accent); text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ── Background layers ─────────────────────────────────────────────── */
.bg-grid {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--surface-rgb), 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--surface-rgb), 0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%);
}
/* Pre-blurred radial gradients — same soft-glow look as filter:blur() but
   dramatically cheaper to composite (blur on huge fixed layers can freeze
   low-end GPUs / software rasterizers). */
.bg-glow {
  position: fixed; z-index: -3; pointer-events: none;
  width: 1100px; height: 1100px;
}
.bg-glow-1 {
  top: -420px; left: -340px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.13), transparent 62%);
}
.bg-glow-2 {
  top: 22vh; right: -460px;
  background: radial-gradient(circle, rgba(var(--accent2-rgb), 0.11), transparent 62%);
}

/* ── Nav ────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(var(--bg-rgb), 0.72);
  border-bottom: 1px solid rgba(var(--surface-rgb), 0.06);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  height: 62px;
}
.nav-logo {
  font-family: var(--mono); font-weight: 700; font-size: 1.05rem;
  color: var(--text); letter-spacing: 0.06em;
}
.nav-logo-cursor { color: var(--accent); animation: blink 1.1s steps(1) infinite; }
.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a {
  font-family: var(--mono); font-size: 0.82rem; color: var(--muted);
  letter-spacing: 0.02em; transition: color 0.18s;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--accent); }
.nav-link-demo { color: var(--accent) !important; }
.nav-link-demo::before { content: "◉ "; font-size: 0.6rem; vertical-align: 2px; animation: pulse-dot 2.2s ease-in-out infinite; }

/* Theme toggle pill */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 0.72rem; color: var(--muted);
  padding: 5px 6px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-raised);
  cursor: pointer; transition: border-color 0.18s, color 0.18s;
}
.theme-toggle:hover { border-color: var(--border-bright); color: var(--text); }
.theme-toggle-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); transition: background 0.2s;
}
.theme-toggle-label { white-space: nowrap; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── Shared type ────────────────────────────────────────────────────── */
.kicker {
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.05em;
  color: var(--accent); margin: 0 0 14px;
}
.section-title {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 750; letter-spacing: -0.02em;
  margin: 0 0 30px; line-height: 1.15;
}
.accent { color: var(--accent); }
.accent-2 { color: var(--accent-2); }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { padding: 96px 0 90px; }
.hero-name {
  font-family: var(--mono);
  font-size: clamp(3rem, 10vw, 6.4rem);
  font-weight: 800; line-height: 0.98; letter-spacing: -0.035em;
  margin: 0 0 22px;
  background: linear-gradient(100deg, var(--text) 15%, var(--accent) 55%, var(--accent-2) 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-role { font-size: clamp(1.05rem, 2.3vw, 1.35rem); font-weight: 600; margin: 0 0 10px; }
.hero-sub { color: var(--muted); max-width: 620px; margin: 0 0 34px; }

.terminal {
  max-width: 620px; border-radius: var(--radius-sm);
  background: rgba(var(--deep-rgb), 0.85);
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--accent-rgb), 0.05);
  overflow: hidden; margin: 0 0 36px;
}
.terminal-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px; border-bottom: 1px solid rgba(var(--surface-rgb), 0.06);
  background: rgba(var(--surface-rgb), 0.025);
}
.tdot { width: 11px; height: 11px; border-radius: 50%; }
.tdot-r { background: #ff5f57; } .tdot-y { background: #febc2e; } .tdot-g { background: #28c840; }
.terminal-title { margin-left: 10px; font-family: var(--mono); font-size: 0.72rem; color: var(--dim); }
.terminal-body { padding: 16px 18px 18px; font-family: var(--mono); font-size: 0.86rem; min-height: 200px; }
.terminal-line { white-space: pre-wrap; word-break: break-word; }
.t-prompt { color: var(--good); font-weight: 700; }
.t-cursor { color: var(--accent); animation: blink 0.9s steps(1) infinite; }
.terminal-out { margin-top: 6px; min-height: 1.4em; }
.t-out { color: var(--dim); line-height: 1.6; }

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 11px;
  font-family: var(--mono); font-size: 0.88rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s, background 0.16s;
}
.btn-primary {
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.28); }
.btn-ghost {
  background: transparent; color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--border-bright); transform: translateY(-2px); }
.btn-sm { padding: 8px 16px; font-size: 0.8rem; }
.btn-arrow { transition: transform 0.16s; }
.btn-primary:hover .btn-arrow { transform: translateX(3px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ── Sections ───────────────────────────────────────────────────────── */
.section { padding: 88px 0; border-top: 1px solid rgba(var(--surface-rgb), 0.045); }

/* ── About ──────────────────────────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; align-items: start; }
.about-text { color: var(--muted); font-size: 1.06rem; margin: 0; }
.about-text strong { color: var(--text); font-weight: 650; }
.about-stats { display: grid; gap: 14px; }
.stat {
  padding: 18px 20px; border-radius: var(--radius-sm);
  background: var(--bg-raised); border: 1px solid var(--border);
}
.stat-num { font-family: var(--mono); font-size: 1.7rem; font-weight: 800; color: var(--accent); line-height: 1.1; }
.stat-label { color: var(--muted); font-size: 0.85rem; margin-top: 4px; }

/* ── Cards ──────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--border-bright);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4), 0 0 24px rgba(var(--accent-rgb), 0.07);
}

/* ── Skills ─────────────────────────────────────────────────────────── */
.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.skill-title { font-family: var(--mono); font-size: 0.95rem; color: var(--text); margin: 0 0 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--mono); font-size: 0.74rem;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(var(--surface-rgb), 0.045);
  border: 1px solid rgba(var(--surface-rgb), 0.08);
  color: var(--muted); white-space: nowrap;
}

/* ── Featured work ──────────────────────────────────────────────────── */
.work-card { margin-bottom: 18px; }
.work-card-featured {
  border-color: rgba(var(--accent2-rgb), 0.35);
  background: linear-gradient(140deg, rgba(var(--accent-rgb), 0.05), rgba(var(--accent2-rgb), 0.05) 60%, var(--bg-raised));
}
.work-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.work-title { font-size: 1.25rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.badge {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted);
  white-space: nowrap;
}
.badge-live { border-color: rgba(var(--good-rgb), 0.4); color: var(--good); }
.badge-live::before { content: "● "; font-size: 0.55rem; vertical-align: 1px; animation: pulse-dot 2s ease-in-out infinite; }
.work-meta { font-family: var(--mono); font-size: 0.76rem; color: var(--dim); margin: 6px 0 14px; }
.work-points { margin: 0 0 18px; padding-left: 20px; color: var(--muted); }
.work-points li { margin-bottom: 6px; }
.work-desc { color: var(--muted); margin: 10px 0 16px; }
.work-tech { margin-bottom: 18px; }
.work-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.work-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ── AI demo ────────────────────────────────────────────────────────── */
.section-demo {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(var(--accent2-rgb), 0.07), transparent),
    transparent;
}
.demo-intro { color: var(--muted); max-width: 700px; margin: 0 0 30px; }
.demo-intro strong { color: var(--text); }

.demo-disclaimer {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 22px; padding: 14px 18px;
  border: 1px solid rgba(var(--warn-rgb), 0.35);
  border-radius: var(--radius-sm);
  background: rgba(var(--warn-rgb), 0.07);
}
.demo-disclaimer-icon { font-size: 1.15rem; line-height: 1.4; flex-shrink: 0; }
.demo-disclaimer p { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.6; }
.demo-disclaimer strong { color: var(--text); }

.demo-shell {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(var(--deep-rgb), 0.7);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.ai-demo-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(var(--surface-rgb), 0.06);
  background: rgba(var(--surface-rgb), 0.025);
  flex-wrap: wrap;
}
.demo-label { font-family: var(--mono); font-size: 0.78rem; color: var(--dim); }

.ai-demo-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-demo-tabs-loading, .ai-demo-tabs-empty {
  font-family: var(--mono); font-size: 0.78rem; color: var(--dim);
}
.ai-demo-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-family: inherit; text-align: left; cursor: pointer;
  background: var(--bg); color: var(--muted);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 7px 13px; max-width: 260px;
}
.ai-demo-tab:hover { color: var(--text); border-color: rgba(var(--accent-rgb), 0.4); }
.ai-demo-tab:focus-visible { border-color: var(--accent); outline: none; }
.ai-demo-tab__name { font-size: 0.85rem; font-weight: 600; color: inherit; }
.ai-demo-tab__feature {
  font-family: var(--mono); font-size: 0.68rem; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.ai-demo-tab--active {
  color: var(--text); border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.09);
}
.ai-demo-tab--active .ai-demo-tab__name { color: var(--accent); }
.ai-demo-status { font-family: var(--mono); font-size: 0.75rem; color: var(--warn); margin-left: auto; }

.demo-grid { display: grid; grid-template-columns: 1.7fr 1fr; min-height: 460px; }
.demo-chat { display: flex; flex-direction: column; border-right: 1px solid rgba(var(--surface-rgb), 0.06); }

/* Selected bot's domain + capabilities — sits above the transcript. */
.ai-demo-bot-info {
  margin: 16px 18px 0;
  padding: 12px 15px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.045);
}
.ai-demo-bot-info[hidden] { display: none; }
.ai-demo-bot-info__domain {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.02em;
  color: var(--accent); font-weight: 600; margin-bottom: 8px;
}
.ai-demo-bot-info__caps {
  margin: 0; padding-left: 18px;
  color: var(--muted); font-size: 0.82rem; line-height: 1.6;
}
.ai-demo-bot-info__caps li { margin-bottom: 2px; }

.ai-demo-messages {
  flex: 1; overflow-y: auto; padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
  max-height: 480px; min-height: 320px;
  scrollbar-width: thin; scrollbar-color: rgba(var(--surface-rgb), 0.15) transparent;
}
.ai-demo-messages:empty::before {
  content: "▍ start a conversation — tokens stream in live";
  font-family: var(--mono); font-size: 0.82rem; color: var(--dim);
  margin: auto;
}

.ai-demo-msg { display: flex; flex-direction: column; max-width: 88%; }
.ai-demo-msg-user { align-self: flex-end; align-items: flex-end; }
.ai-demo-msg-assistant { align-self: flex-start; }
.ai-demo-msg-error { align-self: center; }

.ai-demo-bubble {
  padding: 11px 15px; border-radius: 14px;
  white-space: pre-wrap; word-break: break-word;
  font-size: 0.94rem; line-height: 1.55;
}
.ai-demo-msg-user .ai-demo-bubble {
  background: linear-gradient(120deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent2-rgb), 0.16));
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-bottom-right-radius: 4px;
}
.ai-demo-msg-assistant .ai-demo-bubble {
  background: rgba(var(--surface-rgb), 0.045);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.ai-demo-msg-assistant .ai-demo-bubble:empty { display: none; }
.ai-demo-streaming .ai-demo-bubble:not(:empty)::after {
  content: "▍"; color: var(--accent);
  animation: blink 0.85s steps(1) infinite;
  margin-left: 2px;
}
.ai-demo-msg-error .ai-demo-bubble {
  background: rgba(var(--bad-rgb), 0.08);
  border: 1px solid rgba(var(--bad-rgb), 0.3);
  color: var(--bad); font-family: var(--mono); font-size: 0.8rem;
}

.ai-demo-interim {
  font-family: var(--mono); font-size: 0.76rem; font-style: italic;
  color: var(--dim); padding: 2px 4px 6px;
}
.ai-demo-interim[hidden] { display: none; }

.ai-demo-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 2px 0 8px; }
.ai-demo-chips:empty { display: none; }
.ai-demo-chip {
  font-family: var(--mono); font-size: 0.68rem;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted);
  background: rgba(var(--surface-rgb), 0.03);
}
.ai-demo-chip-reset { border-color: rgba(var(--accent2-rgb), 0.45); color: var(--accent-2); }
.ai-demo-chip-error { border-color: rgba(var(--bad-rgb), 0.4); color: var(--bad); }

/* Professional "agent action" tool-call card. */
.ai-tool-card {
  width: 100%;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: rgba(var(--deep-rgb), 0.55);
  padding: 9px 12px;
  font-family: var(--mono);
}
.ai-tool-card--sandbox { border-left-color: var(--warn); }
.ai-tool-card--exec { border-left-color: var(--good); }
.ai-tool-card__head { display: flex; align-items: center; gap: 8px; }
.ai-tool-card__icon { font-size: 0.82rem; }
.ai-tool-card--sandbox .ai-tool-card__icon { color: var(--warn); }
.ai-tool-card--exec .ai-tool-card__icon { color: var(--good); }
.ai-tool-card__name { font-size: 0.76rem; font-weight: 600; color: var(--text); letter-spacing: 0.02em; }
.ai-tool-card__badge {
  margin-left: auto; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.ai-tool-card--sandbox .ai-tool-card__badge { background: rgba(var(--warn-rgb), 0.14); color: var(--warn); }
.ai-tool-card--exec .ai-tool-card__badge { background: rgba(var(--good-rgb), 0.14); color: var(--good); }
.ai-tool-card__args {
  margin-top: 7px; font-size: 0.68rem; color: var(--muted);
  white-space: pre-wrap; word-break: break-word;
  background: rgba(var(--well-rgb), 0.28); padding: 6px 9px; border-radius: 6px;
}
.ai-tool-card__tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.ai-tool-tag {
  font-size: 0.66rem; padding: 3px 9px; border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
}

/* ── Pipeline trace column (server trace:true) ─────────────────────────────
   Compact mono "infer steps" — HyDE, RAG chunks, tools, vision, context inject
   — plus the gray-italic thinking stream. Deliberately dimmer than the reply. */
.ai-trace {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; padding: 2px 0 8px;
}
.ai-trace:empty { display: none; }

.ai-trace-step {
  width: 100%;
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent-2);
  border-radius: 8px;
  background: rgba(var(--deep-rgb), 0.4);
  padding: 7px 10px;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
}
.ai-trace-step--fail { border-left-color: var(--bad); }
.ai-trace-step__head { display: flex; align-items: center; gap: 7px; }
.ai-trace-step__icon { font-size: 0.76rem; }
.ai-trace-step__name { font-weight: 600; color: var(--text); font-size: 0.7rem; letter-spacing: 0.02em; }
.ai-trace-step__badge {
  margin-left: auto; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  background: rgba(var(--accent2-rgb), 0.14); color: var(--accent-2);
}
.ai-trace-step__badge--ok { background: rgba(var(--good-rgb), 0.14); color: var(--good); }
.ai-trace-step__badge--fail { background: rgba(var(--bad-rgb), 0.14); color: var(--bad); }
.ai-trace-step__args,
.ai-trace-step__note {
  margin-top: 6px; font-size: 0.66rem; color: var(--muted);
  white-space: pre-wrap; word-break: break-word;
  background: rgba(var(--well-rgb), 0.28); padding: 5px 8px; border-radius: 6px;
  max-height: 160px; overflow-y: auto;
}
.ai-trace-kws { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; }
.ai-trace-kw {
  font-size: 0.62rem; padding: 2px 8px; border-radius: 999px;
  background: rgba(var(--accent2-rgb), 0.1); border: 1px solid rgba(var(--accent2-rgb), 0.35);
  color: var(--accent-2);
}

/* Collapsible steps (RAG chunks, context inject, tool results). */
.ai-trace-details > summary,
.ai-trace-result > summary {
  cursor: pointer; user-select: none;
  font-size: 0.68rem; color: var(--muted); font-weight: 600;
  list-style: none;
}
.ai-trace-details > summary::before,
.ai-trace-result > summary::before {
  content: "▸ "; color: var(--accent-2);
}
.ai-trace-details[open] > summary::before,
.ai-trace-result[open] > summary::before {
  content: "▾ ";
}
.ai-trace-result { margin-top: 6px; }

.ai-trace-chunk {
  margin-top: 7px; padding: 6px 8px;
  background: rgba(var(--well-rgb), 0.28); border-radius: 6px;
  border-left: 2px solid rgba(var(--accent-rgb), 0.4);
}
.ai-trace-chunk__meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ai-trace-chunk__topic { font-size: 0.66rem; font-weight: 600; color: var(--accent); }
.ai-trace-chunk__score { font-size: 0.6rem; color: var(--dim); }
.ai-trace-chunk__snippet {
  margin-top: 4px; font-size: 0.64rem; color: var(--muted);
  white-space: pre-wrap; word-break: break-word;
  max-height: 90px; overflow-y: auto;
}

/* Thinking stream — gray italic, visibly "internal monologue". */
.ai-demo-thinking {
  font-family: var(--mono); font-size: 0.7rem; font-style: italic;
  color: var(--dim); line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
  padding: 6px 10px; border-left: 2px dashed var(--border); border-radius: 4px;
  max-height: 220px; overflow-y: auto;
}
.ai-demo-thinking:empty { display: none; }

/* ── Layer-3 draft → final (trace Phase 2) ─────────────────────────────────
   L1 bubble gets struck when L3 rewrites it; the draft streams in a dashed
   violet box, gets struck in turn, and the final bubble lands below. */
.ai-demo-bubble--struck {
  text-decoration: line-through;
  opacity: 0.45;
  transition: opacity 0.35s ease; /* làm mượt lúc bị gạch, không cắt phựt */
}
.ai-demo-bubble--struck::after { content: none !important; } /* no caret on struck text */
.ai-demo-bubble--final {
  margin-top: 6px;
  animation: draft-final-in 0.35s ease both; /* fade + trượt nhẹ khi bản cuối xuất hiện */
}
@keyframes draft-final-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.ai-demo-draft {
  margin-top: 6px; width: 100%;
  border: 1px dashed rgba(var(--accent2-rgb), 0.45);
  border-radius: 12px;
  background: rgba(var(--accent2-rgb), 0.06);
  padding: 8px 12px;
  animation: draft-final-in 0.25s ease both; /* khung biên tập trượt vào, không hiện phựt */
  transition: opacity 0.35s ease;
}
.ai-demo-draft__label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent-2); margin-bottom: 4px;
}
.ai-demo-draft__label-icon { font-size: 0.78rem; }
.ai-demo-draft__text {
  font-size: 0.88rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
  color: var(--muted);
}
.ai-demo-streaming .ai-demo-draft:not(.ai-demo-draft--struck) .ai-demo-draft__text:not(:empty)::after {
  content: "▍"; color: var(--accent-2);
  animation: blink 0.85s steps(1) infinite;
  margin-left: 2px;
}
.ai-demo-draft--struck { opacity: 0.45; }
.ai-demo-draft--struck .ai-demo-draft__text { text-decoration: line-through; }

/* Trạng thái "đang chờ token draft đầu tiên" — 3 chấm nhấp nháy cho biết L3 đang chạy. */
.ai-demo-draft__dots { display: inline-flex; gap: 3px; margin-left: 2px; }
.ai-demo-draft__dots i {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent-2); opacity: 0.35;
  animation: draft-dot 1.1s ease-in-out infinite;
}
.ai-demo-draft__dots i:nth-child(2) { animation-delay: 0.18s; }
.ai-demo-draft__dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes draft-dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.ai-demo-draft:not(.ai-demo-draft--pending) .ai-demo-draft__dots { display: none; }
.ai-demo-draft--pending .ai-demo-draft__text { min-height: 0; }

/* Layer 3 không đổi nội dung — thu gọn thành ghi chú, không biến mất đột ngột. */
.ai-demo-draft--nochange {
  border-style: solid; border-color: rgba(var(--good-rgb), 0.3);
  background: rgba(var(--good-rgb), 0.05); opacity: 0.85;
}
.ai-demo-draft--nochange .ai-demo-draft__label { color: var(--good); margin-bottom: 0; }

/* Quick-reply suggestion chips from Layer 3 (demo: click fills the input). */
.ai-demo-quick { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.ai-demo-quick__text { font-size: 0.8rem; color: var(--muted); }
.ai-demo-quick__row { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-demo-quick-chip {
  font-family: var(--mono); font-size: 0.7rem;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent); cursor: pointer;
  transition: background 0.15s ease;
}
.ai-demo-quick-chip:hover { background: rgba(var(--accent-rgb), 0.16); }

.ai-demo-compose {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid rgba(var(--surface-rgb), 0.06);
  background: rgba(var(--surface-rgb), 0.02);
}
.ai-demo-compose-row { display: flex; gap: 10px; align-items: flex-end; }

/* Attach (paperclip) button */
.ai-demo-icon-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 46px; border-radius: 11px;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.ai-demo-icon-btn:hover { color: var(--accent); border-color: var(--border-bright); }

/* Staged-image preview above the input */
.ai-demo-attach-preview { position: relative; display: inline-block; width: fit-content; }
.ai-demo-attach-preview[hidden] { display: none; }
.ai-demo-attach-preview img {
  max-height: 84px; max-width: 160px; border-radius: 10px;
  border: 1px solid var(--border); display: block;
}
#ai-demo-attach-remove {
  position: absolute; top: -8px; right: -8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); cursor: pointer;
  font-size: 0.9rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
#ai-demo-attach-remove:hover { color: var(--bad); border-color: var(--bad); }

/* Image inside a user message bubble */
.ai-demo-msg-img {
  display: block; max-width: 220px; max-height: 220px;
  border-radius: 10px; margin-bottom: 6px;
}

#ai-demo-input {
  flex: 1; resize: none;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 11px;
  padding: 11px 14px; font-family: var(--sans); font-size: 0.93rem;
  line-height: 1.5; min-height: 46px;
  transition: border-color 0.15s;
}
#ai-demo-input:focus { outline: none; border-color: var(--accent); }
#ai-demo-input::placeholder { color: var(--dim); }
.ai-demo-buttons { display: flex; flex-direction: column; gap: 6px; }

/* Clear-chat button — sits above Send, deliberately understated. */
.ai-demo-clear-btn {
  align-self: stretch; display: inline-flex; align-items: center; justify-content: center;
  height: 20px; border-radius: 6px;
  background: transparent; color: var(--dim);
  border: 1px solid var(--border); cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.ai-demo-clear-btn:hover { color: var(--bad); border-color: var(--bad); }

/* Combined send/stop button — one control, two states. */
.ai-demo-sendstop-icon[hidden] { display: none; }
.ai-demo-sendstop--stop {
  background: rgba(var(--bad-rgb), 0.12);
  color: var(--bad);
  border-color: rgba(var(--bad-rgb), 0.4);
}
.ai-demo-sendstop--stop:hover { box-shadow: 0 10px 24px rgba(var(--bad-rgb), 0.22); }
.ai-demo-sendstop--stop .ai-demo-sendstop-icon--stop { animation: pulse-dot 1.4s ease-in-out infinite; }

/* demo side panel */
.demo-side { padding: 20px; overflow-y: auto; max-height: 620px; }
.demo-side-title { font-family: var(--mono); font-size: 0.85rem; margin: 0 0 12px; color: var(--text); }
.demo-side-hint { font-size: 0.66rem; color: var(--dim); font-weight: 400; margin-left: 6px; }
.demo-side-empty { font-family: var(--mono); font-size: 0.75rem; color: var(--dim); }
.demo-side-note { font-size: 0.78rem; color: var(--dim); margin-top: 16px; line-height: 1.55; }

.ai-demo-tags { display: flex; flex-direction: column; gap: 14px; }
.tag-group-title {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--dim); margin: 0 0 6px;
}
.tag-group-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 0.7rem;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted);
  background: rgba(var(--surface-rgb), 0.03);
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.tag-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex-shrink: 0; }
.tag-chip.tag-hit {
  border-color: var(--accent); color: var(--text);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.35);
  animation: tag-pulse 1.6s ease-in-out 3;
}
@keyframes tag-pulse {
  0%, 100% { background: rgba(var(--accent-rgb), 0.08); }
  50% { background: rgba(var(--accent-rgb), 0.22); }
}

/* ── Bot-delivered reply: split messages + resolved images (items 1 & 2) ─ */
.ai-demo-delivered { display: flex; flex-direction: column; gap: 7px; }
.ai-demo-delivered__msg { animation: ai-demo-msg-in 0.3s ease both; }
@keyframes ai-demo-msg-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.ai-demo-msg-media { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ai-demo-bubble:empty + .ai-demo-msg-media, .ai-demo-delivered__msg > .ai-demo-msg-media:first-child { margin-top: 0; }
.ai-demo-msg-media .ai-demo-msg-img { margin-bottom: 0; cursor: zoom-in; }
.ai-demo-msg-video { max-width: 260px; border-radius: 10px; }

/* ── Token usage + estimated cost footer (item 4) ───────────────────── */
.ai-demo-usage {
  margin-top: 8px; padding: 8px 11px; max-width: 430px;
  border: 1px solid var(--border); border-radius: 10px;
  background: rgba(var(--surface-rgb), 0.03);
  font-family: var(--mono); font-size: 0.68rem; color: var(--muted);
  display: flex; flex-direction: column; gap: 3px;
}
.ai-demo-usage__head {
  display: flex; align-items: center; gap: 6px; margin-bottom: 3px;
  font-size: 0.62rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--dim);
}
.ai-demo-usage__row { display: flex; align-items: baseline; gap: 8px; }
.ai-demo-usage__layer { flex: 0 0 auto; min-width: 112px; color: var(--muted); }
.ai-demo-usage__io { flex: 1 1 auto; color: var(--dim); }
.ai-demo-usage__cost { flex: 0 0 auto; color: var(--accent); font-weight: 600; }
.ai-demo-usage__row--total { margin-top: 3px; padding-top: 4px; border-top: 1px dashed var(--border); }
.ai-demo-usage__row--total .ai-demo-usage__layer { color: var(--text); }
.ai-demo-usage__row--total .ai-demo-usage__cost { color: var(--accent-2); }

/* ── CRM auto-tagging status + per-group enabled state (item 3) ──────── */
.ai-crm-status {
  display: flex; align-items: center; gap: 7px; margin-bottom: 4px;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.03em;
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
}
.ai-crm-status__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--dim); }
.ai-crm-status--on { color: var(--text); border-color: rgba(var(--accent-rgb), 0.4); background: rgba(var(--accent-rgb), 0.06); }
.ai-crm-status--on .ai-crm-status__dot { background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6); }
.ai-crm-status--off { color: var(--dim); }
.tag-group--off { opacity: 0.42; }
.tag-group-flag {
  margin-left: 8px; font-size: 0.56rem; letter-spacing: 0.03em; text-transform: none;
  padding: 1px 6px; border-radius: 999px; vertical-align: middle;
}
.tag-group-flag--on { color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.4); }
.tag-group-flag--off { color: var(--dim); border: 1px solid var(--border); }

/* ── Comparison ─────────────────────────────────────────────────────── */
.section-compare {
  background:
    radial-gradient(ellipse 55% 45% at 50% 0%, rgba(var(--accent-rgb), 0.05), transparent),
    transparent;
}
.compare-intro { color: var(--muted); max-width: 720px; margin: 0 0 26px; }
.compare-table-wrap { padding: 0; overflow-x: auto; }
.compare-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9rem; }
.compare-table th, .compare-table td { padding: 14px 20px; text-align: left; }
.compare-table thead th {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--dim); border-bottom: 1px solid var(--border);
}
.compare-table tbody tr:not(:last-child) td { border-bottom: 1px solid rgba(var(--surface-rgb), 0.06); }
.compare-table tbody td:first-child { color: var(--text); font-weight: 550; }
.compare-table th:not(:first-child), .compare-table td:not(:first-child) { text-align: center; }
.compare-no { color: var(--dim); font-family: var(--mono); font-size: 0.85rem; }
.compare-win { color: var(--good); font-family: var(--mono); font-weight: 700; }
.compare-note { color: var(--muted); font-size: 0.92rem; margin: 22px 0 0; }
.compare-note a { border-bottom: 1px dashed var(--dim); }
.compare-note a:hover { border-color: var(--accent); }

/* ── Experience timeline ────────────────────────────────────────────── */
.timeline { position: relative; padding-left: 26px; }
.timeline::before {
  content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2) 70%, transparent);
  opacity: 0.5;
}
.tl-item { position: relative; padding: 0 0 42px 24px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -1px; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5);
}
.tl-item-edu::before { border-color: var(--accent-2); box-shadow: 0 0 12px rgba(var(--accent2-rgb), 0.5); }
.tl-when { font-family: var(--mono); font-size: 0.74rem; color: var(--accent); margin-bottom: 6px; }
.tl-role { font-size: 1.08rem; font-weight: 700; margin: 0 0 10px; }
.tl-org { color: var(--muted); font-weight: 500; font-size: 0.95rem; }
.tl-points { margin: 0; padding-left: 20px; color: var(--muted); font-size: 0.93rem; }
.tl-points li { margin-bottom: 4px; }
.tl-edu-focus { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* ── Contact ────────────────────────────────────────────────────────── */
.section-contact { text-align: center; padding-bottom: 110px; }
.contact-sub { color: var(--muted); max-width: 560px; margin: 0 auto 30px; }
.contact-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.contact-links {
  display: flex; gap: 22px; justify-content: center; align-items: center;
  font-family: var(--mono); font-size: 0.82rem; flex-wrap: wrap;
}
.contact-links a { color: var(--muted); border-bottom: 1px dashed var(--dim); transition: color 0.15s, border-color 0.15s; }
.contact-links a:hover { color: var(--accent); border-color: var(--accent); }
.contact-loc { color: var(--dim); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid rgba(var(--surface-rgb), 0.05); padding: 26px 0; }
.footer-inner { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer-mono { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.footer-dim { color: var(--dim); }

/* ── Reveal animation ───────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.revealed { opacity: 1; transform: none; }

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .t-cursor, .nav-logo-cursor, .badge-live::before, .nav-link-demo::before { animation: none; }
  .tag-chip.tag-hit { animation: none; }
  .card, .btn { transition: none; }
  body { transition: none; }
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 26px; }
  .about-stats { grid-template-columns: repeat(3, 1fr); }
  .work-row { grid-template-columns: 1fr; }
  .demo-grid { grid-template-columns: 1fr; }
  .demo-chat { border-right: none; border-bottom: 1px solid rgba(var(--surface-rgb), 0.06); }
  .demo-side { max-height: none; }
}
@media (max-width: 620px) {
  body { font-size: 15.5px; }
  .container { padding: 0 18px; }
  .nav-inner { padding: 0 18px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 0.72rem; }
  /* keep nav usable on very small screens: hide the two least-important links */
  .nav-links a[href="#about"], .nav-links a[href="#skills"] { display: none; }
  .theme-toggle-label { display: none; }
  .hero { padding: 64px 0 60px; }
  .section { padding: 60px 0; }
  .about-stats { grid-template-columns: 1fr; }
  .ai-demo-compose-row { flex-wrap: wrap; }
  #ai-demo-input { flex-basis: 100%; order: -1; }
  .ai-demo-buttons { justify-content: flex-end; margin-left: auto; }
  .ai-demo-status { margin-left: 0; width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   Theme: sylveon — cream-white base, pastel pink + pastel blue.
   Palette hand-picked by the site owner:
     cream #FFF7F2 · pink #F28CB1 / #F7B8CF / #F5A9B8 · blue #79C9E8 /
     #5BCEFA / #3E95C5 · blue-gray #5E7184.

   Pastel/legibility split — the whole point of the theme:
   those pinks/blues are LIGHT, so as small text on cream they'd be
   unreadable (#F28CB1 is only ~2.2:1). So the exact pastels drive every
   DECORATIVE surface — the cream bg, the pastel button, borders, chip
   fills, ambient glows, the hero sweep — while a pair of slightly deeper
   same-family "ink" tones (rose --accent, ocean --accent-2) carry the
   small solid TEXT (links, kickers, labels) at ≥4.5:1. Neutrals sit in a
   cool blue-gray family (never violet) so nothing reads "tím gắt".
   The pastel decor is the dominant visual mass, so the theme still reads
   as white + pastel pink + pastel blue.
   ════════════════════════════════════════════════════════════════════ */
:root[data-theme="sylveon"] {
  /* Base — warm cream white (dialed down a touch so the page isn't glary) */
  --bg: #fcf4ef;
  --bg-rgb: 252, 244, 239;
  --deep: #e7f0f9;                 /* pale-blue recessed panels: terminal, tool cards, demo shell */
  --deep-rgb: 231, 240, 249;
  --surface-rgb: 121, 201, 232;    /* pastel blue (#79C9E8) tint for hairlines/cards/chips/grid — this is
                                       what makes cards, chip pills, borders and dividers read as pastel
                                       blue all over the page, balancing the pink text/accents */
  --well-rgb: 46, 108, 148;        /* deeper ocean-blue for recessed code/args wells */

  /* Text — cool slate family, deep and solid, never violet. --muted and --dim
     drive most of the AI-chat/trace panel copy (tool args, trace steps, tags,
     status labels) — kept noticeably darker than a typical "secondary text"
     tone so that panel stays readable, not just --text at the top. */
  --text: #1c232b;                 /* primary  ~15.5:1 on cream */
  --muted: #354451;                /* secondary — deep slate, was too faint  ~9.8:1 */
  --dim: #56677a;                  /* de-emphasized but still legible  ~5.8:1 */

  /* Pink — deeper pastel for fills/borders/glows, richer rose ink for text.
     The ink is hue-shifted to ~350° (red-leaning "crimson rose") rather than
     the ~338° magenta the fill sits at — at fill-lightness 338° reads as
     pink fine, but at ink-darkness the same hue read as purple. */
  --accent: #a6304a;               /* deep rose ink — links, kickers, numbers  ~6.2:1 */
  --accent-rgb: 237, 120, 163;     /* pastel pink — decorative fills (deepened from #F28CB1) */

  /* Blue — pastel #79C9E8 for fills/borders/glows, ocean ink for text */
  --accent-2: #29769f;             /* ocean ink — labels, badges, spans  ~4.7:1 */
  --accent2-rgb: 121, 201, 232;    /* pastel blue #79C9E8 — decorative fills */

  /* Status — kept legible on cream */
  --good: #2c8c66;
  --good-rgb: 44, 140, 102;
  --warn: #a9700f;
  --warn-rgb: 169, 112, 15;
  --bad: #c23a3a;
  --bad-rgb: 194, 58, 58;

  --on-accent: #2f3d49;            /* dark slate text on the pastel button  ~6.5:1 */
}

/* Pastel primary button — the owner's light pink → light blue with dark,
   fully-readable text. (The default gradient uses the solid ink accents,
   which are too strong for a pastel theme; here the FILL itself is pastel.) */
:root[data-theme="sylveon"] .btn-primary {
  background: linear-gradient(100deg, #f5a6c6, #79c9e8);
  color: var(--on-accent);
  border-color: rgba(46, 108, 148, 0.22);
}
:root[data-theme="sylveon"] .btn-primary:hover {
  box-shadow: 0 10px 26px rgba(237, 120, 163, 0.45);
}

/* Ambient shadows: pure-black reads muddy on cream — retint to deep ocean-blue. */
:root[data-theme="sylveon"] .terminal {
  box-shadow: 0 18px 44px rgba(46, 108, 148, 0.18), 0 0 0 1px rgba(121, 201, 232, 0.32);
}
:root[data-theme="sylveon"] .card:hover {
  box-shadow: 0 14px 36px rgba(46, 108, 148, 0.16), 0 0 20px rgba(237, 120, 163, 0.22);
}
:root[data-theme="sylveon"] .demo-shell {
  box-shadow: 0 20px 54px rgba(46, 108, 148, 0.18);
}

/* Ambient background glows: the alpha values in the shared rule were tuned
   for cyan/violet glowing against a near-black page — on a cream page the
   same alpha is almost invisible, which is part of why the theme was
   reading as "all pink". Boosted here so both the pink and blue washes are
   actually visible as you scroll. */
:root[data-theme="sylveon"] .bg-glow-1 {
  background: radial-gradient(circle, rgba(237, 120, 163, 0.3), transparent 62%);
}
:root[data-theme="sylveon"] .bg-glow-2 {
  background: radial-gradient(circle, rgba(121, 201, 232, 0.34), transparent 62%);
}
:root[data-theme="sylveon"] .section-demo {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(121, 201, 232, 0.18), transparent),
    transparent;
}
:root[data-theme="sylveon"] .bg-grid {
  background-image:
    linear-gradient(rgba(121, 201, 232, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(121, 201, 232, 0.06) 1px, transparent 1px);
}