.npc-visual{--npc-accent:oklch(52% .13 250);--npc-accent-soft:oklch(94% .035 250);--npc-accent-deep:oklch(36% .08 250);--npc-highlight:oklch(98.5% .01 80)}.npc-visual[data-npc-theme=station]{--npc-accent:oklch(54% .13 245);--npc-accent-soft:oklch(94% .035 245);--npc-accent-deep:oklch(34% .09 245)}.npc-visual[data-npc-theme=neighbor]{--npc-accent:oklch(63% .12 150);--npc-accent-soft:oklch(95% .035 150);--npc-accent-deep:oklch(38% .08 150)}.npc-visual[data-npc-theme=market]{--npc-accent:oklch(69% .15 70);--npc-accent-soft:oklch(96% .045 78);--npc-accent-deep:oklch(42% .1 60)}.npc-visual[data-npc-theme=restaurant]{--npc-accent:oklch(56% .15 22);--npc-accent-soft:oklch(95% .035 26);--npc-accent-deep:oklch(36% .11 22)}.npc-visual[data-npc-theme=bakery]{--npc-accent:oklch(67% .11 78);--npc-accent-soft:oklch(96.5% .04 82);--npc-accent-deep:oklch(43% .07 65)}.npc-visual[data-npc-theme=school]{--npc-accent:oklch(58% .12 290);--npc-accent-soft:oklch(95% .03 292);--npc-accent-deep:oklch(38% .08 288)}.npc-visual[data-npc-theme=police]{--npc-accent:oklch(47% .12 255);--npc-accent-soft:oklch(93% .035 255);--npc-accent-deep:oklch(30% .08 255)}.npc-visual[data-npc-theme=family]{--npc-accent:oklch(62% .12 42);--npc-accent-soft:oklch(96% .04 52);--npc-accent-deep:oklch(39% .08 38)}.npc-visual[data-npc-theme=sport]{--npc-accent:oklch(60% .14 160);--npc-accent-soft:oklch(95% .035 160);--npc-accent-deep:oklch(36% .09 160)}.npc-visual[data-npc-theme=clinic]{--npc-accent:oklch(61% .1 205);--npc-accent-soft:oklch(96% .03 205);--npc-accent-deep:oklch(38% .07 205)}.npc-visual-card{border:1px solid color-mix(in oklab, var(--npc-accent) 24%, var(--border));background:radial-gradient(circle at 12% 6%, color-mix(in oklab, var(--npc-accent) 18%, transparent), transparent 36%), linear-gradient(145deg, color-mix(in oklab, var(--npc-accent-soft) 86%, var(--card)), var(--card) 62%);box-shadow:0 24px 48px -30px color-mix(in oklab, var(--npc-accent-deep) 58%, transparent), inset 0 1px 0 oklch(100% 0 0/.72)}.npc-visual-frame{border:1px solid color-mix(in oklab, var(--npc-accent) 30%, var(--border));background:radial-gradient(circle at 50% 18%, color-mix(in oklab, var(--npc-highlight) 82%, transparent), transparent 44%), linear-gradient(160deg, color-mix(in oklab, var(--npc-accent-soft) 82%, var(--card)), color-mix(in oklab, var(--npc-accent) 10%, var(--card)));box-shadow:inset 0 1px 0 oklch(100% 0 0/.72), 0 16px 30px -22px color-mix(in oklab, var(--npc-accent-deep) 48%, transparent)}.npc-visual-orb{border:1px solid color-mix(in oklab, var(--npc-accent) 34%, var(--border));background:color-mix(in oklab, var(--npc-accent-soft) 84%, var(--card));color:var(--npc-accent-deep)}.npc-visual-nameplate{border:1px solid color-mix(in oklab, var(--npc-accent) 22%, var(--border));background:color-mix(in oklab, var(--card) 92%, transparent);color:var(--foreground)}.npc-visual-chip,.npc-visual-topic{background:color-mix(in oklab, var(--npc-accent-soft) 82%, var(--card));color:var(--npc-accent-deep);border:1px solid color-mix(in oklab, var(--npc-accent) 18%, transparent)}.npc-visual-role{color:var(--npc-accent-deep)}.npc-visual-speech{border:1px solid color-mix(in oklab, var(--npc-accent) 15%, var(--border));background:color-mix(in oklab, var(--card) 82%, var(--npc-accent-soft))}@media (prefers-reduced-motion:no-preference){.npc-visual-frame{transition:transform .22s,box-shadow .22s}.npc-visual:hover .npc-visual-frame{transform:translateY(-2px)}}
