/* 団子 (dango.js, 2026-10-22): five sets of characters; each acts out what its AI is doing.
   - The motion of the whole character is the company's own (GPT calm, Gemini airy, Grok jumpy, DeepSeek earnest),
     one per activity: thinking, searching, answering, image, video; done and error play once.
   - ドット絵 moves frame by frame (steps), the other sets smoothly.
   - Each activity's prop (thought bubble, magnifier, pencil, palette or brush, clapperboard, sparkles, sweat drop) and
     the sets' own moving parts (screens, eyes, sparkles, propellers…).
   Every copy is timed by the page's clock (--dg-clock, set by dango()), so a character drawn anew carries on. */
.g-dango{display:inline-block;flex:none;width:var(--dango-size,20px);height:var(--dango-size,20px);line-height:0;vertical-align:middle;--dg-rim:#0d0d10;--dg-line:#2a2b33}
.g-dango svg{display:block;width:100%;height:100%;overflow:visible}
.g-dango .dg-shadow{fill:var(--g-dango-shadow,rgba(0,0,0,.13))}
.g-dango .dg-rim{stroke:var(--dg-rim)}
.g-dango .dg-line{stroke:var(--dg-line)}
.g-dango .dg-iso{isolation:isolate}
.g-dango .dg-mul{mix-blend-mode:multiply}
.g-dango .dg-paper{fill:#fff;stroke:#2b2838;stroke-width:1}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .g-dango{--dg-rim:#8d8da3;--dg-line:#b9b9c9}}
:root[data-theme=dark] .g-dango{--dg-rim:#8d8da3;--dg-line:#b9b9c9}
.g-dango[data-state=off]{filter:grayscale(1);opacity:.5}
.g-dango svg [class*="dg-"]{transform-box:fill-box;transform-origin:50% 50%}
.g-dango svg .dg-body{transform-origin:50% 100%}
.g-dango svg :is(.dg-earl,.dg-earr){transform-origin:50% 100%}
.g-dango svg .dg-fl{transform-origin:100% 0}
.g-dango svg .dg-fr{transform-origin:0 0}
.g-dango svg .dg-brush{transform-origin:100% 0}
.g-dango svg .dg-clap{transform-origin:0 100%}
/* Parts that only show while working. */
.g-dango .dg-screen-dots,.g-dango .dg-ring--2{opacity:0}
.g-dango .dg-ring{opacity:.7}
.g-dango.is-working .dg-screen-dots{opacity:1}
.g-dango.is-working .dg-smile{opacity:0}

/* ---------- the whole character ---------- */
.g-dango.is-working .dg-body{animation-duration:var(--dg-dur,1.2s);animation-delay:var(--dg-clock,0s);animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.g-dango.is-once .dg-body{animation-duration:var(--dg-dur,1.2s);animation-delay:var(--dg-clock,0s);animation-iteration-count:1;animation-timing-function:ease-out}
.g-dango[data-set=pixel]:is(.is-working,.is-once) .dg-body{animation-timing-function:steps(1,end)}
/* A failed answer keeps a little droop (its sweat drop stays). */
.g-dango[data-state=error] .dg-body{transform:rotate(-8deg) translateY(3%)}

.g-dango[data-provider=openai][data-state=thinking] .dg-body{animation-name:dg-openai-thinking}
.g-dango[data-provider=openai][data-state=searching] .dg-body{animation-name:dg-openai-searching}
.g-dango[data-provider=openai][data-state=answering] .dg-body{animation-name:dg-openai-answering}
.g-dango[data-provider=openai][data-state=image] .dg-body{animation-name:dg-openai-image}
.g-dango[data-provider=openai][data-state=video] .dg-body{animation-name:dg-openai-video}
.g-dango[data-provider=openai][data-state=done] .dg-body{animation-name:dg-openai-done}
.g-dango[data-provider=openai][data-state=error] .dg-body{animation-name:dg-error-droop}
.g-dango[data-provider=gemini][data-state=thinking] .dg-body{animation-name:dg-gemini-thinking}
.g-dango[data-provider=gemini][data-state=searching] .dg-body{animation-name:dg-gemini-searching}
.g-dango[data-provider=gemini][data-state=answering] .dg-body{animation-name:dg-gemini-answering}
.g-dango[data-provider=gemini][data-state=image] .dg-body{animation-name:dg-gemini-image}
.g-dango[data-provider=gemini][data-state=video] .dg-body{animation-name:dg-gemini-video}
.g-dango[data-provider=gemini][data-state=done] .dg-body{animation-name:dg-gemini-done}
.g-dango[data-provider=gemini][data-state=error] .dg-body{animation-name:dg-gemini-error}
.g-dango[data-provider=grok][data-state=thinking] .dg-body{animation-name:dg-grok-thinking}
.g-dango[data-provider=grok][data-state=searching] .dg-body{animation-name:dg-grok-searching}
.g-dango[data-provider=grok][data-state=answering] .dg-body{animation-name:dg-grok-answering}
.g-dango[data-provider=grok][data-state=image] .dg-body{animation-name:dg-grok-image}
.g-dango[data-provider=grok][data-state=video] .dg-body{animation-name:dg-grok-video}
.g-dango[data-provider=grok][data-state=done] .dg-body{animation-name:dg-grok-done}
.g-dango[data-provider=grok][data-state=error] .dg-body{animation-name:dg-grok-error}
.g-dango[data-provider=deepseek][data-state=thinking] .dg-body{animation-name:dg-deepseek-thinking}
.g-dango[data-provider=deepseek][data-state=searching] .dg-body{animation-name:dg-deepseek-searching}
.g-dango[data-provider=deepseek][data-state=answering] .dg-body{animation-name:dg-deepseek-answering}
.g-dango[data-provider=deepseek][data-state=image] .dg-body{animation-name:dg-deepseek-image}
.g-dango[data-provider=deepseek][data-state=video] .dg-body{animation-name:dg-deepseek-video}
.g-dango[data-provider=deepseek][data-state=done] .dg-body{animation-name:dg-deepseek-done}
.g-dango[data-provider=deepseek][data-state=error] .dg-body{animation-name:dg-deepseek-error}

/* GPT: calm and steady — a thoughtful tilt, a look around, a writing nod, brush strokes, a director's bob, a neat hop. */
@keyframes dg-openai-thinking{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}50%{transform:translateY(-3%) rotate(0)}75%{transform:rotate(7deg)}}
@keyframes dg-openai-searching{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-6%) rotate(-5deg)}50%{transform:translateX(0) rotate(0)}75%{transform:translateX(6%) rotate(5deg)}}
@keyframes dg-openai-answering{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-5%) scale(1.02,.98)}}
@keyframes dg-openai-image{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-3%)}}
@keyframes dg-openai-video{0%,100%{transform:translateY(0) scale(1,1)}25%{transform:translateY(-9%) scale(1,1)}50%{transform:translateY(0) scale(1.06,.94)}75%{transform:translateY(-4%) scale(1,1)}}
@keyframes dg-openai-done{0%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-22%) scale(.96,1.05)}55%{transform:translateY(0) scale(1.08,.92)}75%{transform:translateY(-6%) scale(1,1)}100%{transform:translateY(0) scale(1,1)}}
@keyframes dg-error-droop{0%{transform:none}30%{transform:translateX(-4%)}50%{transform:translateX(4%)}70%{transform:translateX(-2%)}100%{transform:rotate(-8deg) translateY(3%)}}
/* Gemini: light and curious — floats while it thinks, hops and turns to look, twirls for pictures, a double (twin) hop. */
@keyframes dg-gemini-thinking{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-11%) rotate(2deg)}}
@keyframes dg-gemini-searching{0%,40%{transform:translateY(0) scaleX(1)}20%{transform:translateY(-12%) scaleX(1)}50%,90%{transform:translateY(0) scaleX(-1)}70%{transform:translateY(-12%) scaleX(-1)}100%{transform:translateY(0) scaleX(1)}}
@keyframes dg-gemini-answering{0%,100%{transform:translateY(0)}50%{transform:translateY(-7%)}}
@keyframes dg-gemini-image{0%,100%{transform:rotate(-10deg) translateY(0)}50%{transform:rotate(10deg) translateY(-8%)}}
@keyframes dg-gemini-video{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-4%,-8%) rotate(-4deg)}75%{transform:translate(4%,-8%) rotate(4deg)}}
@keyframes dg-gemini-done{0%{transform:translateY(0) scale(1,1)}20%{transform:translateY(-18%) scale(1,1)}40%{transform:translateY(0) scale(1.06,.94)}60%{transform:translateY(-12%) scale(1,1)}80%{transform:translateY(0) scale(1.04,.96)}100%{transform:translateY(0) scale(1,1)}}
@keyframes dg-gemini-error{0%{transform:none}25%{transform:rotate(6deg)}50%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}100%{transform:rotate(-8deg) translateY(3%)}}
/* Grok: restless and cheeky — taps its foot while thinking, darts around, shakes for pictures, spins when it is done. */
@keyframes dg-grok-thinking{0%,100%{transform:rotate(0)}20%{transform:rotate(-5deg)}40%{transform:rotate(4deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(5deg)}}
@keyframes dg-grok-searching{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-9%) rotate(-3deg)}50%{transform:translateX(0) rotate(0)}75%{transform:translateX(9%) rotate(3deg)}}
@keyframes dg-grok-answering{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6%) rotate(-5deg)}}
@keyframes dg-grok-image{0%,100%{transform:rotate(0) translate(0,0)}20%{transform:rotate(-12deg) translate(-3%,0)}40%{transform:rotate(10deg) translate(3%,-6%)}60%{transform:rotate(-8deg) translate(0,0)}80%{transform:rotate(8deg) translate(0,-4%)}}
@keyframes dg-grok-video{0%,100%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-14%) scale(.95,1.06)}50%{transform:translateY(0) scale(1.08,.92)}70%{transform:translateY(-6%) scale(1,1)}}
/* (the spin turns round its middle, not its feet) */
.g-dango[data-provider=grok][data-state=done] .dg-body{transform-origin:50% 50%}
@keyframes dg-grok-done{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20%) rotate(180deg)}100%{transform:translateY(0) rotate(360deg)}}
@keyframes dg-grok-error{0%{transform:none}40%{transform:translateY(-6%) rotate(10deg)}100%{transform:rotate(-8deg) translateY(3%)}}
/* DeepSeek: earnest — nods while it thinks it through, dives deep to search, works at a steady quick beat, a proud bounce. */
@keyframes dg-deepseek-thinking{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(5%) rotate(3deg)}60%{transform:translateY(0) rotate(0)}80%{transform:translateY(3%) rotate(-2deg)}}
@keyframes dg-deepseek-searching{0%,100%{transform:translateY(0) scale(1,1)}40%,60%{transform:translateY(14%) scale(1.04,.94)}85%{transform:translateY(-4%) scale(1,1)}}
@keyframes dg-deepseek-answering{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-4%) scale(1.03,.97)}}
@keyframes dg-deepseek-image{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-2%)}}
@keyframes dg-deepseek-video{0%,100%{transform:translateY(0)}50%{transform:translateY(-5%)}}
@keyframes dg-deepseek-done{0%{transform:translateY(0) scale(1,1)}25%{transform:translateY(-14%) scale(1,1)}45%{transform:translateY(0) scale(1.05,.95)}65%{transform:translateY(-8%) scale(1,1)}85%,100%{transform:translateY(0) scale(1,1)}}
@keyframes dg-deepseek-error{0%{transform:none}20%{transform:translateY(-3%)}100%{transform:rotate(-8deg) translateY(3%)}}

