/* THE CHAIN MAKER (Design's Chain Maker v7, 2026-09-21) — the keyframes and the hover states the design wrote as
   style-hover; every other value is inline in chainmaker.jsx, as the design carries it. Tokens are the app's own
   (system.css): --accent --glow --line --line-soft --bg --bg-2 --panel --panel-2 --text --dim --dimmer --good --bad --accent-ink. */
@keyframes cm-nodein{from{opacity:0;transform:translateY(-22px) scale(.92)}to{opacity:1;transform:none}}
@keyframes cm-lanein{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes cm-swapA{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes cm-swapB{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes cm-fade{from{opacity:0}to{opacity:1}}
/* a new variant is born at the orb and travels out to its orbit slot */
@keyframes cm-budout{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  55%{opacity:1}
  70%{transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by))) scale(1.14)}
  100%{opacity:1;transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by))) scale(1)}}
@keyframes cm-spawnring{
  0%{opacity:.85;transform:translate(-50%,-50%) scale(.25)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.9)}}
@keyframes cm-chipin{
  0%{opacity:0;transform:translateY(-7px) scale(.9)}
  100%{opacity:1;transform:none}}
/* the reverse: a variant folding back into the orb — used on switch and on remove */
@keyframes cm-budin{
  0%{opacity:1;transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by))) scale(1)}
  35%{transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by))) scale(.86)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.28)}}
@keyframes cm-budgone{
  0%{opacity:1;transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by))) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by))) scale(.55)}}
@keyframes cm-chipout{
  0%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(-6px) scale(.9)}}
@keyframes cm-sheetup{from{transform:translateY(102%)}to{transform:translateY(0)}}
@keyframes cm-fieldin{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes cm-spin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes cm-breathe{0%,100%{opacity:.5}50%{opacity:.82}}
@keyframes cm-pulse{0%,100%{opacity:1}50%{opacity:.45}}
/* the design's style-hover, as classes */
.cm-hov-accent:hover{color:var(--accent) !important;background:color-mix(in srgb,var(--accent) 12%,transparent) !important}
.cm-hov-accent-line:hover{color:var(--accent) !important;border-color:var(--accent) !important}
.cm-hov-bad:hover{color:var(--bad) !important;border-color:color-mix(in srgb,var(--bad) 55%,transparent) !important}
.cm-hov-bad-wash:hover{color:var(--bad) !important;border-color:color-mix(in srgb,var(--bad) 55%,transparent) !important;background:color-mix(in srgb,var(--bad) 10%,transparent) !important}
.cm-hov-text:hover{color:var(--text) !important;filter:drop-shadow(0 0 7px var(--glow))}
.cm-hov-glow:hover{color:var(--accent) !important;filter:drop-shadow(0 0 7px var(--glow))}
.cm-hov-op:hover{opacity:1 !important}
.cm-name:focus{border-color:var(--accent) !important}
.cm input::placeholder,.cm textarea::placeholder{color:var(--dimmer)}
.cm input:focus-visible,.cm textarea:focus-visible{outline:1px solid var(--accent);outline-offset:1px}
@media (prefers-reduced-motion: reduce) and (scripting: none){.cm *{animation:none !important;transition-duration:0s !important}}