/*MC 2026-10-10 the animated Profile Studio collection: banner layers (.pgbg), new page effects, nameplates, portrait
  frames (.pfr) and seals (.pseal). Built by assets/pagelook.js. Loaded on every page because frames also show on the
  leaderboards and in Friends. Motion sticks to transform and opacity where it can; text effects repaint only the name.
  Lists (.pfr.still) hold still unless the row is hovered, offscreen sections pause (.io-off in app.js) and reduced
  motion stops all of it at the bottom of this file. */

/* ---------------------------------------------------------------- banners: the moving layer under the header */
.pgbg{--sc:12,9,20}
.pg-look > .pgbg.pgbg{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none;background-color:rgb(var(--sc))}
.pgbg .pa{position:absolute;top:0;right:0;bottom:0;width:64%;container-type:size}
/* the art starts at 36%, where the scrim is still nearly solid, so there's no seam; the header text sits on the dark side */
.pgbg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--sc)) 0,rgb(var(--sc)) 37%,rgba(var(--sc),.72) 50%,rgba(var(--sc),.36) 64%,rgba(var(--sc),.1) 82%,rgba(var(--sc),0) 100%)}
.pgbg i,.pgbg b,.pgbg em,.pgbg s,.pgbg svg,.pgbg span,.pgbg .orb{position:absolute;display:block}
@media (max-width:760px){
  .pgbg .pa{left:0;width:auto;bottom:auto;height:250px}
  .pgbg::after{background:linear-gradient(180deg,rgba(var(--sc),.08) 0,rgba(var(--sc),.5) 120px,rgba(var(--sc),.93) 220px,rgb(var(--sc)) 250px)}
}
@keyframes pfSpin{to{transform:rotate(360deg)}}
@keyframes pfGlow{from{opacity:.45}to{opacity:1}}

