/* Designed custom titles (title-design-view.jsx). Built to read at 8-12 px. */
.td{position:relative;isolation:isolate;vertical-align:middle}
.td-wide{padding:3px 10px}
.td-text{position:relative;z-index:2;display:inline-block;vertical-align:top;line-height:1.3}
.td-fx,.td-shine,.td-border{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.td-fx{z-index:0;overflow:hidden}.td-shine{z-index:3;overflow:hidden}.td-border{z-index:1;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.td-fx>*{position:absolute;display:block;pointer-events:none;text-decoration:none}
.td-ch{display:inline-block;animation-delay:calc(var(--i) * -.12s)!important}
/* A gradient fill does not reach transformed letters, so each letter carries its slice. */
.td-text[style*=background-image] .td-ch{background-image:inherit;background-size:1000% 100%;background-position:calc(var(--i) * 6%) 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---- motion of the fill and background ---- */
/* The oversized gradient sweeps back and forth inside itself and never wraps,
   so there is no seam where the last colour would meet the first. */
.td-fillmove .td-text{animation:td-fill var(--tsp) ease-in-out infinite alternate}
.td-tm-fire.td-fillmove .td-text{animation-name:td-fill-up}
@keyframes td-fill{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes td-fill-up{from{background-position:50% 100%}to{background-position:50% 0%}}
.td-bgmove{background-size:200% 200%!important;animation:td-bg var(--bsp) ease-in-out infinite alternate}
.td-pulse{animation:td-glow 1.6s ease-in-out infinite}
.td-pulse.td-bgmove{animation:td-glow 1.6s ease-in-out infinite,td-bg var(--bsp) ease-in-out infinite alternate}
@keyframes td-bg{from{background-position:0% 0%}to{background-position:100% 100%}}
@keyframes td-glow{50%{box-shadow:0 0 calc(var(--os) * 1.9) var(--oc),0 0 calc(var(--os) * .5) var(--oc)}}

/* ---- letter motion ---- */
.td-tx-wave .td-ch{animation:td-wave 1.4s ease-in-out infinite}
@keyframes td-wave{0%,100%{transform:translateY(.08em)}50%{transform:translateY(-.22em)}}
.td-tx-float .td-text{animation:td-float 3s ease-in-out infinite}
@keyframes td-float{0%,100%{transform:translateY(.06em)}50%{transform:translateY(-.14em)}}
.td-tx-shake .td-text{animation:td-shake .32s steps(2) infinite}
@keyframes td-shake{0%{transform:translate(.5px,-.5px) rotate(-.6deg)}50%{transform:translate(-.5px,.5px) rotate(.6deg)}100%{transform:translate(.5px,.5px)}}
.td-tx-pulse .td-text{animation:td-beat 1.1s ease-in-out infinite}
@keyframes td-beat{0%,60%,100%{transform:scale(1)}15%{transform:scale(1.1)}30%{transform:scale(.98)}45%{transform:scale(1.06)}}
.td-tx-flicker .td-text{animation:td-flicker 3.2s linear infinite}
@keyframes td-flicker{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.25}}
.td-tx-breathe .td-text{animation:td-breathe 3.4s ease-in-out infinite}
@keyframes td-breathe{0%,100%{letter-spacing:0;opacity:.85}50%{letter-spacing:.14em;opacity:1}}
.td-tx-spin-in .td-ch{animation:td-spin-ch 3.6s ease-in-out infinite;animation-delay:calc(var(--i) * .07s)!important}
@keyframes td-spin-ch{0%,40%,100%{transform:rotateY(0)}20%{transform:rotateY(360deg)}}
.td-tx-drip .td-ch{transform-origin:50% 0;animation:td-drip-ch 2.8s ease-in infinite;animation-delay:calc(var(--i) * -.53s)!important}
@keyframes td-drip-ch{0%,60%,100%{transform:none;filter:none}80%{transform:translateY(.12em) scaleY(1.22);filter:blur(.3px)}}

/* ---- glitch: copies of the words drawn over the real ones ---- */
.td[class*=td-gl-] .td-text::before,.td[class*=td-gl-] .td-text::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;white-space:nowrap;pointer-events:none;background:none;-webkit-background-clip:border-box;background-clip:border-box;text-shadow:none;font-size:1em}
.td-gl-error .td-text::before{color:#ff2e9a;-webkit-text-fill-color:#ff2e9a;clip-path:inset(0 0 55% 0);transform:translateX(calc(var(--gi) * -2.5px));animation:td-err-a 1.9s steps(1) infinite;mix-blend-mode:screen}
.td-gl-error .td-text::after{color:#50dcff;-webkit-text-fill-color:#50dcff;clip-path:inset(48% 0 0 0);transform:translateX(calc(var(--gi) * 2.5px));animation:td-err-b 1.5s steps(1) infinite;mix-blend-mode:screen}
.td-gl-error .td-text{animation:td-err 2.3s steps(1) infinite}
@keyframes td-err{0%,100%{transform:none;filter:none}31%{transform:translateX(calc(var(--gi) * 2px)) skewX(calc(var(--gi) * -12deg));filter:hue-rotate(40deg)}33%{transform:none;filter:none}72%{transform:translateY(calc(var(--gi) * -1px));filter:brightness(1.7)}74%{transform:none;filter:none}}
@keyframes td-err-a{0%{clip-path:inset(0 0 55% 0)}20%{clip-path:inset(10% 0 70% 0);transform:translateX(calc(var(--gi) * -4px))}40%{clip-path:inset(60% 0 5% 0)}60%{clip-path:inset(30% 0 40% 0);transform:translateX(calc(var(--gi) * 3px))}80%{clip-path:inset(0 0 85% 0)}}
@keyframes td-err-b{0%{clip-path:inset(48% 0 0 0)}25%{clip-path:inset(75% 0 0 0);transform:translateX(calc(var(--gi) * 4px))}50%{clip-path:inset(20% 0 55% 0)}75%{clip-path:inset(85% 0 0 0);transform:translateX(calc(var(--gi) * -3px))}}
.td-gl-amolony .td-text{animation:amolony-jit 2.4s steps(1) infinite}
.td-gl-amolony .td-text::before{color:#00e5ff;-webkit-text-fill-color:#00e5ff;transform:translateX(calc(var(--gi) * -1.5px));clip-path:inset(0 0 55% 0);mix-blend-mode:screen;animation:amolony-a 1.7s steps(2) infinite}
.td-gl-amolony .td-text::after{color:#ff2bd6;-webkit-text-fill-color:#ff2bd6;transform:translateX(calc(var(--gi) * 1.5px));clip-path:inset(50% 0 0 0);mix-blend-mode:screen;animation:amolony-b 1.3s steps(2) infinite}
.td-gl-rgb-split .td-text::before{color:#f00;-webkit-text-fill-color:#ff0040;mix-blend-mode:screen;opacity:.8;animation:td-rgb 3s ease-in-out infinite}
.td-gl-rgb-split .td-text::after{color:#00f;-webkit-text-fill-color:#0080ff;mix-blend-mode:screen;opacity:.8;animation:td-rgb 3s ease-in-out infinite reverse}
@keyframes td-rgb{0%,100%{transform:translate(calc(var(--gi) * -1.8px),0)}50%{transform:translate(calc(var(--gi) * 1.8px),calc(var(--gi) * .6px))}}
.td-gl-tear .td-text::before,.td-gl-tear .td-text::after{-webkit-text-fill-color:currentColor;color:inherit;background:inherit}
.td-gl-tear .td-text::before{clip-path:inset(18% 0 58% 0);animation:td-tear-a 2.1s steps(1) infinite}
.td-gl-tear .td-text::after{clip-path:inset(62% 0 14% 0);animation:td-tear-b 1.7s steps(1) infinite}
@keyframes td-tear-a{0%,100%{transform:none}10%{transform:translateX(calc(var(--gi) * 5px))}14%{transform:none}55%{transform:translateX(calc(var(--gi) * -4px));clip-path:inset(40% 0 40% 0)}60%{transform:none}}
@keyframes td-tear-b{0%,100%{transform:none}30%{transform:translateX(calc(var(--gi) * -5px))}35%{transform:none}80%{transform:translateX(calc(var(--gi) * 3px));clip-path:inset(5% 0 80% 0)}84%{transform:none}}
.td-gl-scanlines .td-text::before{content:'';background:repeating-linear-gradient(0deg,rgba(0,0,0,calc(var(--gi) * .55)) 0 1px,transparent 1px 2px)!important;width:auto;right:-50px;left:-50px;animation:td-scan 4s linear infinite}
.td-gl-scanlines .td-text::after{content:'';background:linear-gradient(180deg,transparent,rgba(255,255,255,calc(var(--gi) * .35)),transparent)!important;height:30%;animation:td-roll 2.6s linear infinite}
.td-gl-scanlines .td-text{animation:td-flicker 4.5s linear infinite}
@keyframes td-scan{to{background-position:0 8px}}
@keyframes td-roll{from{top:-30%}to{top:110%}}
.td-gl-corrupt .td-text{animation:td-corrupt 1.6s steps(1) infinite}
.td-gl-corrupt .td-text::before{content:'';background:var(--fxc)!important;mix-blend-mode:difference;animation:td-block 1.1s steps(1) infinite}
.td-gl-corrupt .td-text::after{color:#0f0;-webkit-text-fill-color:#39ff88;mix-blend-mode:screen;animation:td-err-b 0.9s steps(1) infinite}
@keyframes td-corrupt{0%,100%{transform:none;filter:none}12%{transform:skewX(calc(var(--gi) * 25deg)) translateX(1px);filter:invert(1)}15%{transform:none;filter:none}48%{transform:scaleY(calc(1 + var(--gi) * .4));filter:hue-rotate(160deg) saturate(3)}52%{transform:none;filter:none}81%{transform:translateX(calc(var(--gi) * -3px));filter:contrast(3)}84%{transform:none;filter:none}}
@keyframes td-block{0%{clip-path:inset(0 100% 100% 0)}20%{clip-path:inset(20% 60% 50% 10%)}30%{clip-path:inset(0 100% 100% 0)}60%{clip-path:inset(60% 5% 10% 70%)}68%{clip-path:inset(0 100% 100% 0)}85%{clip-path:inset(35% 30% 35% 40%)}90%{clip-path:inset(0 100% 100% 0)}}
.td-gl-vhs .td-text{filter:drop-shadow(calc(var(--gi) * 1.5px) 0 #ff1a55) drop-shadow(calc(var(--gi) * -1.5px) 0 #1ae3ff) blur(.25px);animation:td-vhs 5s steps(1) infinite}
.td-gl-vhs .td-text::before{content:'';background:linear-gradient(180deg,transparent,rgba(255,255,255,calc(var(--gi) * .45)) 50%,transparent)!important;height:25%;left:-50px;width:auto;right:-50px;animation:td-roll 3.4s linear infinite}
.td-gl-vhs .td-text::after{content:none}
@keyframes td-vhs{0%,100%{transform:none}47%{transform:translateX(calc(var(--gi) * 2px)) skewX(-6deg)}49%{transform:none}}

/* ---- shine ---- */
.td-sh-sweep .td-shine::before,.td-sh-double-sweep .td-shine::before,.td-sh-double-sweep .td-shine::after{content:'';position:absolute;top:-60%;bottom:-60%;width:38%;left:-70%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--shc) 85%,transparent),transparent);transform:skewX(-22deg);animation:td-sweep var(--shs) ease-in-out infinite;mix-blend-mode:overlay}
.td-sh-sweep .td-shine::before{mix-blend-mode:normal;opacity:.75}
.td-sh-double-sweep .td-shine::after{width:16%;animation-delay:calc(var(--shs) * .12)}
@keyframes td-sweep{0%{left:-70%}55%,100%{left:140%}}
.td-sh-glint .td-shine::before{content:'';position:absolute;right:3px;top:1px;width:8px;height:8px;background:var(--shc);clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);filter:drop-shadow(0 0 2px var(--shc));animation:td-glint var(--shs) ease-in-out infinite}
.td-sh-glint .td-shine::after{content:'';position:absolute;left:4px;bottom:1px;width:6px;height:6px;background:var(--shc);clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);animation:td-glint var(--shs) ease-in-out infinite;animation-delay:calc(var(--shs) * -.5)}
@keyframes td-glint{0%,70%,100%{transform:scale(0) rotate(0)}80%{transform:scale(1.2) rotate(45deg)}90%{transform:scale(0) rotate(90deg)}}
.td-sh-shimmer .td-shine::before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--shc) 45%,transparent) 50%,transparent 70%) 0 0/300% 100%;animation:td-shim var(--shs) linear infinite}
@keyframes td-shim{from{background-position:100% 0}to{background-position:-200% 0}}
.td-sh-holo .td-shine::before{content:'';position:absolute;inset:-100%;background:conic-gradient(#ff0080,#ffcc00,#00ffb3,#00a2ff,#b300ff,#ff0080);mix-blend-mode:color-dodge;opacity:.4;animation:td-spin calc(var(--shs) * 2) linear infinite}
.td-spark{position:absolute;z-index:3;width:5px;height:5px;margin:-2.5px;background:var(--spc);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 2px var(--spc));animation:td-twinkle 1.9s ease-in-out infinite;animation-delay:calc(var(--i) * -.41s);pointer-events:none}
@keyframes td-twinkle{0%,100%{transform:scale(0) rotate(0)}50%{transform:scale(1) rotate(90deg)}}
@keyframes td-spin{to{transform:rotate(360deg)}}

/* ---- special effects ---- */
/* Black hole: a tilted accretion disk spins around an event horizon that pulls the words in. */
.td-fx-black-hole{box-shadow:0 0 0 1px #000,0 0 calc(var(--fxi) * 18px) color-mix(in srgb,var(--fxc) 75%,transparent),inset 0 0 10px #000}
.td-fx-black-hole .td-fx{background:radial-gradient(ellipse at 50% 50%,#000 0 18%,color-mix(in srgb,var(--fxc) 30%,#000) 42%,#020005 80%)}
.td-fx-black-hole .td-fx i{left:50%;top:50%;width:7em;height:7em;margin:-3.5em;border-radius:50%;background:conic-gradient(from 0deg,transparent,var(--fxc),#fff8,#ffb347,transparent 42%,var(--fxc) 60%,#fff6,transparent 80%);-webkit-mask:radial-gradient(circle,transparent 22%,#000 27%,#000 44%,transparent 62%);mask:radial-gradient(circle,transparent 22%,#000 27%,#000 44%,transparent 62%);opacity:calc(.5 + var(--fxi) * .5);animation:td-disk calc(2.6s / var(--fxi)) linear infinite}
.td-fx-black-hole .td-fx b{left:50%;top:50%;width:1.05em;height:1.05em;margin:-.525em;border-radius:50%;background:#000;box-shadow:0 0 0 1px color-mix(in srgb,var(--fxc) 60%,#fff),0 0 calc(var(--fxi) * 10px) calc(var(--fxi) * 3px) var(--fxc),inset 0 0 6px var(--fxc);animation:td-horizon 2.2s ease-in-out infinite}
.td-fx-black-hole .td-fx u{left:50%;top:50%;width:3.4em;height:3.4em;margin:-1.7em;border-radius:50%;border:1px solid #ffffff40;filter:blur(.6px);animation:td-lens calc(4s / var(--fxi)) linear infinite}
.td-fx-black-hole .td-text{text-shadow:0 0 3px #000,0 0 1px #000;animation:td-pull calc(3.2s / var(--fxi)) ease-in-out infinite}
@keyframes td-disk{from{transform:scaleY(.26) rotate(0)}to{transform:scaleY(.26) rotate(360deg)}}
@keyframes td-horizon{0%,100%{transform:scale(1)}50%{transform:scale(calc(1 + var(--fxi) * .25))}}
@keyframes td-lens{0%{transform:scale(1.6);opacity:0}30%{opacity:1}100%{transform:scale(.2);opacity:0}}
@keyframes td-pull{0%,100%{transform:none;filter:none}50%{transform:scale(calc(1 - var(--fxi) * .1),calc(1 - var(--fxi) * .04)) skewX(calc(var(--fxi) * -4deg));filter:drop-shadow(0 0 3px var(--fxc)) blur(.2px)}}
/* Inferno */
.td-fx-inferno .td-fx{background:linear-gradient(0deg,#3b0505,#120202)}
.td-fx-inferno .td-fx i,.td-fx-inferno .td-fx b{inset:-10% 0 0;background:radial-gradient(ellipse 18% 70% at 15% 100%,#ffcc33,transparent),radial-gradient(ellipse 22% 85% at 45% 100%,#ff5a1f,transparent),radial-gradient(ellipse 16% 60% at 72% 100%,#ffae00,transparent),radial-gradient(ellipse 20% 80% at 95% 100%,#ff3d00,transparent);opacity:calc(var(--fxi));animation:td-flame calc(.9s / var(--fxi)) ease-in-out infinite alternate}
.td-fx-inferno .td-fx b{transform:scaleX(-1);animation-duration:calc(1.3s / var(--fxi));mix-blend-mode:screen}
.td-fx-inferno .td-fx u{left:0;right:0;bottom:0;height:200%;background:radial-gradient(1px 1px at 20% 90%,#ffd27a,transparent),radial-gradient(1px 1px at 60% 70%,#ffae00,transparent),radial-gradient(1px 1px at 85% 95%,#fff2,transparent);background-size:100% 50%;animation:td-rise calc(1.6s / var(--fxi)) linear infinite}
.td-fx-inferno .td-text{filter:drop-shadow(0 0 3px #ff5a1f)}
@keyframes td-flame{0%{transform:scaleY(.8) translateY(8%)}100%{transform:scaleY(1.15) translateY(-4%)}}
@keyframes td-rise{to{transform:translateY(-50%)}}
/* Void rift */
.td-fx-void-rift .td-fx{background:#030008}
.td-fx-void-rift .td-fx i{left:-5%;right:-5%;top:35%;height:30%;background:linear-gradient(90deg,transparent,var(--fxc),#fff,var(--fxc),transparent);clip-path:polygon(0 50%,8% 20%,15% 70%,24% 30%,33% 80%,41% 10%,50% 60%,58% 25%,67% 75%,76% 35%,85% 70%,93% 30%,100% 50%,93% 60%,85% 85%,76% 50%,67% 95%,58% 45%,50% 85%,41% 40%,33% 100%,24% 55%,15% 90%,8% 45%);filter:drop-shadow(0 0 4px var(--fxc));animation:td-rift calc(2s / var(--fxi)) ease-in-out infinite}
.td-fx-void-rift .td-fx b{inset:0;background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--fxc) 45%,transparent),transparent 70%);animation:td-horizon 3s ease-in-out infinite}
@keyframes td-rift{0%,100%{transform:scaleY(.5);opacity:.6}50%{transform:scaleY(calc(1 + var(--fxi)));opacity:1}}
/* Aurora */
.td-fx-aurora .td-fx{background:#020617}
.td-fx-aurora .td-fx i,.td-fx-aurora .td-fx b{top:-50%;bottom:-50%;width:120%;left:-60%;border-radius:50%;background:radial-gradient(ellipse,var(--fxc),transparent 65%);filter:blur(4px);opacity:calc(var(--fxi) * .9);animation:td-drift calc(6s / var(--fxi)) ease-in-out infinite alternate}
.td-fx-aurora .td-fx b{background:radial-gradient(ellipse,#34d399,transparent 65%);animation-duration:calc(8s / var(--fxi));animation-direction:alternate-reverse}
@keyframes td-drift{from{transform:translateX(0) skewX(-20deg)}to{transform:translateX(90%) skewX(20deg)}}
/* Starfall */
.td-fx-starfall .td-fx{background:linear-gradient(180deg,#05051a,#120a2e)}
.td-fx-starfall .td-fx i{inset:-100% 0 0 -100%;background:radial-gradient(1px 1px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 40% 70%,#fffc,transparent),radial-gradient(1px 1px at 75% 35%,#fff,transparent);background-size:22px 14px;animation:td-fall calc(3s / var(--fxi)) linear infinite}
.td-fx-starfall .td-fx b{top:-30%;left:10%;width:24px;height:1px;background:linear-gradient(90deg,transparent,#fff);transform:rotate(25deg);animation:td-meteor calc(2.4s / var(--fxi)) ease-in infinite;filter:drop-shadow(0 0 2px var(--fxc))}
@keyframes td-fall{to{transform:translate(22px,14px)}}
@keyframes td-meteor{0%{transform:translate(0,0) rotate(25deg);opacity:0}10%{opacity:1}40%,100%{transform:translate(120px,56px) rotate(25deg);opacity:0}}
/* Lightning */
.td-fx-lightning .td-fx{background:#07081a;animation:td-sky calc(2.8s / var(--fxi)) steps(1) infinite}
.td-fx-lightning .td-fx i,.td-fx-lightning .td-fx b{top:0;bottom:0;width:14px;left:22%;background:#fff;clip-path:polygon(60% 0,20% 55%,50% 55%,30% 100%,85% 40%,55% 40%,80% 0);filter:drop-shadow(0 0 3px var(--fxc));opacity:0;animation:td-bolt calc(2.8s / var(--fxi)) steps(1) infinite}
.td-fx-lightning .td-fx b{left:70%;transform:scaleX(-1);animation-delay:calc(-1.3s / var(--fxi))}
.td-fx-lightning .td-text{animation:td-strike calc(2.8s / var(--fxi)) steps(1) infinite}
@keyframes td-bolt{0%,100%{opacity:0}2%,6%{opacity:1}4%,8%{opacity:0}}
@keyframes td-sky{0%,100%{background:#07081a}2%,6%{background:color-mix(in srgb,var(--fxc) 50%,#07081a)}}
@keyframes td-strike{0%,100%{filter:none}2%,6%{filter:brightness(2) drop-shadow(0 0 4px var(--fxc))}}
/* Holy light */
.td-fx-holy-light .td-fx{background:radial-gradient(ellipse at 50% 50%,#c9952a,#7a5208 55%,#2e1f02)}
.td-fx-holy-light .td-fx i{left:50%;top:50%;width:12em;height:12em;margin:-6em;background:repeating-conic-gradient(#ffffffcc 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 10%,transparent 60%);mask:radial-gradient(circle,#000 10%,transparent 60%);opacity:var(--fxi);animation:td-spin calc(14s / var(--fxi)) linear infinite}
.td-fx-holy-light .td-fx b{inset:0;background:radial-gradient(ellipse at 50% 50%,#fff6,transparent 55%);animation:td-horizon 3s ease-in-out infinite}
.td-fx-holy-light .td-text{filter:drop-shadow(0 0 1px #3a2500) drop-shadow(0 0 3px #ffd700)}
/* Matrix */
.td-fx-matrix .td-fx{background:#010a03}
.td-fx-matrix .td-fx i,.td-fx-matrix .td-fx b{inset:-100% 0 0;background:repeating-linear-gradient(90deg,transparent 0 5px,#00ff66 5px 6px,transparent 6px 11px),linear-gradient(180deg,transparent,#000);background-blend-mode:multiply;-webkit-mask:repeating-linear-gradient(180deg,#000 0 3px,transparent 3px 9px);mask:repeating-linear-gradient(180deg,#000 0 3px,transparent 3px 9px);opacity:calc(var(--fxi) * .8);animation:td-rain calc(1.4s / var(--fxi)) linear infinite}
.td-fx-matrix .td-fx b{left:3px;opacity:calc(var(--fxi) * .45);animation-duration:calc(2.1s / var(--fxi))}
.td-fx-matrix .td-text{filter:drop-shadow(0 0 2px #00ff66)}
@keyframes td-rain{to{transform:translateY(50%)}}
/* Blood */
.td-fx-blood .td-fx{background:linear-gradient(180deg,#2a0000,#0a0000)}
.td-fx-blood .td-fx i{left:0;right:0;top:0;height:70%;background:radial-gradient(circle at 10% 0,#9b0000 0 22%,transparent 23%),radial-gradient(circle at 30% 0,#c00000 0 18%,transparent 19%),radial-gradient(circle at 52% 0,#8a0000 0 26%,transparent 27%),radial-gradient(circle at 74% 0,#b30000 0 20%,transparent 21%),radial-gradient(circle at 92% 0,#9b0000 0 24%,transparent 25%);transform-origin:50% 0;animation:td-ooze calc(3s / var(--fxi)) ease-in-out infinite alternate}
.td-fx-blood .td-fx b,.td-fx-blood .td-fx u{top:0;left:30%;width:2px;height:4px;border-radius:0 0 50% 50%;background:#d00000;animation:td-drop calc(1.8s / var(--fxi)) ease-in infinite}
.td-fx-blood .td-fx u{left:74%;animation-delay:calc(-.9s / var(--fxi))}
.td-fx-blood .td-text{filter:drop-shadow(0 1px 0 #3a0000) drop-shadow(0 0 3px #ff000088)}
@keyframes td-ooze{from{transform:scaleY(.7)}to{transform:scaleY(1.4)}}
@keyframes td-drop{0%{transform:translateY(0) scaleY(1);opacity:1}80%{transform:translateY(16px) scaleY(1.6);opacity:1}100%{transform:translateY(20px);opacity:0}}
/* Singularity */
.td-fx-singularity .td-fx{background:#000}
.td-fx-singularity .td-fx i{left:50%;top:50%;width:10em;height:10em;margin:-5em;background:repeating-conic-gradient(var(--fxc) 0 3deg,transparent 3deg 12deg);-webkit-mask:radial-gradient(circle,transparent 4%,#000 12%,transparent 55%);mask:radial-gradient(circle,transparent 4%,#000 12%,transparent 55%);animation:td-implode calc(1.6s / var(--fxi)) linear infinite}
.td-fx-singularity .td-fx b{left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px #fff,0 0 14px 5px var(--fxc);animation:td-horizon calc(.8s / var(--fxi)) ease-in-out infinite}
.td-fx-singularity .td-text{animation:td-collapse calc(3s / var(--fxi)) ease-in-out infinite}
@keyframes td-implode{from{transform:rotate(0) scale(1.4)}to{transform:rotate(-90deg) scale(.6)}}
@keyframes td-collapse{0%,100%{transform:none;filter:none}45%{transform:scale(.88);filter:drop-shadow(1px 0 #f0f) drop-shadow(-1px 0 #0ff)}50%{transform:scale(1.08);filter:brightness(1.8)}55%{transform:none}}

/* ---- Eye (title-design-extras.jsx): follows the cursor via --ex/--ey (-1..1). */
.td-eye{position:relative;display:inline-block;vertical-align:middle;width:calc(1.5em*var(--es,1));height:calc(.92em*var(--es,1));margin:0 .28em;z-index:2;--ex:0;--ey:0}
.td-eyeball{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#fff,#e9e2d6);box-shadow:inset 0 -.1em .16em #0006,0 0 0 .07em #111}
.td-eye.is-blink .td-eyeball{animation:td-blink var(--blink) infinite}
.td-iris{position:absolute;left:50%;top:50%;width:calc(.8em*var(--es,1));height:calc(.8em*var(--es,1));border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--ec) 55%,#fff) 0 18%,var(--ec) 42%,color-mix(in srgb,var(--ec) 45%,#000) 70%);
  transform:translate(calc(-50% + var(--ex)*.36em*var(--es,1)),calc(-50% + var(--ey)*.15em*var(--es,1)));transition:transform .1s linear}
.td-iris b{position:absolute;inset:31%;border-radius:50%;background:#000}
.td-iris::after{content:"";position:absolute;left:24%;top:20%;width:18%;height:18%;border-radius:50%;background:#fffd}
.td-eye-numinous .td-eyeball{background:radial-gradient(ellipse at 50% 50%,#1d0b33,#05010a 75%);box-shadow:0 0 0 .06em var(--ec),0 0 .35em var(--ec),inset 0 0 .25em #000}
.td-eye-numinous .td-iris{background:radial-gradient(circle,#fff 0 10%,var(--ec) 26%,color-mix(in srgb,var(--ec) 40%,transparent) 48%,transparent 66%);box-shadow:0 0 .3em var(--ec)}
.td-eye-numinous .td-iris b{inset:40%;background:#000;box-shadow:0 0 0 .04em #fff8}
.td-eye-reptile .td-eyeball{background:radial-gradient(circle,color-mix(in srgb,var(--ec) 60%,#fff),var(--ec) 60%,color-mix(in srgb,var(--ec) 40%,#000))}
.td-eye-reptile .td-iris{background:transparent;width:calc(1.1em*var(--es,1))}
.td-eye-reptile .td-iris b{inset:4% 44%;border-radius:50%}
.td-eye-void .td-eyeball{background:#000;box-shadow:0 0 0 .05em #fff3,0 0 .4em #000}
.td-eye-void .td-iris{background:radial-gradient(circle,transparent 0 30%,#fff 36%,var(--ec) 48%,transparent 66%)}
.td-eye-void .td-iris b{inset:34%}.td-eye-void .td-iris::after{display:none}
.td-eye-eye-of-providence{width:calc(1.5em*var(--es,1));height:calc(1.3em*var(--es,1))}
.td-eye-eye-of-providence::before,.td-eye-eye-of-providence::after{content:"";position:absolute;inset:0;clip-path:polygon(50% 0,100% 100%,0 100%)}
.td-eye-eye-of-providence::before{background:var(--ec);filter:drop-shadow(0 0 .2em var(--ec))}
.td-eye-eye-of-providence::after{inset:.1em .14em .07em;background:#140d02}
.td-eye-eye-of-providence .td-eyeball{inset:46% 22% 12%;z-index:1;box-shadow:0 0 0 .05em var(--ec)}
.td-eye-eye-of-providence .td-iris{width:calc(.42em*var(--es,1));height:calc(.42em*var(--es,1));transform:translate(calc(-50% + var(--ex)*.22em*var(--es,1)),calc(-50% + var(--ey)*.06em*var(--es,1)))}
.td-eye.is-behind{position:absolute;left:50%;top:50%;margin:0;font-size:1.3em;transform:translate(-50%,-50%);opacity:.55;z-index:1;pointer-events:none}
@keyframes td-blink{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.06)}}

/* ---- The Gambler. */
.td-die{display:inline-grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:.05em;width:1.02em;height:1.02em;padding:.1em;margin-right:.32em;vertical-align:middle;border-radius:.2em;background:#fff;box-shadow:inset 0 -.08em 0 #0003,0 0 0 .05em var(--gmc),0 0 .3em color-mix(in srgb,var(--gmc) 60%,transparent);position:relative;z-index:2}
.td-die.is-rolling{animation:td-tumble .64s cubic-bezier(.3,.9,.4,1)}
.td-die.is-six{animation:td-six .9s ease-out}.td-die.is-one{animation:td-one .6s ease-out}
@keyframes td-tumble{0%{transform:translateY(-.5em) rotate(0)}30%{transform:translateY(.05em) rotate(200deg) scale(.9)}50%{transform:translateY(-.22em) rotate(300deg)}75%{transform:translateY(0) rotate(345deg)}88%{transform:translateY(-.05em) rotate(358deg)}100%{transform:none}}
@keyframes td-six{0%{box-shadow:0 0 0 .05em #ffd23f,0 0 .9em #ffd23f;transform:scale(1.25)}100%{transform:none}}
@keyframes td-one{0%,100%{transform:none}30%{transform:translateX(-.06em)}60%{transform:translateX(.06em)}}
.td-text+.td-die{margin:0 0 0 .32em}
.td-die i{border-radius:50%}.td-die i.on{background:#121212}
.td-reel{display:inline-block;height:1.3em;overflow:hidden;vertical-align:top}
.td-strip{display:flex;flex-direction:column}
.td-strip.is-spinning{animation:td-reel var(--d) cubic-bezier(.3,0,.2,1.08) both}
.td-strip .is-miss{opacity:.75;filter:grayscale(.4)}
.td-reels.is-jackpot{display:inline-block;animation:td-jackpot 1.1s ease-out}
.td-strip>span{display:block;height:1.3em;line-height:1.3em;text-align:center}
@keyframes td-reel{0%{transform:translateY(0);filter:none}30%,70%{filter:blur(.05em)}100%{transform:translateY(calc(var(--n) * -1.3em));filter:none}}
@keyframes td-jackpot{0%{filter:drop-shadow(0 0 .3em #ffd23f) brightness(1.8);transform:scale(1.12)}100%{filter:none;transform:none}}
.td-cards{position:relative;display:inline-block;width:2em;height:1em;margin-left:.3em;vertical-align:middle;z-index:2}
.td-cards i{position:absolute;left:calc(var(--i)*.6em);top:-.1em;width:1.15em;height:1.6em;font-size:.62em;line-height:1.6em;font-style:normal;text-align:center;color:#111;background:#fff;border-radius:.16em;box-shadow:0 0 0 .06em var(--gmc),0 .1em .2em #0006;
  transform:rotate(calc((var(--i) - 1)*16deg));transform-origin:50% 130%;animation:td-fan var(--gsp) ease-in-out infinite;-webkit-text-fill-color:currentColor}
.td-cards i.red{color:#dc2626}
.td-cards i{font-weight:800;letter-spacing:-.06em;line-height:1.05;padding-top:.15em;box-sizing:border-box}.td-cards i small{display:block;font-size:.9em}
.td-cards.is-dealt i{animation:td-deal .45s cubic-bezier(.3,1.3,.5,1) both,td-fan var(--gsp) ease-in-out .5s infinite;animation-delay:calc(var(--i)*.09s),calc(.5s + var(--i)*.09s)}
.td-cards.is-win i{box-shadow:0 0 0 .08em #ffd23f,0 0 .5em #ffd23f}
@keyframes td-deal{from{transform:translate(-1.2em,-.6em) rotate(-40deg);opacity:0}}
@keyframes td-fan{0%,100%{transform:rotate(calc((var(--i) - 1)*16deg))}50%{transform:rotate(calc((var(--i) - 1)*26deg)) translateY(-.15em)}}
.td-chips{display:inline-flex;flex-direction:column-reverse;vertical-align:middle;margin:0 .3em;position:relative;z-index:2}
.td-chips i{display:block;width:1em;height:.32em;margin-top:-.1em;border-radius:50%;background:repeating-conic-gradient(var(--gmc) 0 30deg,#fff 30deg 45deg);box-shadow:0 .05em 0 color-mix(in srgb,var(--gmc) 50%,#000);animation:td-chip var(--gsp) ease-in-out infinite}
.td-chips i{animation:none}.td-chips i:last-child{animation:td-chip-in .35s cubic-bezier(.3,1.4,.5,1)}
.td-chips.is-won{filter:drop-shadow(0 0 .2em #5ee08a)}.td-chips.is-lost{animation:td-one .5s}
@keyframes td-chip-in{from{transform:translateY(-.6em);opacity:0}}
.td-coin{display:inline-grid;place-items:center;width:.95em;height:.95em;margin-right:.32em;vertical-align:middle;border-radius:50%;position:relative;z-index:2;
  background:radial-gradient(circle at 35% 30%,#fff8,transparent 40%),var(--gmc);box-shadow:inset 0 0 0 .08em color-mix(in srgb,var(--gmc) 55%,#000),0 0 .3em color-mix(in srgb,var(--gmc) 60%,transparent);}
.td-coin.is-flip{animation:td-flip .9s cubic-bezier(.3,.7,.4,1)}.td-coin.is-tails{filter:hue-rotate(-25deg) saturate(.8)}
.td-coin b{font-size:.62em;color:color-mix(in srgb,var(--gmc) 35%,#000);-webkit-text-fill-color:currentColor}
@keyframes td-flip{0%{transform:translateY(0) rotateX(0)}45%{transform:translateY(-.55em) rotateX(900deg)}100%{transform:translateY(0) rotateX(1800deg)}}
.td-bulbs{position:absolute;inset:1px;border-radius:inherit;pointer-events:none;z-index:3;--b:radial-gradient(circle,#fff 0 .05em,var(--gmc) .07em,transparent .13em);
  background:var(--b) 0 0/.42em .3em repeat-x,var(--b) 0 100%/.42em .3em repeat-x,var(--b) 0 0/.3em .42em repeat-y,var(--b) 100% 0/.3em .42em repeat-y;
  filter:drop-shadow(0 0 .12em var(--gmc));animation:td-chase .5s steps(2) infinite}
@keyframes td-chase{to{background-position:.21em 0,-.21em 100%,0 -.21em,100% .21em}}

/* ---- The Hacker. */
.td-hk{--hkg:color-mix(in srgb,var(--hkc) 65%,transparent)}
.td-hk-prompt,.td-hk-hex,.td-hk-bin,.td-hk-access,.td-hk-br{font-family:'Space Mono',ui-monospace,monospace;color:var(--hkc);-webkit-text-fill-color:var(--hkc);text-shadow:0 0 .35em var(--hkg);position:relative;z-index:2;vertical-align:middle}
.td-hk-prompt{font-size:.78em;font-weight:700;margin-right:.35em;letter-spacing:0;animation:td-hk-flick 3.2s steps(1) infinite}
.td-hk-cursor{display:inline-block;width:.5em;height:1em;margin-left:.12em;vertical-align:-.12em;background:var(--hkc);box-shadow:0 0 .4em var(--hkg);animation:td-hk-blink calc(var(--hsp)*4 + .3s) steps(1) infinite;position:relative;z-index:2}
.td-hk-br{font-weight:700;font-size:1.05em;animation:td-hk-breathe calc(var(--hsp)*10 + .6s) ease-in-out infinite}
.td-hk-br:first-of-type{margin-right:.15em}.td-text~.td-hk-br{margin-left:.15em;animation-delay:calc(var(--hsp)*-5)}
.td-hk-bin{display:inline-flex;gap:.02em;font-size:.62em;font-weight:700;margin:0 .4em;letter-spacing:0}
.td-hk-bin i{font-style:normal;animation:td-hk-bit .35s ease-out}
.td-hk-hex{font-size:.66em;font-weight:700;margin-right:.4em;padding:.05em .25em;border:1px solid var(--hkg);border-radius:.2em;animation:td-hk-hexin .4s steps(4)}
.td-hk-skull{display:inline-block;position:relative;z-index:2;margin:0 .25em;color:var(--hkc);-webkit-text-fill-color:var(--hkc);text-shadow:0 0 .35em var(--hkg);animation:td-hk-skull calc(var(--hsp)*12 + 1s) steps(1) infinite}
.td-hk-skull::before,.td-hk-skull::after{content:attr(data-s);position:absolute;inset:0;opacity:.8}
.td-hk-skull::before{color:#ff2bd6;-webkit-text-fill-color:#ff2bd6;transform:translate(-.06em,0);clip-path:inset(0 0 55% 0);animation:td-hk-split calc(var(--hsp)*6 + .5s) steps(2) infinite}
.td-hk-skull::after{color:#00e5ff;-webkit-text-fill-color:#00e5ff;transform:translate(.06em,0);clip-path:inset(50% 0 0 0);animation:td-hk-split calc(var(--hsp)*6 + .5s) steps(2) infinite reverse}
.td-hk-access{font-size:.56em;font-weight:700;letter-spacing:.08em;margin-left:.45em;padding:.1em .35em;border-radius:.2em;color:#ff4d6d;-webkit-text-fill-color:#ff4d6d;border:1px solid #ff4d6d;text-shadow:0 0 .3em #ff4d6d88;animation:td-hk-deny .4s steps(4)}
.td-hk-access.is-ok{color:var(--hkc);-webkit-text-fill-color:var(--hkc);border-color:var(--hkc);text-shadow:0 0 .35em var(--hkg);animation:td-hk-grant .6s ease-out}
.td-hk-load{position:absolute;left:.4em;right:.4em;bottom:.12em;height:.12em;border-radius:1em;background:color-mix(in srgb,var(--hkc) 18%,transparent);overflow:hidden;z-index:3;pointer-events:none}
.td-hk-load i{display:block;height:100%;width:var(--p);background:var(--hkc);box-shadow:0 0 .4em var(--hkc);transition:width .25s steps(3)}
.td-hk-load.is-done i{animation:td-hk-done .5s steps(2) 2}
.td-hk-typing .td-text,.td-hk-root .td-text{white-space:pre}
@keyframes td-hk-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes td-hk-flick{0%,92%,96%,100%{opacity:1}94%{opacity:.25}}
@keyframes td-hk-breathe{0%,100%{opacity:.6;transform:none}50%{opacity:1;transform:scale(1.12)}}
@keyframes td-hk-bit{from{transform:translateY(-.5em);opacity:0;color:#fff;-webkit-text-fill-color:#fff}}
@keyframes td-hk-hexin{0%{opacity:.2;filter:blur(1px)}100%{opacity:1}}
@keyframes td-hk-skull{0%,86%,100%{transform:none}88%{transform:translate(.06em,-.04em) skewX(12deg)}90%{transform:translate(-.08em,.03em)}92%{transform:scale(1.15)}}
@keyframes td-hk-split{0%{transform:translate(-.08em,0)}50%{transform:translate(.08em,.02em)}}
@keyframes td-hk-deny{0%,50%{transform:translateX(-.08em)}25%,75%{transform:translateX(.08em)}100%{transform:none}}
@keyframes td-hk-grant{0%{transform:scale(1.3);box-shadow:0 0 .8em var(--hkc)}100%{transform:none}}
@keyframes td-hk-done{50%{opacity:.2}}

/* ---- Ornaments: drawn outside the pill, so it stops clipping. */
.td.td-has-orn{overflow:visible;margin-top:.45em}
.td.td-has-wings{margin-left:1.2em;margin-right:1.2em}
.td-orn{position:absolute;inset:0;pointer-events:none;z-index:4;color:var(--orc)}
.td-orn-p{position:absolute;display:block}
.td-orn-p svg{display:block;width:100%;height:100%;filter:drop-shadow(0 0 .12em color-mix(in srgb,var(--orc) 70%,transparent))}
.td-orn-c{left:50%;top:-.92em;width:1.5em;height:.9em;transform:translateX(-50%)}
.td-orn-halo{left:50%;top:-.62em;width:2.3em;height:.5em;transform:translateX(-50%);border:.13em solid var(--orc);border-radius:50%;box-shadow:0 0 .3em var(--orc),inset 0 0 .2em var(--orc)}
.td-has-horns .td-orn-l,.td-has-horns .td-orn-r{top:-.78em;width:.7em;height:.88em}
.td-has-horns .td-orn-l{left:.08em}.td-has-horns .td-orn-r{right:.08em;transform:scaleX(-1)}
.td-has-cat-ears .td-orn-l,.td-has-cat-ears .td-orn-r{top:-.66em;width:.75em;height:.75em}
.td-has-cat-ears .td-orn-l{left:.2em}.td-has-cat-ears .td-orn-r{right:.2em;transform:scaleX(-1)}
.td-orn-wl,.td-orn-wr{top:50%;width:1.35em;height:1em;margin-top:-.55em}
.td-orn-wl{left:-1.3em;transform-origin:100% 50%}.td-orn-wr{right:-1.3em;transform-origin:0 50%;transform:scaleX(-1)}
.td-orn-f1,.td-orn-f2,.td-orn-f3{top:-.82em;width:.55em;height:.85em;transform-origin:50% 100%}
.td-orn-f1{left:14%}.td-orn-f2{left:calc(50% - .3em);height:1em;top:-.98em}.td-orn-f3{right:14%}
.td-orn-al,.td-orn-ar{top:-1em;width:.4em;height:.98em;transform-origin:50% 100%}
.td-orn-al{left:24%;transform:rotate(-16deg)}.td-orn-ar{right:24%;transform:rotate(16deg)}
.td-orn-moves .td-orn-c,.td-orn-moves .td-orn-halo{animation:td-orn-bob 2.6s ease-in-out infinite}
.td-orn-moves .td-orn-wl{animation:td-flap-l 1.3s ease-in-out infinite}.td-orn-moves .td-orn-wr{animation:td-flap-r 1.3s ease-in-out infinite}
.td-orn-moves .td-orn-f1,.td-orn-moves .td-orn-f2,.td-orn-moves .td-orn-f3{animation:td-flick .5s ease-in-out infinite alternate}
.td-orn-moves .td-orn-f2{animation-delay:-.2s}.td-orn-moves .td-orn-f3{animation-delay:-.35s}
.td-orn-moves .td-orn-al{animation:td-ant-l 1.8s ease-in-out infinite}.td-orn-moves .td-orn-ar{animation:td-ant-r 1.8s ease-in-out infinite}
.td-orn-moves.td-has-cat-ears .td-orn-l{animation:td-ear 3.4s ease-in-out infinite}
@keyframes td-orn-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-.14em)}}
@keyframes td-flap-l{0%,100%{transform:rotate(0)}50%{transform:rotate(-18deg)}}
@keyframes td-flap-r{0%,100%{transform:scaleX(-1) rotate(0)}50%{transform:scaleX(-1) rotate(-18deg)}}
@keyframes td-flick{from{transform:scaleY(.85) skewX(-4deg)}to{transform:scaleY(1.12) skewX(5deg)}}
@keyframes td-ant-l{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(-4deg)}}
@keyframes td-ant-r{0%,100%{transform:rotate(16deg)}50%{transform:rotate(4deg)}}
@keyframes td-ear{0%,88%,100%{transform:none}92%{transform:rotate(-14deg)}}
html.perf-mode .td,html.perf-mode .td *,html.perf-mode .td *::before,html.perf-mode .td *::after{animation:none!important}
@media (prefers-reduced-motion:reduce){.td,.td *,.td *::before,.td *::after{animation-duration:0s!important;animation-iteration-count:1!important}}

/* ---- @awe's title editor ---- */
.td-editor{display:grid!important;gap:10px;padding:12px;border:1px solid var(--outline);border-radius:10px;background:var(--surface)}
.td-editor-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.td-editor-head input{flex:1 1 200px}
.td-stage{display:grid;gap:8px;border-radius:8px;overflow:hidden}
.td-stage-big{display:grid;place-items:center;min-height:96px;padding:18px;background:radial-gradient(circle at 50% 40%,#232336,#0b0b12);border-radius:8px}
.td-stage-big .title-tag{font-size:22px;max-width:100%}
.td-stage-real{display:grid;grid-template-columns:1fr 1fr;gap:8px}.td-stage-real>span{display:grid;place-items:center;padding:10px;border-radius:8px;min-width:0}
.td-on-dark{background:#111118}.td-on-light{background:#f3f4f6}.td-stage-real .title-tag{font-size:10px}
.td-tabs{display:flex;flex-wrap:wrap;gap:4px}
.td-tabs button{padding:5px 10px;border-radius:999px;border:1px solid var(--outline);background:transparent;color:var(--prose-2);font-size:11px;text-transform:none}
.td-tabs button.is-on{background:var(--prose);color:var(--site-bg);border-color:var(--prose)}
.td-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px 14px;min-height:64px;align-content:start}
.td-field{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 8px;font-size:11px;color:var(--prose-2)}
.td-field--range{grid-template-columns:1fr 38px}.td-field--range>span{grid-column:1/-1}.td-field--range input{width:100%;accent-color:#a78bfa}
.td-field output{font:11px var(--font-mono,monospace);text-align:right;color:var(--prose)}
.td-field select{max-width:150px}
.td-field input[type=color]{width:36px;height:24px;padding:0;border:1px solid var(--outline);border-radius:6px;background:none;cursor:pointer}
.td-editor-actions{display:flex;gap:8px}
.td-iris-runes{display:none}.td-eye-celestial .td-eyeball{background:radial-gradient(ellipse,#fff8df,#c6c5fa);box-shadow:0 0 8px var(--ec,#a855f7)}.td-eye-celestial .td-iris-runes,.td-eye-clockwork .td-iris-runes{display:block;position:absolute;inset:-35%;border:1px dashed currentColor;border-radius:50%;animation:td-eye-orbit 9s linear infinite}.td-eye-celestial .td-iris{background:repeating-conic-gradient(#fff8 0deg 4deg,transparent 5deg 20deg),var(--ec,#a855f7)}.td-eye-abyssal .td-eyeball{background:#090716;border:1px solid #9b63dd}.td-eye-abyssal .td-iris{box-shadow:0 0 8px 3px var(--ec,#a855f7);animation:td-eye-breathe 2.7s ease-in-out infinite}.td-eye-abyssal .td-iris b{border-radius:30% 70%;transform:scale(.5,1.4)}.td-eye-clockwork .td-eyeball{background:#dac59a}.td-eye-clockwork .td-iris{background:repeating-conic-gradient(#edc168 0deg 10deg,#38221b 11deg 30deg)}.td-eye-compound .td-eyeball{background:radial-gradient(circle at 20% 30%,var(--ec,#a855f7) 5%,transparent 9%),radial-gradient(circle at 70% 70%,var(--ec,#a855f7) 6%,transparent 12%),#130e25;background-size:9px 9px}.td-eye-compound .td-iris{opacity:.8;box-shadow:0 0 5px white}@keyframes td-eye-orbit{to{transform:rotate(360deg)}}@keyframes td-eye-breathe{50%{filter:brightness(1.6);scale:1.1}}