/* ---------- props ---------- */
.g-dango.is-working .dg-prop *{animation-delay:var(--dg-clock,0s);animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.g-dango.is-working .dg-prop--thinking{animation:dg-float 2.4s ease-in-out var(--dg-clock,0s) infinite}
.g-dango.is-working :is(.dg-dots>*,.dg-d1,.dg-d2,.dg-d3){animation-name:dg-dot;animation-duration:1.2s}
.g-dango.is-working :is(.dg-dots>:nth-child(2),.dg-d2){animation-delay:calc(var(--dg-clock,0s) + .2s)}
.g-dango.is-working :is(.dg-dots>:nth-child(3),.dg-d3){animation-delay:calc(var(--dg-clock,0s) + .4s)}
.g-dango.is-working .dg-mag{animation-name:dg-scan;animation-duration:1.4s;animation-timing-function:linear}
.g-dango.is-working .dg-pencil{animation-name:dg-write;animation-duration:.7s}
.g-dango.is-working .dg-brush{animation-name:dg-brush;animation-duration:1s}
.g-dango.is-working :is(.dg-paint>*,.dg-p1,.dg-p2,.dg-p3,.dg-p4){animation-name:dg-pop;animation-duration:1.2s}
.g-dango.is-working :is(.dg-paint>:nth-child(2),.dg-p2){animation-delay:calc(var(--dg-clock,0s) + .3s)}
.g-dango.is-working :is(.dg-paint>:nth-child(3),.dg-p3){animation-delay:calc(var(--dg-clock,0s) + .6s)}
.g-dango.is-working .dg-p4{animation-delay:calc(var(--dg-clock,0s) + .9s)}
.g-dango.is-working .dg-clap{animation-name:dg-clap;animation-duration:.8s}
.g-dango .dg-prop--done>*{opacity:0}
.g-dango.is-once .dg-prop--done>*{animation:dg-burst var(--dg-dur,1.2s) ease-out var(--dg-clock,0s) 1}
.g-dango.is-once .dg-prop--done>.dg-s2{animation-delay:calc(var(--dg-clock,0s) + .12s)}
.g-dango.is-once .dg-prop--done>.dg-s3{animation-delay:calc(var(--dg-clock,0s) + .24s)}
/* ドット絵's props move in frames too. */
.g-dango[data-set=pixel].is-working .dg-prop *{animation-timing-function:steps(1,end)}
.g-dango[data-set=pixel].is-working .dg-clap{animation-name:dg-clap-px}
.g-dango[data-set=pixel].is-working .dg-pencil{animation-name:dg-write-px}
.g-dango[data-set=pixel].is-working .dg-mag{animation-name:dg-scan-px}
@keyframes dg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2px)}}
@keyframes dg-dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-1.2px)}}
@keyframes dg-scan{0%,100%{transform:translate(0,0)}25%{transform:translate(-2px,1.5px)}50%{transform:translate(0,3px)}75%{transform:translate(2px,1.5px)}}
@keyframes dg-scan-px{0%,100%{transform:translate(0,0)}25%{transform:translate(-2.75px,0)}50%{transform:translate(-2.75px,2.75px)}75%{transform:translate(0,2.75px)}}
@keyframes dg-write{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-1.5px,1px) rotate(-6deg)}50%{transform:translate(-3px,0) rotate(0)}75%{transform:translate(-1.5px,1px) rotate(4deg)}}
@keyframes dg-write-px{0%,100%{transform:translate(0,0)}50%{transform:translate(-2.75px,2.75px)}}
@keyframes dg-brush{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(16deg)}}
@keyframes dg-pop{0%,100%{opacity:.25;transform:scale(.5)}40%{opacity:1;transform:scale(1.2)}}
@keyframes dg-clap{0%,60%,100%{transform:rotate(0)}30%{transform:rotate(-20deg)}}
@keyframes dg-clap-px{0%,49%{transform:translateY(-2.75px)}50%,100%{transform:translateY(0)}}
@keyframes dg-burst{0%{opacity:0;transform:scale(.2) rotate(0)}30%{opacity:1;transform:scale(1.25) rotate(30deg)}70%{opacity:1;transform:scale(1) rotate(45deg)}100%{opacity:0;transform:scale(.6) rotate(60deg)}}