/* Drifting Ink: sumi clouds over cream washi */
.pgbg-inkclouds{--sc:18,14,12}
.pgbg-inkclouds .pa{background:repeating-linear-gradient(97deg,rgba(120,90,50,.05) 0 1px,transparent 1px 6px),radial-gradient(120% 100% at 70% 35%,#f4ead3,#dccaa5)}
.pgbg-inkclouds .sun{right:15%;top:12%;width:clamp(42px,16cqw,110px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 34%,#ff6a48,#c8281e 72%);box-shadow:0 0 0 4px rgba(200,40,30,.12)}
.pgbg-inkclouds .c{border-radius:50%;background:radial-gradient(closest-side,rgba(20,16,13,.8),rgba(20,16,13,.42) 52%,rgba(20,16,13,0));will-change:transform}
.pgbg-inkclouds .c1{left:-12%;top:2%;width:72%;height:56%;animation:pfInkA 21s ease-in-out infinite alternate}
.pgbg-inkclouds .c2{left:34%;top:30%;width:58%;height:44%;animation:pfInkB 27s ease-in-out infinite alternate}
.pgbg-inkclouds .c3{left:52%;top:-14%;width:56%;height:40%;opacity:.7;animation:pfInkB 18s ease-in-out infinite alternate-reverse}
.pgbg-inkclouds .c4{left:0;top:52%;width:84%;height:40%;opacity:.75;animation:pfInkA 24s ease-in-out infinite alternate-reverse}
.pgbg-inkclouds .mt{left:0;bottom:0;width:100%;height:40%}
@keyframes pfInkA{from{transform:translate3d(-8%,0,0) scale(1)}to{transform:translate3d(20%,4%,0) scale(1.12)}}
@keyframes pfInkB{from{transform:translate3d(12%,0,0) scale(1.05)}to{transform:translate3d(-22%,-6%,0) scale(.94)}}

/* Rain on Washi */
.pgbg-washirain{--sc:20,16,13}
.pgbg-washirain .pa{background:repeating-linear-gradient(93deg,rgba(120,90,50,.05) 0 1px,transparent 1px 7px),radial-gradient(110% 100% at 70% 30%,#f1e7cf,#d9c7a2);overflow:hidden}
.pgbg-washirain .wil{right:0;top:0;height:88%;width:auto;max-width:60%}
.pgbg-washirain .hk{right:7%;bottom:14%;width:clamp(26px,9cqw,46px);aspect-ratio:1;display:grid;place-items:center;border-radius:4px;background:#c8281e;color:#f6ead2;font:700 clamp(15px,5.6cqw,28px)/1 "Shippori Mincho B1","Noto Serif JP","Yu Mincho",serif;transform:rotate(-5deg);box-shadow:inset 0 0 0 2px #c8281e,inset 0 0 0 3px #f6ead2}
.pgbg-washirain .rn{left:-10%;right:-10%;top:-120px;height:calc(100% + 240px);background:radial-gradient(1px 12px at 50% 50%,rgba(40,33,27,.7),transparent) 0 0/29px 120px,radial-gradient(.8px 8px at 50% 50%,rgba(40,33,27,.5),transparent) 13px 50px/43px 120px;animation:pfRain .55s linear infinite;will-change:transform}
.pgbg-washirain .r2{opacity:.6;background-position:7px 20px,29px 90px;animation-duration:.8s}
@media (max-width:760px){.pgbg-washirain .hk{bottom:auto;top:8%;right:auto;left:7%}}   /* clear of the name on phones */
@keyframes pfRain{from{transform:skewX(-14deg) translate3d(0,0,0)}to{transform:skewX(-14deg) translate3d(0,120px,0)}}
.pgbg-washirain .rp,.pgbg-koi .rp{width:18%;aspect-ratio:3;border-radius:50%;border:2px solid rgba(40,33,27,.62);opacity:0;animation:pfRipple 3s ease-out infinite}
.pgbg-washirain .p1{left:18%;top:70%}.pgbg-washirain .p2{left:52%;top:82%;animation-delay:-.8s}.pgbg-washirain .p3{left:36%;top:58%;animation-delay:-1.6s;width:12%}.pgbg-washirain .p4{left:70%;top:66%;animation-delay:-2.3s;width:14%}
@keyframes pfRipple{0%{transform:scale(.1);opacity:.95}100%{transform:scale(1);opacity:0}}

/* Ember Storm */
.pgbg-emberstorm{--sc:16,6,6}
.pgbg-emberstorm .pa{background:radial-gradient(90% 130% at 66% 108%,#ffb347 0,#ff6a1a 18%,#c42a10 40%,#4a0e08 70%,#160706 100%);overflow:hidden}
.pgbg-emberstorm .cs{right:8%;bottom:0;height:86%;width:auto}
.pgbg-emberstorm .gl{inset:0;background:radial-gradient(70% 60% at 70% 100%,rgba(255,190,90,.55),transparent 70%);animation:pfGlow 2.6s ease-in-out infinite alternate}
.pgbg-emberstorm .sm{width:70%;height:70%;border-radius:50%;background:radial-gradient(closest-side,rgba(10,4,4,.65),transparent);animation:pfSmoke 16s linear infinite}
.pgbg-emberstorm .s1{left:5%;top:30%}.pgbg-emberstorm .s2{left:45%;top:40%;animation-delay:-8s}
@keyframes pfSmoke{0%{transform:translate3d(0,40%,0) scale(.8);opacity:0}25%{opacity:1}100%{transform:translate3d(-12%,-70%,0) scale(1.3);opacity:0}}
.pgbg-emberstorm .e{bottom:-4%;width:var(--s);height:calc(var(--s)*1.8);border-radius:50%;background:#fff0c0;box-shadow:0 0 6px 2px rgba(255,140,40,.95),0 0 14px 4px rgba(255,90,20,.5);animation:pfEmb0 4s linear infinite}
.pgbg-emberstorm .e.v1{animation-name:pfEmb1}.pgbg-emberstorm .e.v2{animation-name:pfEmb2}
@keyframes pfEmb0{0%{transform:translate3d(0,0,0);opacity:0}10%{opacity:1}50%{transform:translate3d(-40px,-130px,0)}100%{transform:translate3d(30px,-280px,0);opacity:0}}
@keyframes pfEmb1{0%{transform:translate3d(0,0,0);opacity:0}10%{opacity:1}50%{transform:translate3d(50px,-120px,0)}100%{transform:translate3d(-20px,-270px,0);opacity:0}}
@keyframes pfEmb2{0%{transform:translate3d(0,0,0);opacity:0}10%{opacity:1}100%{transform:translate3d(-70px,-260px,0);opacity:0}}

/* Sakura Wind */
.pgbg-sakurawind{--sc:26,13,30}
.pgbg-sakurawind .pa{background:linear-gradient(180deg,#f6c3a6 0%,#e98a8e 40%,#a8467a 74%,#4a2156 100%);overflow:hidden}
.pgbg-sakurawind .moon{right:34%;top:30%;width:clamp(50px,20cqw,130px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff1d8 0,#ffd9b0 45%,rgba(255,200,170,0) 71%)}
.pgbg-sakurawind .br{right:-2%;top:-6%;height:118%;width:auto;max-width:100%;transform-origin:100% 0;animation:pfSway 6s ease-in-out infinite alternate}
@keyframes pfSway{from{transform:rotate(-2.2deg)}to{transform:rotate(1.6deg)}}
.pgbg-sakurawind .p{top:-6%;width:calc(var(--s)*1.5);height:var(--s);border-radius:100% 0 100% 0;background:linear-gradient(135deg,#ffe3ec,#ff8fb0);animation:pfPet0 10s linear infinite}
.pgbg-sakurawind .p.v1{animation-name:pfPet1}.pgbg-sakurawind .p.v2{animation-name:pfPet2}
@keyframes pfPet0{0%{transform:translate3d(0,0,0) rotate(0)}100%{transform:translate3d(-160px,300px,0) rotate(520deg)}}
@keyframes pfPet1{0%{transform:translate3d(0,0,0) rotate(40deg)}50%{transform:translate3d(-60px,150px,0) rotate(260deg)}100%{transform:translate3d(-200px,300px,0) rotate(600deg)}}
@keyframes pfPet2{0%{transform:translate3d(0,0,0) rotate(0)}100%{transform:translate3d(-110px,300px,0) rotate(-420deg)}}

/* Matsuri Night */
.pgbg-matsuri{--sc:9,7,24}
.pgbg-matsuri .pa{background:radial-gradient(1px 1px at 20px 30px,#fff,transparent) 0 0/90px 70px,radial-gradient(1px 1px at 60px 10px,rgba(255,255,255,.7),transparent) 0 0/130px 90px,linear-gradient(180deg,#0a0926,#1d1450 62%,#3a1d4a)}
.pgbg-matsuri .rf{left:0;bottom:0;width:100%;height:30%}
.pgbg-matsuri .str{inset:0;width:100%;height:100%}
.pgbg-matsuri .ln{--w:clamp(15px,5cqw,34px);width:var(--w);aspect-ratio:.78;margin-left:calc(var(--w) / -2);border-radius:46%/40%;transform-origin:50% -4px;
  background:radial-gradient(circle at 50% 45%,#ffeeb0 0,#ffa040 36%,#d8342a 78%);box-shadow:inset 0 3px 0 #1a0d0a,inset 0 -3px 0 #1a0d0a,0 0 16px 3px rgba(255,140,60,.5);animation:pfSwing 3.2s ease-in-out infinite alternate}
.pgbg-matsuri .ln.fr{--w:clamp(19px,6.6cqw,44px)}
.pgbg-matsuri .ln.o{background:radial-gradient(circle at 50% 45%,#fffbe8 0,#ffe1a8 40%,#f09a48 82%);box-shadow:inset 0 3px 0 #1a0d0a,inset 0 -3px 0 #1a0d0a,0 0 16px 3px rgba(255,210,130,.45)}
.pgbg-matsuri .ln::before{content:"";position:absolute;left:50%;top:-5px;width:1px;height:5px;background:#000}
.pgbg-matsuri .ln::after{content:"";position:absolute;inset:-70%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,160,70,.35),transparent);animation:pfFlicker 2.3s steps(1,end) infinite}
.pgbg-matsuri .ln b{position:static;display:grid;place-items:center;height:100%;color:#7a140c;font:700 calc(var(--w) * .46)/1 "Shippori Mincho B1","Noto Serif JP","Yu Mincho",serif}
@keyframes pfSwing{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes pfFlicker{0%{opacity:1}31%{opacity:.6}34%{opacity:1}72%{opacity:.75}75%{opacity:1}}

/* Vermilion Dawn */
.pgbg-dawn{--sc:24,15,11}
.pgbg-dawn .pa{background:linear-gradient(180deg,#f7ead0 0%,#f6d2a2 52%,#ef9f6e 100%);overflow:hidden}
.pgbg-dawn .sun,.pgbg-dawn .halo{left:44%;top:14%;width:clamp(64px,28cqw,180px);aspect-ratio:1;border-radius:50%}
.pgbg-dawn .sun{background:radial-gradient(circle at 42% 38%,#ff5a3c,#c8281e 74%);animation:pfRise 5.5s cubic-bezier(.2,.7,.2,1) both}
.pgbg-dawn .halo{transform:scale(1.5);background:radial-gradient(closest-side,rgba(255,120,70,.45),transparent);animation:pfGlow 4s ease-in-out infinite alternate}
@keyframes pfRise{from{transform:translate3d(0,70%,0);opacity:.3}to{transform:none;opacity:1}}
.pgbg-dawn .mts{left:0;bottom:0;width:100%;height:62%}
.pgbg-dawn .mist{left:-25%;width:150%;height:20%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,248,236,.85),rgba(255,248,236,0));animation:pfMist 19s ease-in-out infinite alternate}
.pgbg-dawn .m1{top:46%}.pgbg-dawn .m2{top:70%;height:16%;animation-duration:25s;animation-direction:alternate-reverse}
@keyframes pfMist{from{transform:translate3d(-9%,0,0)}to{transform:translate3d(9%,0,0)}}
.pgbg-dawn .bd{left:0;right:0;top:24%;height:14%;animation:pfFly 24s linear infinite}
.pgbg-dawn .bd svg{position:absolute;left:0;top:0;height:100%;width:auto}
@keyframes pfFly{0%{transform:translate3d(-15%,0,0)}50%{transform:translate3d(45%,-30%,0)}100%{transform:translate3d(105%,10%,0)}}

/* Koi Pond */
.pgbg-koi{--sc:5,18,22}
.pgbg-koi .pa{background:radial-gradient(120% 120% at 66% 50%,#13706b 0,#0b4448 46%,#06232a 100%);overflow:hidden}
.pgbg-koi .cau{inset:-120px;background:radial-gradient(closest-side,rgba(170,255,235,.16),transparent) 0 0/90px 70px,radial-gradient(closest-side,rgba(170,255,235,.1),transparent) 40px 30px/90px 70px;animation:pfCau 9s linear infinite}
.pgbg-koi .c2{background-size:130px 100px,130px 100px;opacity:.8;animation:pfCau2 14s linear infinite}
@keyframes pfCau{to{transform:translate3d(90px,70px,0)}}
@keyframes pfCau2{to{transform:translate3d(-130px,100px,0)}}
.pgbg-koi .orb{left:58%;top:50%;width:min(66cqh,48cqw);aspect-ratio:1;margin:calc(min(66cqh,48cqw) / -2) 0 0 calc(min(66cqh,48cqw) / -2);animation:pfSpin 17s linear infinite}
.pgbg-koi .o2{width:min(44cqh,32cqw);margin:calc(min(44cqh,32cqw) / -2) 0 0 calc(min(44cqh,32cqw) / -2);animation-duration:23s;animation-direction:reverse}
.pgbg-koi .fish{left:50%;top:0;width:52%;height:auto;transform:translate(-50%,-50%)}
.pgbg-koi .o2 .fish{transform:translate(-50%,-50%) scaleX(-1);width:62%}
.pgbg-koi .fish .tl{transform-origin:12px 12px;animation:pfTail .55s ease-in-out infinite alternate}
@keyframes pfTail{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.pgbg-koi .pads{right:0;top:0;height:100%;width:auto;max-width:100%}
.pgbg-koi .rp{border-color:rgba(200,255,240,.45)}
.pgbg-koi .p1{left:28%;top:22%}.pgbg-koi .p2{left:64%;top:76%;animation-delay:-1.5s}

/* Kinpaku: gold leaf and black lacquer */
.pgbg-kinpaku{--sc:12,8,5}
.pgbg-kinpaku .pa{background:linear-gradient(160deg,#1a120a,#0b0806);overflow:hidden}
.pgbg-kinpaku .leaf{inset:0 0 0 12%;background:repeating-linear-gradient(90deg,rgba(110,70,10,.4) 0 1px,transparent 1px 46px),repeating-linear-gradient(0deg,rgba(110,70,10,.32) 0 1px,transparent 1px 46px),linear-gradient(135deg,#f6dc8a,#d9a63a 38%,#f2cf74 58%,#b98326);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.pgbg-kinpaku .pine{right:0;bottom:0;height:100%;width:auto;max-width:100%}
.pgbg-kinpaku .swp{top:-20%;bottom:-20%;left:0;width:34%;background:linear-gradient(100deg,transparent 20%,rgba(255,252,230,.7) 50%,transparent 80%);animation:pfSweep 6s ease-in-out infinite}
@keyframes pfSweep{0%{transform:translate3d(-120%,0,0) skewX(-14deg)}40%,100%{transform:translate3d(330%,0,0) skewX(-14deg)}}
.pgbg-kinpaku .fl{top:-6%;width:var(--s);height:var(--s);background:linear-gradient(135deg,#fff3c0,#d9a63a);animation:pfFlake 9s linear infinite}
@keyframes pfFlake{0%{transform:translate3d(0,0,0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translate3d(-30px,280px,0) rotate(400deg);opacity:0}}

/* Hokusai Tide */
.pgbg-hokusai{--sc:14,22,40}
.pgbg-hokusai .pa{background:linear-gradient(180deg,#f0e4c6 0,#e8d4ab 62%,#d6be8f 100%);overflow:hidden}
.pgbg-hokusai .sky{inset:0;background:repeating-linear-gradient(180deg,transparent 0 16px,rgba(140,110,70,.07) 16px 18px)}
.pgbg-hokusai .fuji{right:20%;bottom:34%;width:30%;height:auto}
.pgbg-hokusai .wv{left:0;right:0;overflow:visible;animation:pfBob 4s ease-in-out infinite alternate}
.pgbg-hokusai .wv b{left:0;top:0;height:100%;width:200%;background-repeat:repeat-x;background-size:25% 100%;animation:pfWave 22s linear infinite;will-change:transform}
.pgbg-hokusai .w3{bottom:28%;height:26%;animation-duration:5s}
.pgbg-hokusai .w3 b{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62C50 62 50 30 100 30S150 62 200 62V100H0Z' fill='%238aa4c4'/%3E%3Cpath d='M0 74C50 74 54 44 100 44S150 74 200 74' stroke='%23efe4c8' stroke-width='2' fill='none' opacity='.5'/%3E%3C/svg%3E");animation-duration:30s}
.pgbg-hokusai .w2{bottom:14%;height:38%;animation-duration:4.4s;animation-direction:alternate-reverse}
.pgbg-hokusai .w2 b{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 56C36 56 58 18 104 18C132 18 140 36 128 42C122 45 116 38 122 34C150 46 170 56 200 56V100H0Z' fill='%233a5f94'/%3E%3Cpath d='M0 70C40 70 62 34 104 32M0 84C44 84 70 54 110 52C150 50 170 70 200 70' stroke='%23efe4c8' stroke-width='2' fill='none' opacity='.45'/%3E%3Cg fill='%23f4ecd8'%3E%3Ccircle cx='104' cy='18' r='3.4'/%3E%3Ccircle cx='113' cy='19' r='3'/%3E%3Ccircle cx='121' cy='23' r='2.6'/%3E%3Ccircle cx='96' cy='20' r='2.6'/%3E%3C/g%3E%3C/svg%3E");animation-duration:19s}
.pgbg-hokusai .w1{bottom:-8%;height:58%}
.pgbg-hokusai .w1 b{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62C30 62 52 20 98 16C132 13 148 38 134 48C126 54 112 50 117 41C124 44 128 39 122 35C150 44 172 62 200 62V100H0Z' fill='%231d3866'/%3E%3Cpath d='M0 74C34 74 58 36 98 30C120 27 134 38 130 44M0 88C40 88 64 58 102 52C136 48 166 76 200 74' stroke='%23efe4c8' stroke-width='2.2' fill='none' opacity='.55'/%3E%3Cg fill='%23f6efdc'%3E%3Ccircle cx='98' cy='16' r='4.2'/%3E%3Ccircle cx='108' cy='15' r='3.8'/%3E%3Ccircle cx='118' cy='17' r='3.4'/%3E%3Ccircle cx='127' cy='21' r='3'/%3E%3Ccircle cx='134' cy='28' r='2.6'/%3E%3Ccircle cx='88' cy='19' r='3.2'/%3E%3Ccircle cx='79' cy='24' r='2.4'/%3E%3C/g%3E%3C/svg%3E");animation-duration:13s}
@keyframes pfWave{to{transform:translate3d(-50%,0,0)}}
@keyframes pfBob{from{transform:translate3d(0,-3px,0)}to{transform:translate3d(0,4px,0)}}

/* Eye of Providence */
.pgbg-eye{--sc:7,4,20}
.pgbg-eye .pa{background:radial-gradient(100% 120% at 64% 34%,#2c1b62 0,#130b33 52%,#07041a 100%);overflow:hidden}
.pgbg-eye .st{inset:0;background:radial-gradient(1.2px 1.2px at 12px 18px,#fff,transparent) 0 0/110px 90px,radial-gradient(1px 1px at 70px 60px,#fff,transparent) 0 0/110px 90px,radial-gradient(1px 1px at 40px 80px,#ffe9a6,transparent) 0 0/150px 120px;animation:pfTwinkle 3s ease-in-out infinite alternate}
.pgbg-eye .s2{background-position:50px 40px,20px 10px,90px 70px;animation-delay:-1.5s}
@keyframes pfTwinkle{from{opacity:.25}to{opacity:1}}
.pgbg-eye .rays{left:62%;top:34%;width:150cqh;aspect-ratio:1;margin:-75cqh 0 0 -75cqh;border-radius:50%;background:repeating-conic-gradient(rgba(255,215,120,.2) 0 4deg,transparent 4deg 13deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 18%,transparent 100%);mask-image:radial-gradient(closest-side,#000 18%,transparent 100%);animation:pfSpin 70s linear infinite}
.pgbg-eye .glow{left:62%;top:30%;width:70cqh;aspect-ratio:1;margin:-35cqh 0 0 -35cqh;border-radius:50%;background:radial-gradient(closest-side,rgba(255,200,90,.45),transparent);animation:pfGlow 3.4s ease-in-out infinite alternate}
.pgbg-eye .pyr{left:62%;bottom:0;height:78cqh;width:auto;transform:translateX(-50%)}
.pgbg-eye .cap{left:62%;bottom:calc(56.6cqh + 7px);width:35cqh;transform:translateX(-50%);animation:pfHover 4s ease-in-out infinite alternate}
.pgbg-eye .cap svg{position:relative;width:100%;height:auto;filter:drop-shadow(0 0 10px rgba(255,210,110,.7))}
@keyframes pfHover{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(-50%,-7px,0)}}
.ew{left:30%;width:40%;top:52%;height:22%;border-radius:50%;background:radial-gradient(circle,#fffdf3 0,#f3e6c8 70%);overflow:hidden;box-shadow:0 0 8px rgba(255,230,160,.9);animation:pfBlink 5s ease-in-out infinite}
.ew .iris{position:absolute;left:32%;top:0;width:36%;height:100%;border-radius:50%;background:radial-gradient(circle,#111 0 32%,#c8281e 34%,#7a140c 70%)}
@keyframes pfBlink{0%,88%,100%{transform:scaleY(1)}92%{transform:scaleY(.08)}}

/* ---------------------------------------------------------------- page effects (pagelook FX table) */
.pgfx-sweep i{top:-30%;bottom:-30%;left:0!important;width:30%;background:linear-gradient(100deg,transparent 15%,rgba(255,250,235,.32) 50%,transparent 85%);animation:pxSweep 6s ease-in-out infinite!important}
@keyframes pxSweep{0%{transform:translate3d(-120%,0,0) skewX(-14deg)}38%,100%{transform:translate3d(420%,0,0) skewX(-14deg)}}
.pgfx-ash i{width:var(--s);height:calc(var(--s)*.72);background:#a49d93;opacity:.75;clip-path:polygon(10% 0,100% 22%,84% 100%,0 72%)}
.pgfx-ash i.v2{background:radial-gradient(circle,#ffe0a0,#ff6a1a 70%);opacity:.95}
.pgfx-ash i.v0{animation-name:pxAsh0}.pgfx-ash i.v1{animation-name:pxAsh1}.pgfx-ash i.v2{animation-name:pxAsh0}
@keyframes pxAsh0{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(-26px,200px,0) rotate(200deg)}100%{transform:translate3d(12px,420px,0) rotate(420deg)}}
@keyframes pxAsh1{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(30px,200px,0) rotate(-180deg)}100%{transform:translate3d(-8px,420px,0) rotate(-380deg)}}
.pgfx-goldust i{top:var(--y);width:var(--s);height:var(--s);background:radial-gradient(circle,#fffbe6 0,#ffd76a 40%,#d9a128 75%);clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);animation-name:pxTw;animation-timing-function:ease-in-out}
@keyframes pxTw{0%,100%{transform:scale(0) rotate(0);opacity:0}50%{transform:scale(1) rotate(45deg);opacity:1}}
.pgfx-sparks i{top:auto;bottom:-4%;width:2.5px;height:var(--s);border-radius:2px;background:linear-gradient(180deg,#fff,#ffd27a 40%,rgba(255,120,30,0));animation-timing-function:cubic-bezier(.2,.6,.4,1)}
.pgfx-sparks i.v0{animation-name:pxSpk0}.pgfx-sparks i.v1{animation-name:pxSpk1}.pgfx-sparks i.v2{animation-name:pxSpk2}
@keyframes pxSpk0{0%{transform:translate3d(0,0,0) rotate(-13deg);opacity:0}8%{opacity:1}100%{transform:translate3d(-60px,-260px,0) rotate(-13deg);opacity:0}}
@keyframes pxSpk1{0%{transform:translate3d(0,0,0) rotate(15deg);opacity:0}8%{opacity:1}100%{transform:translate3d(70px,-250px,0) rotate(15deg);opacity:0}}
@keyframes pxSpk2{0%{transform:translate3d(0,0,0) rotate(-2deg);opacity:0}8%{opacity:1}100%{transform:translate3d(-10px,-300px,0) rotate(-2deg);opacity:0}}
.pgfx-inkdrops i{top:var(--y);width:var(--s);height:var(--s);animation:none}
.pgfx-inkdrops i::before,.pgfx-inkdrops i::after{content:"";position:absolute;animation-duration:inherit;animation-delay:inherit;animation-iteration-count:infinite;animation-timing-function:linear}
.pgfx-inkdrops i::before{inset:0;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:radial-gradient(circle at 35% 30%,#fff,#efe3c6 60%);box-shadow:0 0 8px rgba(255,245,220,.6);animation-name:pxDrop}
.pgfx-inkdrops i.v1::before{background:radial-gradient(circle at 35% 30%,#ff9a80,#d8342a 62%);box-shadow:0 0 8px rgba(255,90,60,.6)}
.pgfx-inkdrops i::after{left:50%;top:50%;width:calc(var(--s)*9);height:calc(var(--s)*3);margin:calc(var(--s)*-1.5) 0 0 calc(var(--s)*-4.5);border-radius:50%;border:2px solid rgba(245,235,215,.75);opacity:0;animation-name:pxRing}
.pgfx-inkdrops i.v1::after{border-color:rgba(255,110,90,.85)}
@keyframes pxDrop{0%{transform:translate3d(0,-140px,0);opacity:0}5%{opacity:1}22%{transform:translate3d(0,0,0);opacity:1}25%,100%{transform:translate3d(0,0,0) scale(1.6,.4);opacity:0}}
@keyframes pxRing{0%,22%{transform:scale(.1);opacity:0}24%{opacity:.9}70%,100%{transform:scale(1);opacity:0}}
.pgfx-wisps i{top:auto;bottom:-12%;width:var(--s);height:calc(var(--s)*1.5);border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:radial-gradient(circle at 50% 64%,#fff 0,#d6f1ff 30%,#5ab0ff 62%,rgba(80,110,255,0) 80%);box-shadow:0 0 14px 4px rgba(90,160,255,.35);animation-timing-function:ease-in-out}
.pgfx-wisps i::after{content:"";position:absolute;left:28%;top:70%;width:44%;height:150%;border-radius:50%;background:linear-gradient(180deg,rgba(130,195,255,.5),transparent)}
.pgfx-wisps i.v0{animation-name:pxWisp0}.pgfx-wisps i.v1{animation-name:pxWisp1}.pgfx-wisps i.v2{animation-name:pxWisp0}
@keyframes pxWisp0{0%{transform:translate3d(0,0,0);opacity:0}15%{opacity:.9}50%{transform:translate3d(26px,-24vh,0)}85%{opacity:.8}100%{transform:translate3d(-12px,-46vh,0);opacity:0}}
@keyframes pxWisp1{0%{transform:translate3d(0,0,0);opacity:0}15%{opacity:.9}50%{transform:translate3d(-30px,-22vh,0)}85%{opacity:.8}100%{transform:translate3d(10px,-46vh,0);opacity:0}}
.pgfx-cranes i{top:var(--y);left:0!important;width:100%;height:var(--s);animation-name:pxCrane;animation-timing-function:linear}
.pgfx-cranes i::before{content:"";position:absolute;left:0;top:0;width:calc(var(--s)*1.7);height:var(--s);background:#f3e6c8;clip-path:polygon(0 52%,30% 46%,62% 50%,80% 24%,100% 16%,86% 36%,76% 62%,44% 72%,14% 66%)}
.pgfx-cranes i::after{content:"";position:absolute;left:calc(var(--s)*.5);top:calc(var(--s)*-.46);width:calc(var(--s)*.66);height:calc(var(--s)*1);background:linear-gradient(180deg,#e9dcc0,#cbb68e);clip-path:polygon(0 100%,100% 100%,22% 0);transform-origin:50% 100%;animation:pxFlap .55s ease-in-out infinite alternate}
@keyframes pxFlap{from{transform:scaleY(1)}to{transform:scaleY(-.75)}}
@keyframes pxCrane{0%{transform:translate3d(-12%,0,0)}25%{transform:translate3d(16%,-40%,0)}50%{transform:translate3d(44%,20%,0)}75%{transform:translate3d(72%,-30%,0)}100%{transform:translate3d(104%,0,0)}}
.pgfx-hanabi i{top:var(--y);--hc:#ffd76a;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;background:repeating-conic-gradient(var(--hc) 0 3deg,transparent 3deg 15deg);
  -webkit-mask-image:radial-gradient(closest-side,transparent 52%,#000 60%,#000 86%,transparent 100%);mask-image:radial-gradient(closest-side,transparent 52%,#000 60%,#000 86%,transparent 100%);animation-name:pxBoom;animation-timing-function:cubic-bezier(.15,.7,.3,1)}
.pgfx-hanabi i::after{content:"";position:absolute;inset:24%;border-radius:50%;background:repeating-conic-gradient(from 7deg,#fff 0 3deg,transparent 3deg 15deg)}
.pgfx-hanabi i.v1{--hc:#ff5a4a}.pgfx-hanabi i.v2{--hc:#9ff3ff}
@keyframes pxBoom{0%{transform:scale(.05);opacity:0}4%{opacity:1}34%{transform:scale(1);opacity:.95}58%,100%{transform:scale(1.08);opacity:0}}

/* ---------------------------------------------------------------- nameplates */
.pgn-brushline{color:#f6ead2;position:relative;isolation:isolate;width:fit-content;max-width:100%}
.pgn-brushline::after{content:"";position:absolute;left:-.14em;right:-.22em;bottom:-.02em;height:.5em;z-index:-1;transform-origin:0 50%;animation:pnBrush 6s cubic-bezier(.6,0,.2,1) infinite;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 13C40 5 120 3 196 8C199 11 192 15 150 16C110 17 52 21 6 21C0 20 0 15 3 13Z' fill='%23d8342a'/%3E%3Cpath d='M20 10H90M110 9H180M14 18H70M96 17H150' stroke='%23ff7a5c' stroke-width='1' opacity='.55'/%3E%3C/svg%3E") center/100% 100% no-repeat}
@keyframes pnBrush{0%{transform:scaleX(0);opacity:1}14%{transform:scaleX(1)}86%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.pgn-brokenneon{color:#ffe6f2;text-shadow:0 0 3px #fff,0 0 10px #ff4fa3,0 0 22px #ff2d8a,0 0 40px rgba(255,45,138,.6);animation:pnFlick 5.5s steps(1,end) infinite}
@keyframes pnFlick{0%{opacity:1}6%{opacity:.35}7%{opacity:1}9%{opacity:.55}10%{opacity:1}56%{opacity:.3}58%{opacity:1}61%{opacity:.6}62%{opacity:1}}
.pgn-glitch{color:#fff;text-shadow:-.03em 0 rgba(255,42,109,.85),.03em 0 rgba(25,230,255,.85);animation:pnGlitch 3.4s steps(1,end) infinite}
@keyframes pnGlitch{0%{transform:none}2%{transform:translate(-3px,1px) skewX(-10deg);text-shadow:-.12em 0 rgba(255,42,109,.9),.1em 0 rgba(25,230,255,.9)}4%{transform:translate(2px,-1px);text-shadow:.08em 0 rgba(255,42,109,.9),-.08em 0 rgba(25,230,255,.9)}6%{transform:none;text-shadow:-.03em 0 rgba(255,42,109,.85),.03em 0 rgba(25,230,255,.85)}52%{transform:translate(1px,0) skewX(6deg);text-shadow:.1em 0 rgba(255,42,109,.9),-.06em 0 rgba(25,230,255,.9)}54%{transform:none;text-shadow:-.03em 0 rgba(255,42,109,.85),.03em 0 rgba(25,230,255,.85)}}
.pgn-inkbleed{color:#ff4b36;text-shadow:0 0 .02em #8a0f06,0 0 .28em rgba(255,60,40,.35);animation:pnBleed 4.2s ease-in-out infinite}
@keyframes pnBleed{0%,30%,100%{text-shadow:0 0 .02em #8a0f06,0 0 .28em rgba(255,60,40,.35)}60%,70%{text-shadow:0 0 .03em #8a0f06,0 0 .5em rgba(255,60,40,.6),0 0 1.1em rgba(200,30,20,.38)}}
.pgn-goldfoil{background:linear-gradient(100deg,#b07a1e 0%,#f6d77a 18%,#fffbe6 24%,#e3ad3c 30%,#a8741a 46%,#f2cd6a 64%,#fff6d6 70%,#d9a128 78%,#b07a1e 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(60,35,0,.7));animation:pnFoil 6s ease-in-out infinite}
/* the glint runs for a third of the cycle and rests, so the name only repaints while it moves */
@keyframes pnFoil{0%{background-position:0 0}35%,100%{background-position:-166.667% 0}}
.pgn-woodblock{color:#f3e6c8;text-shadow:.045em .035em 0 #d23a2a,-.03em -.025em 0 #050403;animation:pnReg 5s ease-in-out infinite}
@keyframes pnReg{0%,30%,100%{text-shadow:.045em .035em 0 #d23a2a,-.03em -.025em 0 #050403}55%,70%{text-shadow:.01em .008em 0 #d23a2a,-.006em -.005em 0 #050403}}
.pgn-starlight{background:linear-gradient(180deg,#fff 0%,#e2eaff 45%,#9fb4ff 76%,#d4defc 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px rgba(160,190,255,.45));position:relative;width:fit-content;max-width:100%}
.pgn-starlight::before,.pgn-starlight::after{content:"";position:absolute;width:.42em;aspect-ratio:1;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:pnTwink 2.8s ease-in-out infinite;pointer-events:none}
.pgn-starlight::before{top:-.14em;left:-.2em}.pgn-starlight::after{right:-.26em;bottom:.04em;width:.3em;animation-delay:-1.4s}
@keyframes pnTwink{0%,100%{transform:scale(.15) rotate(0);opacity:0}50%{transform:scale(1) rotate(90deg);opacity:1}}
.pgn-kamiflame{background:linear-gradient(0deg,#ff3a1e 0%,#ff8a1e 16%,#ffd23e 30%,#fff6d4 40%,#ffd23e 50%,#ff8a1e 64%,#ff3a1e 78%,#9a3aff 90%,#ff3a1e 100%);background-size:100% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 12px rgba(255,120,40,.5));animation:pnFlame 3.6s linear infinite}
@keyframes pnFlame{from{background-position:0 0}to{background-position:0 200%}}
/* the edit pencil next to your own name keeps its colour */
.pf-name[class*="pgn-"] .pf-edit{-webkit-text-fill-color:initial}

/* ---------------------------------------------------------------- portrait frames */
.pfr{position:relative;display:inline-grid;isolation:isolate;vertical-align:top;flex:none;width:max-content;height:max-content}   /* never stretched by a one-column grid (the profile header on phones) */
.pfr > .pfr-b,.pfr > .pfr-f{position:absolute;inset:-20%;pointer-events:none}
.pfr > .pfr-b{z-index:-1}.pfr > .pfr-f{z-index:2}
.pfr-b > svg,.pfr-f > svg,.pfr-f > div{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pfr-f > div > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pfr .spin{animation:pfSpin 14s linear infinite;will-change:transform}.pfr .spin.slow{animation-duration:40s}
.pfr .gw{position:absolute;inset:10%;border-radius:50%;background:radial-gradient(closest-side,rgba(200,40,30,.6),transparent);animation:pfGlow 3s ease-in-out infinite alternate}
.pfr-koban .tw{position:absolute;right:16%;top:10%;width:11%;aspect-ratio:1;background:#fffbe6;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);animation:pxTw 2.6s ease-in-out infinite}
.pfr-sakura .breathe{animation:pfBreathe 5s ease-in-out infinite alternate}
@keyframes pfBreathe{from{transform:scale(.99) rotate(-3deg)}to{transform:scale(1.035) rotate(4deg)}}
.pfr-sakura .pt{position:absolute;width:7%;height:5%;border-radius:100% 0 100% 0;background:linear-gradient(135deg,#ffe3ec,#ff8fb0);opacity:0;animation:pfPetal 6s linear infinite}
.pfr-sakura .pt1{left:14%;top:70%}.pfr-sakura .pt2{left:80%;top:58%;animation-delay:-2s}.pfr-sakura .pt3{left:48%;top:86%;animation-delay:-4s}
@keyframes pfPetal{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translate(-120%,320%) rotate(300deg);opacity:0}}
.pfr-ink .enso path{stroke-dasharray:100;stroke-dashoffset:0;animation:pfEnso 7s cubic-bezier(.5,0,.3,1) infinite}
.pfr-ink .enso .e2{animation-delay:.12s}
@keyframes pfEnso{0%{stroke-dashoffset:100;opacity:1}24%{stroke-dashoffset:0}84%{stroke-dashoffset:0;opacity:1}95%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:100;opacity:0}}
.pfr-lightning .gw{background:radial-gradient(closest-side,rgba(90,180,255,.55),transparent);animation-duration:1.4s}
.pfr-lightning .spin{animation-duration:30s}
.pfr-lightning .bolt{opacity:0;filter:drop-shadow(0 0 2px #7cc8ff);animation:pfBolt 2.4s steps(1,end) infinite}
.pfr-lightning .bolt.b0{opacity:1}.pfr-lightning .b1{animation-delay:-.8s}.pfr-lightning .b2{animation-delay:-1.6s}
@keyframes pfBolt{0%{opacity:1}5%{opacity:.25}8%{opacity:1}14%,100%{opacity:0}}
.pfr-foxfire .gw{background:radial-gradient(closest-side,rgba(120,110,255,.45),transparent)}
.pfr-foxfire .spin{animation-duration:6s}
.pfr-foxfire .ff{position:absolute;inset:0}
.pfr-foxfire .ff b{position:absolute;left:50%;top:-1%;width:19%;height:19%;margin-left:-9.5%;border-radius:0 50% 50% 50%;background:radial-gradient(circle at 62% 62%,#fff 0,#d2e8ff 22%,#6a8dff 50%,#8a4dff 74%);box-shadow:0 0 12px 4px rgba(120,140,255,.7),0 0 26px 8px rgba(138,77,255,.35);transform:rotate(45deg);animation:pfFlame 0.38s ease-in-out infinite alternate}
@keyframes pfFlame{from{transform:rotate(45deg) scale(1)}to{transform:rotate(38deg) scale(.82,1.14)}}
.pfr-dragon .gw{background:radial-gradient(closest-side,rgba(255,190,70,.45),transparent)}
.pfr-dragon .spin{animation-duration:16s}
.pfr-eye .rays{position:absolute;inset:-6%;border-radius:50%;background:repeating-conic-gradient(rgba(255,215,110,.55) 0 4deg,transparent 4deg 12deg);
  -webkit-mask-image:radial-gradient(closest-side,transparent 50%,#000 60%,#000 76%,transparent 100%);mask-image:radial-gradient(closest-side,transparent 50%,#000 60%,#000 76%,transparent 100%);animation:pfSpin 26s linear infinite}
.pfr-eye .gw{background:radial-gradient(closest-side,rgba(255,200,90,.55),transparent)}
.pfr-eye .spin{animation-duration:20s}
.pfr-eye .cap{position:absolute;left:35%;top:-5%;width:30%;animation:pfHover2 3.6s ease-in-out infinite alternate}
.pfr-eye .cap svg{display:block;width:100%;height:auto;filter:drop-shadow(0 0 6px rgba(255,210,110,.8))}
.pfr-eye .cap .ew{position:absolute}
@keyframes pfHover2{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-8%,0)}}
/* lists: the frame holds still until the row is hovered */
:where(.sb-r,.sb-pd,.fr-list li):not(:hover) .pfr.still *{animation:none!important}
.pfr-sakura.still .pt,.pfr-koban.still .tw{display:none}
/* held still, the dragon's head rests bottom left, away from the name beside it; list frames sit a little tighter */
.pfr-dragon.still .spin{transform:rotate(130deg)}
.pfr.still > .pfr-f,.pfr.still > .pfr-b{inset:-15%}

/* ---------------------------------------------------------------- seals stamped on the picture's corner */
.pseal{position:absolute;right:-9%;bottom:-9%;width:38%;aspect-ratio:1;z-index:3;display:grid;place-items:center;container-type:inline-size;transform:rotate(-8deg);animation:psStamp .75s cubic-bezier(.2,.9,.25,1.25) .35s both;pointer-events:none}
@keyframes psStamp{0%{transform:scale(2.6) rotate(-24deg);opacity:0}55%{transform:scale(.9) rotate(-6deg);opacity:1}75%{transform:scale(1.04) rotate(-9deg)}100%{transform:rotate(-8deg);opacity:1}}
.pseal > b{position:relative;z-index:1;font:900 58cqw/1 "Shippori Mincho B1","Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif}
.pseal > i,.pseal > svg{position:absolute}
.pseal-kage{border-radius:9%;color:#f6ead2;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.12) 0 1px,transparent 2px) 0 0/7px 9px,#c8281e;box-shadow:inset 0 0 0 4cqw #c8281e,inset 0 0 0 6cqw #f3e6c8,0 4px 10px rgba(0,0,0,.45)}
.pseal-kage .ring{inset:0;border-radius:inherit;border:2px solid #ff5a3c;opacity:0;animation:psRing 4.5s ease-out 1.2s infinite}
@keyframes psRing{0%{transform:scale(1);opacity:.85}30%,100%{transform:scale(1.55);opacity:0}}
.pseal-kin{border-radius:12%;overflow:hidden;color:#5a3404;text-shadow:0 1px 0 rgba(255,240,190,.6);background:linear-gradient(135deg,#fff1b0,#e8b23a 45%,#b47f12 70%,#f6d77a);box-shadow:inset 0 0 0 3.5cqw rgba(90,52,4,.5),0 4px 10px rgba(0,0,0,.45)}
.pseal-kin .gl{top:-20%;bottom:-20%;left:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,240,.9),transparent);animation:psGlint 3.2s ease-in-out infinite}
@keyframes psGlint{0%{transform:translate3d(-150%,0,0) skewX(-14deg)}45%,100%{transform:translate3d(300%,0,0) skewX(-14deg)}}
.pseal-oni{border-radius:50%;color:#ffe6c8;background:radial-gradient(circle at 40% 35%,#ff5a3c,#b3140a 72%);box-shadow:inset 0 0 0 3.5cqw rgba(255,220,190,.55),0 4px 10px rgba(0,0,0,.45)}
.pseal-oni .gw{inset:0;border-radius:50%;box-shadow:0 0 12px 4px rgba(255,80,30,.75),0 0 30px 8px rgba(255,60,20,.35);animation:pfGlow 2.2s ease-in-out infinite alternate}
.pseal-mon svg{inset:0;width:100%;height:100%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));animation:pfSpin 12s linear infinite}
.pseal-ryu{border-radius:10%;overflow:hidden;color:#f2c35b;background:#120c08;box-shadow:0 4px 10px rgba(0,0,0,.5)}
.pseal-ryu .edge{inset:-50%;background:conic-gradient(transparent 0 280deg,#ffd76a 340deg,#fff6d0 360deg);animation:pfSpin 2.8s linear infinite}
.pseal-ryu .in{inset:5cqw;border-radius:7%;background:#120c08;box-shadow:inset 0 0 0 1.4cqw #c8281e}
.pseal-ryu b{text-shadow:0 0 6px rgba(255,200,90,.5)}
.pseal-kami{color:#6a3f00}
.pseal-kami .ry{inset:-38%;border-radius:50%;background:repeating-conic-gradient(rgba(255,240,200,.8) 0 6deg,transparent 6deg 20deg);-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);animation:pfSpin 10s linear infinite}
.pseal-kami .disc{inset:0;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#fff1c4 42%,#e8b23a 100%);box-shadow:0 0 14px rgba(255,220,140,.85)}
.pseal-eye svg{inset:0;width:100%;height:auto;filter:drop-shadow(0 0 6px rgba(255,210,110,.85))}
.pseal-eye .ew{top:58%;height:20%}

/* ---------------------------------------------------------------- Profile Studio: rarity, swatches, preview */
.st-it-t em.st-r{background:rgba(90,168,255,.18);color:#bfdcff}
.st-it-t em.st-r.r-epic{background:rgba(183,140,255,.22);color:#e2d2ff}
.st-it-t em.st-r.r-legendary{background:linear-gradient(135deg,#ffd76a,#e8a23a);color:#3b2600}
.st-it-t em.st-r.r-mythic{background:linear-gradient(110deg,#ff5d4a,#ff8fb0,#ffd76a,#ff5d4a);background-size:300% 100%;color:#2a0805;animation:pnFoil 4s linear infinite}
.st-sw .pgbg .pa{left:0;right:0;top:0;bottom:0;width:auto;height:auto}
.st-sw .pgbg::after{display:none}
.st-sw-r,.st-sw-s{display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#2a1d55,#0f0a22)}
.st-swav{display:block;width:46px;height:46px;border-radius:13px;overflow:hidden;background:#0d0820}
.st-swav img{width:100%;height:100%;object-fit:cover;display:block}
.st-sw-s .st-swav{width:52px;height:52px}
.st-desc{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.st-prev .pfr{align-self:center}

/* ---------------------------------------------------------------- the Dev collection */
/*MC 2026-10-12 five pieces only the dev profile owns (eco_dev_grant). Same rules as the rest: transform and opacity for
  motion, still in lists, stopped for reduced motion below. */

/* Amaterasu Dawn: sun behind a torii in the sea */
.pgbg-amaterasu{--sc:16,6,22}
.pgbg-amaterasu .pa{overflow:hidden;background:linear-gradient(180deg,#14072a 0,#3a0f3f 30%,#9a2a3a 56%,#ff8a3c 70%,#3a1030 72%,#12061c 100%)}
.pgbg-amaterasu .rays{left:62%;top:58%;width:220cqh;aspect-ratio:1;margin:-110cqh 0 0 -110cqh;border-radius:50%;background:repeating-conic-gradient(rgba(255,214,120,.34) 0 3deg,transparent 3deg 9deg,rgba(255,150,90,.18) 9deg 11deg,transparent 11deg 18deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 14%,transparent 72%);mask-image:radial-gradient(closest-side,#000 14%,transparent 72%);animation:pfSpin 48s linear infinite}
.pgbg-amaterasu .halo{left:62%;top:58%;width:110cqh;aspect-ratio:1;margin:-55cqh 0 0 -55cqh;border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,150,.75),rgba(255,120,60,.35) 45%,transparent);animation:pfGlow 2.8s ease-in-out infinite alternate}
.pgbg-amaterasu .sun{left:62%;top:58%;width:46cqh;aspect-ratio:1;margin:-23cqh 0 0 -23cqh;border-radius:50%;background:radial-gradient(circle at 44% 40%,#fffbe8 0,#ffe39a 38%,#ff9a3c 78%,#ff6a2a 100%);box-shadow:0 0 30px 8px rgba(255,190,90,.6);animation:amRise 7s ease-in-out infinite alternate}
@keyframes amRise{from{transform:translate3d(0,3cqh,0) scale(.97)}to{transform:translate3d(0,-2cqh,0) scale(1.03)}}
.pgbg-amaterasu .cl{height:7cqh;border-radius:50%;background:linear-gradient(90deg,transparent,rgba(60,14,48,.85) 20%,rgba(60,14,48,.85) 80%,transparent);will-change:transform}
.pgbg-amaterasu .c1{left:20%;top:44%;width:70%;animation:amCloud 18s ease-in-out infinite alternate}
.pgbg-amaterasu .c2{left:40%;top:34%;width:46%;height:4cqh;opacity:.7;animation:amCloud 24s ease-in-out infinite alternate-reverse}
@keyframes amCloud{from{transform:translate3d(-8%,0,0)}to{transform:translate3d(10%,0,0)}}
.pgbg-amaterasu .sea{position:absolute;left:0;right:0;top:71%;bottom:0;overflow:hidden;background:linear-gradient(180deg,#4a1532 0,#1c0820 60%,#0e0416)}
.pgbg-amaterasu .path{left:62%;top:0;bottom:0;width:30cqh;margin-left:-15cqh;background:repeating-linear-gradient(180deg,rgba(255,222,140,.9) 0 2px,transparent 2px 6px);-webkit-mask-image:radial-gradient(60% 100% at 50% 0,#000,transparent);mask-image:radial-gradient(60% 100% at 50% 0,#000,transparent);animation:amShim 1.6s ease-in-out infinite alternate}
@keyframes amShim{from{transform:scaleX(.7);opacity:.75}to{transform:scaleX(1.25);opacity:1}}
.pgbg-amaterasu .glint{top:30%;height:2px;width:10cqh;border-radius:2px;background:#fff3c8;opacity:0;animation:amGlint 3.2s ease-in-out infinite}
.pgbg-amaterasu .g1{left:54%}.pgbg-amaterasu .g2{left:68%;top:60%;animation-delay:-1.6s}
@keyframes amGlint{0%,100%{opacity:0;transform:scaleX(.3)}50%{opacity:.9;transform:scaleX(1)}}
.pgbg-amaterasu .torii{left:62%;bottom:20%;height:46cqh;width:auto;transform:translateX(-50%);filter:drop-shadow(0 0 6px rgba(255,90,40,.55))}
.pgbg-amaterasu .tref{left:62%;top:80%;width:32cqh;height:14cqh;margin-left:-16cqh;background:linear-gradient(180deg,rgba(220,50,30,.55),transparent);-webkit-mask-image:repeating-linear-gradient(180deg,#000 0 2px,transparent 2px 4px);mask-image:repeating-linear-gradient(180deg,#000 0 2px,transparent 2px 4px);animation:amShim 2.2s ease-in-out infinite alternate-reverse}
.pgbg-amaterasu .crane{left:0;width:14cqh;will-change:transform;animation:amFly 16s linear infinite}
.pgbg-amaterasu .crane svg{position:relative;width:100%;height:auto;animation:amFlap .7s ease-in-out infinite alternate;transform-origin:50% 60%}
.pgbg-amaterasu .k0{top:20%}.pgbg-amaterasu .k1{top:28%;width:10cqh;animation-delay:-5s;animation-duration:20s}.pgbg-amaterasu .k2{top:14%;width:8cqh;animation-delay:-11s;animation-duration:23s}
@keyframes amFly{from{transform:translate3d(-30cqh,0,0)}to{transform:translate3d(110cqw,-6cqh,0)}}
@keyframes amFlap{from{transform:scaleY(1)}to{transform:scaleY(-.55)}}
.pgbg-amaterasu .mo{bottom:26%;width:var(--s);height:var(--s);border-radius:50%;background:#ffe9a6;box-shadow:0 0 6px 2px rgba(255,200,90,.7);opacity:0;animation:amMote 7s ease-out infinite}
@keyframes amMote{0%{transform:translate3d(0,0,0);opacity:0}15%{opacity:1}100%{transform:translate3d(8px,-60cqh,0);opacity:0}}

/* Kintsugi: porcelain letters mended with gold */
.pgn-kintsugi{background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.95) 48%,transparent 56%) 0 0/250% 100% no-repeat,
  linear-gradient(118deg,transparent 30.5%,#e8b23a 31.2%,#fff0b0 32.4%,#c8901c 33.6%,transparent 34.3%),
  linear-gradient(64deg,transparent 57.5%,#e8b23a 58.2%,#fff0b0 59.3%,#c8901c 60.4%,transparent 61.1%),linear-gradient(28deg,transparent 78%,#d9a128 78.6%,#fff0b0 79.3%,transparent 80%),
  linear-gradient(160deg,transparent 47%,#d9a128 47.5%,#fff0b0 48.1%,transparent 48.7%),
  linear-gradient(180deg,#fbf7ee,#e9e2d2 60%,#d6ccb6);
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:pnKin 4.5s ease-in-out infinite}
@keyframes pnKin{0%{background-position:150% 0,0 0,0 0,0 0,0 0,0 0;filter:drop-shadow(0 0 2px rgba(232,178,58,.3))}50%{filter:drop-shadow(0 0 12px rgba(255,200,90,.65))}100%{background-position:-60% 0,0 0,0 0,0 0,0 0,0 0;filter:drop-shadow(0 0 2px rgba(232,178,58,.3))}}

/* Shikigami: paper ofuda that wake up and rise, turning in the air */
.pgfx-shikigami i{top:auto;bottom:-30%;width:var(--s);height:calc(var(--s)*2.6);border-radius:1px;background:linear-gradient(180deg,#c8281e 0 9%,#fbf3df 9% 91%,#c8281e 91%);box-shadow:0 0 10px 2px rgba(255,190,110,.35),inset 0 0 0 1px rgba(120,60,20,.35);display:grid;place-items:center;animation-timing-function:ease-in-out}
.pgfx-shikigami i::before{content:"封";font:900 calc(var(--s)*.78)/1 "Shippori Mincho B1","Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;color:#1a0d0a;writing-mode:vertical-rl}
.pgfx-shikigami i.v1::before{content:"神"}.pgfx-shikigami i.v2::before{content:"式";color:#a3150c}
.pgfx-shikigami i.v0{animation-name:pxOfu0}.pgfx-shikigami i.v1{animation-name:pxOfu1}.pgfx-shikigami i.v2{animation-name:pxOfu0;animation-direction:reverse}
@keyframes pxOfu0{0%{transform:translate3d(0,0,0) rotate(-8deg) rotateY(0);opacity:0}12%{opacity:1}50%{transform:translate3d(-28px,-220px,0) rotate(10deg) rotateY(180deg)}88%{opacity:1}100%{transform:translate3d(14px,-460px,0) rotate(-6deg) rotateY(360deg);opacity:0}}
@keyframes pxOfu1{0%{transform:translate3d(0,0,0) rotate(6deg) rotateY(0);opacity:0}12%{opacity:1}50%{transform:translate3d(30px,-230px,0) rotate(-12deg) rotateY(-180deg)}88%{opacity:1}100%{transform:translate3d(-10px,-460px,0) rotate(8deg) rotateY(-360deg);opacity:0}}

/* Gate of the Maker: aurora, kanji ring, a floating torii */
.pfr-torii .aur{position:absolute;inset:4%;border-radius:50%;background:conic-gradient(from 0deg,#ff4a2c,#ffd76a,#7affd4,#7a8dff,#ff6ad5,#ff4a2c);filter:blur(10px);opacity:.75;animation:pfSpin 7s linear infinite,pfGlow 2.4s ease-in-out infinite alternate}
.pfr-torii .gw{background:radial-gradient(closest-side,rgba(255,220,150,.5),transparent)}
.pfr-torii .ring{animation-duration:28s;animation-direction:reverse;filter:drop-shadow(0 0 2px rgba(255,200,100,.8))}
.pfr-torii .orb{animation:pfSpin 5s linear infinite}
.pfr-torii .tor{position:absolute;left:37%;top:3%;width:26%;animation:pfHover2 3.2s ease-in-out infinite alternate}
.pfr-torii .tor svg{display:block;width:100%;height:auto;filter:drop-shadow(0 0 5px rgba(255,90,40,.9)) drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.pfr-torii .tor::after{content:"";position:absolute;left:10%;right:10%;top:-30%;bottom:-20%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,120,60,.55),transparent);z-index:-1;animation:pfGlow 1.8s ease-in-out infinite alternate}
@keyframes amSh{0%,30%{background-position:150% 0}70%,100%{background-position:-50% 0}}
.pfr-torii.still .aur{opacity:.45}

/* Creator Seal */
.pseal-dev{border-radius:12%;overflow:visible;color:#ffd76a;text-shadow:0 0 6px rgba(255,200,90,.8)}
.pseal-dev .sp{inset:-26%;border-radius:50%;background:radial-gradient(closest-side,rgba(200,40,30,.0) 55%,rgba(200,40,30,.6) 62%,transparent 64%,transparent 72%,rgba(255,215,106,.45) 74%,transparent 78%);opacity:0;animation:psSplash 3.4s ease-out 1s infinite}
@keyframes psSplash{0%{transform:scale(.6);opacity:.95}60%,100%{transform:scale(1.3);opacity:0}}
.pseal-dev .bx{inset:0;border-radius:inherit;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.55),0 0 12px rgba(255,180,90,.6)}
.pseal-dev .edge{position:absolute;inset:-50%;background:conic-gradient(from 0deg,#ffd76a,#ff4a2c,#ff6ad5,#7a8dff,#7affd4,#ffd76a);animation:pfSpin 3s linear infinite}
.pseal-dev .in{inset:5cqw;border-radius:8%;background:radial-gradient(circle at 30% 25%,#3a2418,#0c0806 70%);box-shadow:inset 0 0 0 1.4cqw #c8281e,inset 0 0 0 2.6cqw rgba(255,215,106,.55)}
.pseal-dev .gl{inset:5cqw;border-radius:8%;overflow:hidden;background:linear-gradient(100deg,transparent 35%,rgba(255,250,230,.55) 50%,transparent 65%) 0 0/300% 100% no-repeat;animation:amSh 3.6s ease-in-out infinite;z-index:2}
.st-it-t em.st-r.r-dev{background:linear-gradient(110deg,#ff4a2c,#ffd76a,#7affd4,#7a8dff,#ff6ad5,#ff4a2c);background-size:300% 100%;color:#14060a;font-weight:800;animation:pnFoil 3s linear infinite}

/* ---------------------------------------------------------------- reduced motion: everything holds still */
@media (prefers-reduced-motion:reduce){
  .pgbg *,.pfr *,.pseal,.pseal *,.st-it-t em.st-r,
  .pgn-brushline,.pgn-brushline::after,.pgn-brokenneon,.pgn-glitch,.pgn-inkbleed,.pgn-goldfoil,.pgn-woodblock,.pgn-starlight::before,.pgn-starlight::after,.pgn-kamiflame,.pgn-kintsugi{animation:none!important}
  .pfr-sakura .pt,.pfr-koban .tw,.pseal-dev .sp,.pgbg-amaterasu .mo,.pgbg-amaterasu .glint{display:none}
}

/*MC 2026-10-10 translations*/
/* phone Studio tabs: the 9px 6px padding in style.css's 560px rule loses to the plain .st-tabs button rule after it, so
   the pills kept 14px a side and ~75px for text. With Frames and Seals the grid went to three rows and "Дополнения",
   "Namensschilder" broke mid-word. Narrow side padding gives ~95px, enough for every language's longest single word */
@media (max-width:560px){.st-tabs button{padding:9px 4px}}