.typography-studio{padding:20px;border:1px solid #72508c;border-radius:18px;background:linear-gradient(145deg,#170e22,#08090e);color:#eee;min-width:0}.typography-studio header h2{font-size:25px;margin:10px 0}.typography-studio header p{line-height:1.7;color:#baaacb}.type-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.type-targets{display:grid;gap:12px}.type-sample{position:sticky;top:10px;z-index:2;margin:18px 0;padding:28px 16px;background:#09070f;border:1px solid #70468c;border-radius:14px;overflow:hidden;min-height:150px}.type-sample p{margin:0 0 18px;overflow-wrap:anywhere}.type-sample small{font:11px Consolas,monospace;color:#ad98c1}.typography-studio details{padding:14px 0;border-top:1px solid #443150}.typography-studio summary{cursor:pointer;font-weight:700}.type-properties{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.type-field>span{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px}.type-field button{border:0;background:none;color:#bd8de3;cursor:pointer}.type-field input,.type-field select{width:100%;min-width:0}.type-font-filter{display:grid;gap:8px;margin:12px 0}#type-font-results{max-height:320px;overflow:auto;display:grid;gap:8px}.type-font-row{display:grid;grid-template-columns:1fr 36px;align-items:center;border:1px solid #45334f;border-radius:10px;padding:10px;background:#100b18}.type-font-row button{color:#dfc2ff;border:0;background:none;text-align:left;font-size:23px;cursor:pointer}.type-font-row small{font-size:10px;color:#ac96bb}.type-effect-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0;max-height:400px;overflow:auto}.type-effect-card{border:1px solid #503660;background:#09070e;color:#ccb4df;border-radius:12px;padding:20px 10px;cursor:pointer}.type-effect-card span{display:block;font:900 26px Arial;position:relative;isolation:isolate}.type-effect-card small{display:block;margin-top:12px}.type-effect-card:not(:hover) span,.type-effect-card:not(:hover) span:after,.type-effect-card:not(:hover) span:before{animation-play-state:paused!important}.type-legacy{margin:20px 0;padding:12px;border:1px dashed #644a74}.typography-managed{overflow-wrap:anywhere;max-width:100%}
.typography-managed[data-type-trigger=hover]:not(:hover),.typography-managed[data-type-trigger=hover]:not(:hover):before,.typography-managed[data-type-trigger=hover]:not(:hover):after,.typography-managed[data-type-paused=true],.typography-managed[data-type-paused=true]:before,.typography-managed[data-type-paused=true]:after,.type-page-hidden .typography-managed,.type-page-hidden .typography-managed:after,.type-page-hidden .typography-managed:before{animation-play-state:paused!important}
.typography-managed:before,.typography-managed:after{animation-duration:inherit;animation-delay:inherit;animation-direction:inherit;animation-iteration-count:inherit;animation-fill-mode:inherit}
:is(.site-design,.admin,#startup-screen) :is(.text-motion-startup-glitch,.text-motion-float,.text-motion-underline,.text-motion-wave,.text-motion-slide-in,.text-motion-stagger-in,.text-motion-type-reveal,.text-motion-electric,.text-motion-arcade,.text-motion-decode,.text-motion-signal-noise){background:none!important;-webkit-text-fill-color:var(--text-tint);color:var(--text-tint)!important;position:relative;animation:ty-float var(--text-duration) ease-in-out infinite}
:is(.site-design,.admin,#startup-screen) .text-motion-startup-glitch{animation:startup-glitch var(--text-duration) steps(1) infinite;text-shadow:2px 0 var(--text-secondary),-2px 0 var(--text-tint)}
:is(.site-design,.admin,#startup-screen) .text-motion-underline{animation:none}
.text-motion-underline:after{content:"";position:absolute;bottom:-.06em;left:0;width:100%;height:2px;background:var(--text-secondary);transform-origin:left;animation:ty-line var(--text-duration) ease-in-out infinite}
:is(.site-design,.admin,#startup-screen) .text-motion-wave{animation:ty-wave var(--text-duration) ease-in-out infinite}
:is(.site-design,.admin,#startup-screen) .text-motion-slide-in{animation:ty-slide var(--text-duration) ease-out infinite}
:is(.site-design,.admin,#startup-screen) .text-motion-stagger-in{animation:ty-stagger var(--text-duration) steps(5,end) infinite}
:is(.site-design,.admin,#startup-screen) .text-motion-type-reveal{animation:ty-type var(--text-duration) steps(24,end) infinite}
:is(.site-design,.admin,#startup-screen) .text-motion-electric{animation:ty-electric var(--text-duration) steps(1) infinite}
:is(.site-design,.admin,#startup-screen) .text-motion-arcade{animation:ty-arcade var(--text-duration) steps(4) infinite}
:is(.site-design,.admin,#startup-screen) .text-motion-decode{animation:ty-decode var(--text-duration) steps(10) infinite}
:is(.site-design,.admin,#startup-screen) .text-motion-signal-noise{animation:ty-noise var(--text-duration) steps(1) infinite}
@keyframes ty-float{50%{transform:translateY(calc(var(--text-offset)*-1))}}
@keyframes ty-line{0%,100%{transform:scaleX(.05)}50%{transform:scaleX(1)}}
@keyframes ty-wave{25%{transform:skewY(1deg)}75%{transform:skewY(-1deg)}}
@keyframes ty-slide{0%{transform:translateX(-12px);opacity:0}25%,100%{transform:none;opacity:1}}
@keyframes ty-stagger{0%{clip-path:inset(0 100% 0 0)}45%,100%{clip-path:inset(0)}}
@keyframes ty-type{0%{clip-path:inset(0 100% 0 0)}60%,100%{clip-path:inset(0)}}
@keyframes ty-electric{0%,30%,34%,100%{text-shadow:0 0 3px var(--text-secondary)}31%,33%{text-shadow:2px -2px 2px var(--text-secondary),-2px 2px 2px var(--text-tint)}}
@keyframes ty-arcade{0%,100%{text-shadow:2px 2px var(--text-secondary)}50%{text-shadow:-2px 2px var(--text-secondary)}}
@keyframes ty-decode{0%{letter-spacing:.2em;opacity:.4}35%,100%{letter-spacing:inherit;opacity:1}}
@keyframes ty-noise{0%,45%,49%,100%{transform:none}46%{transform:translateX(var(--text-offset)) skewX(3deg)}48%{transform:translateX(calc(var(--text-offset)*-1))}}
@media(prefers-reduced-motion:reduce){.typography-managed,.typography-managed:before,.typography-managed:after,.type-effect-card *{animation:none!important;transition:none!important}}
@media(max-width:600px){.type-properties{grid-template-columns:1fr}.typography-studio{padding:14px}.type-sample{position:relative;top:auto}}
.admin .typography-studio label{margin:0;gap:6px}.admin .typography-studio .type-toolbar .button{min-height:32px;padding:7px 10px;font-size:11px}.type-targets{grid-template-columns:1fr 1fr}.type-targets>label:first-child{grid-column:1/-1}.typography-studio .type-sample{min-height:100px;padding:20px 14px}.typography-studio header p{font-size:12px}.typography-studio .subtle{font-size:11px;line-height:1.6}
@media(min-width:1100px){.builder-workspace:has([data-studio-tab=type][aria-selected=true]){grid-template-columns:minmax(420px,.9fr) minmax(0,1.1fr)}}
.typography-managed[data-type-visible=false],.typography-managed[data-type-visible=false]:before,.typography-managed[data-type-visible=false]:after{animation-play-state:paused!important}
/* Layered glitch studies adapted from the owner's supplied references. No page-wide resets. */
:is(.text-motion-rgb-slice,.text-motion-scan-noise,.text-motion-glitchcore,.text-motion-channel-tear){position:relative;isolation:isolate}
:is(.text-motion-rgb-slice,.text-motion-scan-noise,.text-motion-glitchcore,.text-motion-channel-tear)::before,:is(.text-motion-rgb-slice,.text-motion-scan-noise,.text-motion-glitchcore,.text-motion-channel-tear)::after{content:attr(data-glitch);position:absolute;inset:0;pointer-events:none;font:inherit;letter-spacing:inherit;line-height:inherit;text-align:inherit;white-space:inherit;color:var(--text-secondary,#ff4fd8);-webkit-text-fill-color:currentColor;background:none;animation-duration:inherit;animation-delay:inherit;animation-direction:inherit;animation-iteration-count:inherit;animation-play-state:inherit;animation-fill-mode:both}
:is(.text-motion-rgb-slice,.text-motion-scan-noise,.text-motion-glitchcore,.text-motion-channel-tear)::after{color:var(--text-third,#fff)}
.text-motion-rgb-slice{animation:ty-rgb var(--text-duration,1s) steps(1) infinite}
.text-motion-rgb-slice::before{clip-path:inset(0 0 65%);opacity:.8;animation-name:ty-rgb-top}
.text-motion-rgb-slice::after{clip-path:inset(65% 0 0);opacity:.75;animation-name:ty-rgb-bottom}
@keyframes ty-rgb{0%,15%{text-shadow:var(--text-offset) 0 var(--text-secondary),calc(var(--text-offset)*-1) calc(var(--text-offset)*-.8) var(--text-third)}16%,49%{text-shadow:calc(var(--text-offset)*-1) calc(var(--text-offset)*-.5) var(--text-secondary),var(--text-offset) var(--text-offset) var(--text-third)}50%,99%{text-shadow:var(--text-offset) var(--text-offset) var(--text-secondary),0 calc(var(--text-offset)*-1) var(--text-third)}100%{text-shadow:calc(var(--text-offset)*-1) 0 var(--text-secondary)}}
@keyframes ty-rgb-top{0%,22%,71%,100%{transform:translate(calc(var(--text-offset)*-1),-1px)}23%,70%{transform:translate(var(--text-offset),1px)}}
@keyframes ty-rgb-bottom{0%,34%,81%,100%{transform:translate(var(--text-offset),1px)}35%,80%{transform:translate(calc(var(--text-offset)*-1),-1px)}}
.text-motion-scan-noise{animation:ty-still var(--text-duration,2s) linear infinite}
.text-motion-scan-noise::before{animation-name:ty-scan-a;text-shadow:calc(var(--text-offset)*-1) 0 var(--text-secondary)}
.text-motion-scan-noise::after{animation-name:ty-scan-b;text-shadow:var(--text-offset) 0 var(--text-third)}
@keyframes ty-still{from{isolation:isolate}to{isolation:isolate}}
@keyframes ty-scan-a{0%,100%{clip-path:inset(4% 0 88%);transform:translateX(var(--text-offset))}15%{clip-path:inset(54% 0 30%)}30%{clip-path:inset(21% 0 68%)}45%{clip-path:inset(79% 0 8%)}60%{clip-path:inset(40% 0 44%);transform:translateX(calc(var(--text-offset)*-2))}75%{clip-path:inset(8% 0 73%)}90%{clip-path:inset(62% 0 27%)}}
@keyframes ty-scan-b{0%,100%{clip-path:inset(68% 0 23%);transform:translateX(calc(var(--text-offset)*-1))}12%{clip-path:inset(25% 0 60%)}27%{clip-path:inset(83% 0 5%)}42%{clip-path:inset(10% 0 80%)}57%{clip-path:inset(48% 0 36%);transform:translateX(calc(var(--text-offset)*2))}72%{clip-path:inset(31% 0 55%)}87%{clip-path:inset(74% 0 14%)}}
.text-motion-glitchcore{animation:ty-still var(--text-duration,2.6s) steps(1) infinite}
.text-motion-glitchcore::before{clip-path:inset(0 0 55%);animation-name:ty-burst-a}
.text-motion-glitchcore::after{clip-path:inset(45% 0 0);animation-name:ty-burst-b}
@keyframes ty-burst-a{0%,12%,20%,55%,100%{transform:none;opacity:0}13%,48%{transform:translate(calc(var(--text-offset)*-2),-2px);opacity:.9}16%,51%{transform:translate(calc(var(--text-offset)*2),1px);opacity:.9}}
@keyframes ty-burst-b{0%,14%,22%,60%,100%{transform:none;opacity:0}15%,52%{transform:translate(calc(var(--text-offset)*2),2px);opacity:.9}18%,56%{transform:translate(calc(var(--text-offset)*-2),-1px);opacity:.9}}
.text-motion-channel-tear{animation:ty-still var(--text-duration,1s) steps(1) infinite}
.text-motion-channel-tear::before{animation-name:ty-scan-b;transform:translateX(calc(var(--text-offset)*-2));text-shadow:calc(var(--text-offset)*-2) 0 var(--text-secondary)}
.text-motion-channel-tear::after{animation-name:ty-scan-a;transform:translateX(calc(var(--text-offset)*2));text-shadow:calc(var(--text-offset)*2) 0 var(--text-third)}
@media(prefers-reduced-motion:reduce){:is(.text-motion-rgb-slice,.text-motion-scan-noise,.text-motion-glitchcore,.text-motion-channel-tear)::before,:is(.text-motion-rgb-slice,.text-motion-scan-noise,.text-motion-glitchcore,.text-motion-channel-tear)::after{display:none!important}}
/* Faithful animation ports of the four supplied examples; demo body resets excluded.
   duration=6 is original speed; intensity=35 is original displacement. */
:is(.text-motion-rgb-slice,.text-motion-scan-noise,.text-motion-glitchcore,.text-motion-channel-tear){--fx-speed:calc(var(--text-duration,6s)/6);--fx-scale:calc(var(--text-offset,1.75px)/1.75px)}
.text-motion-rgb-slice{animation-name:original-rgb;animation-duration:calc(var(--fx-speed)*.725)!important;animation-timing-function:ease}
.text-motion-rgb-slice::before{animation:original-rgb calc(var(--fx-speed)*.5) infinite;clip-path:polygon(0 0,100% 0,100% 35%,0 35%);transform:translate(-.04em,-.03em);opacity:.75;color:inherit}
.text-motion-rgb-slice::after{animation:original-rgb calc(var(--fx-speed)*.375) infinite;clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%);transform:translate(.04em,.03em);opacity:.75;color:inherit}
@keyframes original-rgb{0%,15%{text-shadow:.05em 0 #00fffc,-.03em -.04em #fc00ff,.025em .04em #fffc00}16%,49%{text-shadow:-.05em -.025em #00fffc,.025em .035em #fc00ff,-.05em -.05em #fffc00}50%,99%{text-shadow:.05em .035em #00fffc,.03em 0 #fc00ff,0 -.04em #fffc00}100%{text-shadow:-.05em 0 #00fffc,-.025em -.04em #fc00ff,-.04em -.025em #fffc00}}
.text-motion-scan-noise::before,.text-motion-scan-noise::after{color:inherit;background:black;overflow:hidden;transform:none;clip-path:none;opacity:1}
.text-motion-scan-noise::after{left:2px;text-shadow:-1px 0 red;animation:original-noise-a calc(var(--fx-speed)*2) infinite linear alternate-reverse}
.text-motion-scan-noise::before{left:-2px;text-shadow:1px 0 blue;animation:original-noise-b calc(var(--fx-speed)*3) infinite linear alternate-reverse}
.text-motion-glitchcore::before{color:var(--text-secondary,#ff4fd8);clip-path:inset(0 0 55% 0);animation:original-core-a calc(var(--fx-speed)*2.6) steps(1) infinite}
.text-motion-glitchcore::after{color:var(--text-third,#4ff8ff);clip-path:inset(45% 0 0 0);animation:original-core-b calc(var(--fx-speed)*2.6) steps(1) infinite}
@keyframes original-core-a{0%,12%,20%,55%,100%{transform:translate(0);opacity:0}13%{transform:translate(-5px,-2px);opacity:.9}16%{transform:translate(4px,1px);opacity:.9}48%{transform:translate(-3px,2px);opacity:.9}51%{transform:translate(2px,-1px);opacity:.9}}
@keyframes original-core-b{0%,14%,22%,60%,100%{transform:translate(0);opacity:0}15%{transform:translate(5px,2px);opacity:.9}18%{transform:translate(-4px,-1px);opacity:.9}52%{transform:translate(3px,-2px);opacity:.9}56%{transform:translate(-2px,1px);opacity:.9}}
.text-motion-channel-tear{overflow:hidden;cursor:pointer;z-index:0}
.text-motion-channel-tear::before,.text-motion-channel-tear::after{color:inherit;overflow:hidden;opacity:0;transform:none;z-index:1;animation-duration:calc(var(--fx-speed)*1);animation-delay:0s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate-reverse}
.text-motion-channel-tear::before{padding-right:2px;text-shadow:-2px 0 red;animation-name:original-tear-red}
.text-motion-channel-tear::after{padding-left:2px;text-shadow:-2px 0 blue;animation-name:original-tear-blue}

/* SCSS random() is sampled at compile time, not on each browser frame. */
@keyframes original-noise-a{0%{clip:rect(57px,9999px,96px,0)}5%{clip:rect(23px,9999px,74px,0)}10%{clip:rect(65px,9999px,88px,0)}15%{clip:rect(3px,9999px,14px,0)}20%{clip:rect(81px,9999px,60px,0)}25%{clip:rect(39px,9999px,62px,0)}30%{clip:rect(5px,9999px,8px,0)}35%{clip:rect(19px,9999px,30px,0)}40%{clip:rect(97px,9999px,44px,0)}45%{clip:rect(83px,9999px,94px,0)}50%{clip:rect(21px,9999px,12px,0)}55%{clip:rect(95px,9999px,66px,0)}60%{clip:rect(17px,9999px,60px,0)}65%{clip:rect(79px,9999px,86px,0)}70%{clip:rect(9px,9999px,28px,0)}75%{clip:rect(99px,9999px,46px,0)}80%{clip:rect(69px,9999px,64px,0)}85%{clip:rect(95px,9999px,18px,0)}90%{clip:rect(33px,9999px,84px,0)}95%{clip:rect(39px,9999px,14px,0)}100%{clip:rect(69px,9999px,48px,0)}}
@keyframes original-noise-b{0%{clip:rect(87px,9999px,6px,0)}5%{clip:rect(37px,9999px,96px,0)}10%{clip:rect(67px,9999px,58px,0)}15%{clip:rect(89px,9999px,88px,0)}20%{clip:rect(11px,9999px,6px,0)}25%{clip:rect(9px,9999px,20px,0)}30%{clip:rect(3px,9999px,22px,0)}35%{clip:rect(93px,9999px,36px,0)}40%{clip:rect(39px,9999px,6px,0)}45%{clip:rect(69px,9999px,52px,0)}50%{clip:rect(15px,9999px,26px,0)}55%{clip:rect(89px,9999px,100px,0)}60%{clip:rect(7px,9999px,18px,0)}65%{clip:rect(89px,9999px,88px,0)}70%{clip:rect(87px,9999px,14px,0)}75%{clip:rect(5px,9999px,24px,0)}80%{clip:rect(7px,9999px,10px,0)}85%{clip:rect(21px,9999px,52px,0)}90%{clip:rect(83px,9999px,78px,0)}95%{clip:rect(9px,9999px,92px,0)}100%{clip:rect(99px,9999px,10px,0)}}
@keyframes original-tear-red{0%{opacity:1;clip-path:inset(13% 0% 64% 0%)}10%{opacity:1;clip-path:inset(59% 0% 98% 0%)}20%{opacity:1;clip-path:inset(65% 0% 32% 0%)}30%{opacity:1;clip-path:inset(63% 0% 18% 0%)}40%{opacity:1;clip-path:inset(93% 0% 60% 0%)}50%{opacity:1;clip-path:inset(91% 0% 6% 0%)}60%{opacity:1;clip-path:inset(85% 0% 16% 0%)}70%{opacity:1;clip-path:inset(71% 0% 50% 0%)}80%{opacity:1;clip-path:inset(29% 0% 92% 0%)}90%{opacity:1;clip-path:inset(75% 0% 34% 0%)}100%{opacity:1;clip-path:inset(61% 0% 88% 0%)}}
@keyframes original-tear-blue{0%{opacity:1;clip-path:inset(11% 0% 74% 0%)}10%{opacity:1;clip-path:inset(89% 0% 64% 0%)}20%{opacity:1;clip-path:inset(71% 0% 82% 0%)}30%{opacity:1;clip-path:inset(1% 0% 56% 0%)}40%{opacity:1;clip-path:inset(19% 0% 34% 0%)}50%{opacity:1;clip-path:inset(57% 0% 36% 0%)}60%{opacity:1;clip-path:inset(15% 0% 82% 0%)}70%{opacity:1;clip-path:inset(93% 0% 56% 0%)}80%{opacity:1;clip-path:inset(47% 0% 10% 0%)}90%{opacity:1;clip-path:inset(61% 0% 64% 0%)}100%{opacity:1;clip-path:inset(95% 0% 74% 0%)}}
/* RGB Slice: keep the full glyphs readable; animate RGB shadows only. */
.text-motion-rgb-slice{clip-path:none!important;clip:auto!important}
.text-motion-rgb-slice::before,.text-motion-rgb-slice::after{content:none!important;display:none!important;animation:none!important}