/* ---------- the sets' own moving parts (while working) ---------- */
.g-dango.is-working :is(.dg-spark,.dg-sp,.dg-hatstar){animation:dg-twinkle 1.4s ease-in-out var(--dg-clock,0s) infinite}
.g-dango.is-working .dg-spark--2{animation-delay:calc(var(--dg-clock,0s) - .5s)}
.g-dango.is-working[data-provider=grok] .dg-spark{animation:dg-flicker .5s linear var(--dg-clock,0s) infinite}
/* かたち */
.g-dango.is-working[data-set=shape] .dg-l{animation:dg-apart-l 1.6s ease-in-out var(--dg-clock,0s) infinite}
.g-dango.is-working[data-set=shape] .dg-r{animation:dg-apart-r 1.6s ease-in-out var(--dg-clock,0s) infinite}
.g-dango.is-working[data-set=shape] .dg-ring{animation:dg-ring 1.6s ease-out var(--dg-clock,0s) infinite}
.g-dango.is-working[data-set=shape] .dg-ring--2{animation-delay:calc(var(--dg-clock,0s) - .8s)}
.g-dango.is-working[data-set=shape][data-state=searching] .dg-ring{animation-duration:.9s}
.g-dango.is-working[data-set=shape][data-state=searching] .dg-ring--2{animation-delay:calc(var(--dg-clock,0s) - .45s)}
/* どうぶつ */
.g-dango.is-working[data-set=animal] :is(.dg-earl,.dg-earr){animation:dg-ear .9s ease-in-out var(--dg-clock,0s) infinite}
.g-dango.is-working[data-set=animal] .dg-earr{animation-delay:calc(var(--dg-clock,0s) - .45s)}
.g-dango.is-working[data-set=animal] .dg-pupils{animation:dg-look-up 2.4s ease-in-out var(--dg-clock,0s) infinite}
.g-dango.is-working[data-set=animal][data-state=searching] .dg-pupils{animation:dg-look 1.4s steps(1,end) var(--dg-clock,0s) infinite}
.g-dango.is-working[data-set=animal] .dg-pupil{animation:dg-dart .9s steps(1,end) var(--dg-clock,0s) infinite}
.g-dango.is-working[data-set=animal] .dg-fl{animation:dg-flap-l .5s ease-in-out var(--dg-clock,0s) infinite}
.g-dango.is-working[data-set=animal] .dg-fr{animation:dg-flap-r .5s ease-in-out var(--dg-clock,0s) infinite}
.g-dango.is-working[data-set=animal][data-state=searching] .dg-goggles{transform:translateY(140%)}
/* ロボット */
.g-dango.is-working[data-set=robot] .dg-screen-dots circle{animation:dg-dot 1.1s ease-in-out var(--dg-clock,0s) infinite}
.g-dango.is-working[data-set=robot] .dg-screen-dots circle:nth-child(2){animation-delay:calc(var(--dg-clock,0s) + .18s)}
.g-dango.is-working[data-set=robot] .dg-screen-dots circle:nth-child(3){animation-delay:calc(var(--dg-clock,0s) + .36s)}
.g-dango.is-working[data-set=robot] .dg-bulb{animation:dg-glow 1.1s ease-in-out var(--dg-clock,0s) infinite}
.g-dango.is-working[data-set=robot] .dg-il{animation:dg-zoom 1.4s ease-in-out var(--dg-clock,0s) infinite}
.g-dango.is-working[data-set=robot] .dg-ir{animation:dg-zoom 1.4s ease-in-out calc(var(--dg-clock,0s) - .7s) infinite}
.g-dango.is-working[data-set=robot][data-state=searching] :is(.dg-il,.dg-ir){animation-duration:.7s}
.g-dango.is-working[data-set=robot][data-state=image] :is(.dg-il,.dg-ir){filter:hue-rotate(0deg);animation-name:dg-zoom,dg-hue;animation-duration:1.4s,2s}
.g-dango.is-working[data-set=robot] .dg-face{animation:dg-glitch .7s linear var(--dg-clock,0s) infinite}
.g-dango.is-working[data-set=robot] .dg-knob{animation:dg-flicker .35s linear var(--dg-clock,0s) infinite}
.g-dango.is-working[data-set=robot] .dg-blade{animation:dg-blade .3s linear var(--dg-clock,0s) infinite}
.g-dango.is-working[data-set=robot] .dg-bub circle,.g-dango.is-working[data-set=wagashi] .dg-bub circle{animation:dg-rise 1.8s ease-out var(--dg-clock,0s) infinite}
.g-dango.is-working[data-set=robot] .dg-bub circle:nth-child(2),.g-dango.is-working[data-set=wagashi] .dg-bub circle:nth-child(2){animation-delay:calc(var(--dg-clock,0s) - .9s)}
/* 和菓子 */
.g-dango.is-working[data-set=wagashi] .dg-big{animation:dg-hop 1.2s ease-in-out var(--dg-clock,0s) infinite}
.g-dango.is-working[data-set=wagashi] .dg-small{animation:dg-hop 1.2s ease-in-out calc(var(--dg-clock,0s) - .6s) infinite}
.g-dango.is-working[data-set=wagashi] .dg-roll{animation:dg-roll 1.4s ease-in-out var(--dg-clock,0s) infinite}
.g-dango[data-set=wagashi][data-provider=deepseek].is-working .dg-body{animation-name:dg-jiggle}
/* ドット絵 */
.g-dango.is-working[data-set=pixel] :is(.dg-sp,.dg-hatstar){animation:dg-blink .5s steps(1,end) var(--dg-clock,0s) infinite}
.g-dango.is-working[data-set=pixel] .dg-glint{animation:dg-blink .8s steps(1,end) var(--dg-clock,0s) infinite}
.g-dango.is-working[data-set=pixel] .dg-tassel{animation:dg-swing-px .8s steps(1,end) var(--dg-clock,0s) infinite}
.g-dango.is-working[data-set=pixel] .dg-plume{animation:dg-swing-px 1s steps(1,end) var(--dg-clock,0s) infinite}
.g-dango.is-working[data-set=pixel] .dg-slits{animation:dg-blink 1.6s steps(1,end) var(--dg-clock,0s) infinite}

