/* Annual Dial skin — Vapor (scoped; annual-dial-theme) */
html[data-theme="vapor"]{
  --page-1:#2A1044; --page-2:#140626; --page-3:#08030F;
  --plate-0:#2E1250; --plate-1:#1A0833; --plate-2:#0E0420;
  --rim:rgba(255,92,214,.45);
  --hair:rgba(214,140,255,.30);
  --sector:rgba(255,140,220,.20);
  --cell-wd:rgba(200,140,255,.22);
  --cell-we:rgba(255,140,220,.30);
  --cell-ev:#FF9A3C;
  --cell-now:#FFE9FB;
  --accent:#FF5CD6; --accent-lit:#C8A2FF; --second:#FF9A3C;
  --text:#F6E9FF; --text-dim:rgba(246,233,255,.40);
  --hub:#120524; --on-accent:#2A0A2A;
  --panel:rgba(26,8,51,.55); --field:rgba(255,92,214,.08);
  --display:"Michroma",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --sans:"Space Mono",ui-monospace,monospace;
  --title-track:.10em; --ui-track:.16em; --grain:0;
  --glow:0 0 14px rgba(255,92,214,.6);
  --aura:
    radial-gradient(60% 50% at 12% 8%, rgba(255,92,214,.22), transparent 62%),
    radial-gradient(52% 44% at 88% 88%, rgba(255,154,60,.18), transparent 62%),
    radial-gradient(50% 40% at 82% 14%, rgba(160,110,255,.20), transparent 62%);
}
@keyframes throb{0%,100%{opacity:1}50%{opacity:.72}}
html[data-theme="vapor"] .now{animation:throb 2.6s ease-in-out infinite}
@keyframes hueDrift{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(18deg)}}
html[data-theme="vapor"] svg{animation:hueDrift 26s ease-in-out infinite}