@keyframes dg-twinkle{0%,100%{opacity:.55;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1.18) rotate(45deg)}}
@keyframes dg-flicker{0%,49%{opacity:1;transform:scale(1)}50%,100%{opacity:.3;transform:scale(.8)}}
@keyframes dg-apart-l{0%,100%{transform:translateX(0)}50%{transform:translateX(-2.2px)}}
@keyframes dg-apart-r{0%,100%{transform:translateX(0)}50%{transform:translateX(2.2px)}}
@keyframes dg-ring{0%{transform:scale(.6);opacity:.95}100%{transform:scale(2.3);opacity:0}}
@keyframes dg-ear{0%,100%{transform:scaleY(1)}40%{transform:scaleY(.84)}}
@keyframes dg-look{0%{transform:translateX(0)}25%{transform:translateX(-1.6px)}50%{transform:translateX(1.6px)}75%{transform:translateX(0)}}
@keyframes dg-look-up{0%,100%{transform:translate(0,0)}50%{transform:translate(.8px,-1.2px)}}
@keyframes dg-dart{0%{transform:translateX(-.9px)}50%{transform:translateX(.9px)}}
@keyframes dg-flap-l{0%,100%{transform:rotate(0)}50%{transform:rotate(20deg)}}
@keyframes dg-flap-r{0%,100%{transform:rotate(0)}50%{transform:rotate(-20deg)}}
@keyframes dg-glow{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
@keyframes dg-zoom{0%,100%{transform:scale(1)}50%{transform:scale(.62)}}
@keyframes dg-hue{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
@keyframes dg-glitch{0%,28%{transform:translate(0,0)}30%,38%{transform:translate(-1.8px,.4px)}40%,62%{transform:translate(0,0)}64%,72%{transform:translate(1.6px,-.4px)}74%,100%{transform:translate(0,0)}}
@keyframes dg-blade{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.12)}}
@keyframes dg-rise{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-7px);opacity:0}}
@keyframes dg-hop{0%,45%,100%{transform:translateY(0)}22%{transform:translateY(-3.2px)}}
@keyframes dg-roll{0%,100%{transform:translateX(0) rotate(0)}30%{transform:translateX(-2.6px) rotate(-24deg)}70%{transform:translateX(2.6px) rotate(20deg)}}
@keyframes dg-jiggle{0%,100%{transform:skewX(0) scale(1,1)}25%{transform:skewX(5deg) scale(1.02,.97)}50%{transform:skewX(-4deg) scale(1,1)}75%{transform:skewX(2deg) scale(.99,1.02)}}
@keyframes dg-blink{0%{opacity:1}50%{opacity:.15}100%{opacity:1}}
@keyframes dg-swing-px{0%{transform:translateX(0)}50%{transform:translateX(-2.75px)}100%{transform:translateX(0)}}

@media (prefers-reduced-motion:reduce){.g-dango *{animation:none!important}}

/* 設定 → AI のキャラクター: the five sets as cards, the chosen one at work. */
.g-dango-sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:8px}
.g-dango-set{display:grid;gap:4px;justify-items:start;padding:10px 12px;border:1px solid var(--g-line);border-radius:14px;background:transparent;color:var(--g-text);font:inherit;text-align:left;cursor:pointer}
.g-dango-set:hover{background:var(--g-hover)}
.g-dango-set[aria-checked=true]{border-color:var(--g-accent);box-shadow:0 0 0 1px var(--g-accent) inset}
.g-dango-set:focus-visible{outline:2px solid var(--g-accent);outline-offset:2px}
.g-dango-set__faces{display:flex;gap:4px;margin-bottom:2px}
.g-dango-set__name{font-size:14px;font-weight:600}
.g-dango-set small{font-size:12px;color:var(--g-text-2);line-height:1.4}