/* SaitoDex 3.20: supporter extras that show on any theme.
 *   - binder skins (binders/skins.py) on binder covers and the skin picker;
 *   - profile rings round the picture on a public profile;
 *   - the Supporter extras section of the Account page.
 * Card pictures are never covered or recoloured.
 */

/* ------------------------------------------------------- binder skins -- */
.binder-skin{isolation:isolate}
.binder-skin .binder-skin-art{position:absolute;inset:0;z-index:0;pointer-events:none}
.binder-skin img,.binder-skin .binder-cover-grid,.binder-skin strong{z-index:1}
.binder-skin .binder-cover-spine{z-index:2}
/* A glossy sheen that sweeps across on hover, like light on lacquer. */
.binder-skin:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 48%,transparent 60%);background-size:260% 100%;background-position:120% 0;transition:background-position .9s ease}
.binder-shelf-cover:hover .binder-skin:after,.binder-shelf-cover:focus-visible .binder-skin:after,.binder-skin-option:hover .binder-skin:after{background-position:-30% 0}

.binder-skin-sakura{background:radial-gradient(ellipse at 80% 0%,#6b1f45 0%,transparent 60%),linear-gradient(160deg,#4a1330 0%,#2a0a1c 55%,#17050f 100%)!important;border-color:rgba(255,170,200,.3)!important}
.binder-skin-sakura .binder-skin-art{background:url("../../img/supporter/skins/sakura.db08219de614.svg") center/cover no-repeat}
.binder-skin-sakura strong{color:#ffe6ef!important}
.binder-skin-sakura .binder-cover-grid i{border-color:rgba(255,190,212,.28)!important}

.binder-skin-seigaiha{background:#0e1d46!important;border-color:rgba(201,214,240,.28)!important}
.binder-skin-seigaiha .binder-skin-art{opacity:.55;
  background-color:#0e1d46;
  background-image:
    radial-gradient(circle at 100% 150%,#0e1d46 24%,#c9d6f0 24% 27%,#0e1d46 27% 36%,#c9d6f0 36% 39%,transparent 39%),
    radial-gradient(circle at 0 150%,#0e1d46 24%,#c9d6f0 24% 27%,#0e1d46 27% 36%,#c9d6f0 36% 39%,transparent 39%),
    radial-gradient(circle at 50% 100%,#c9d6f0 10%,#0e1d46 10% 23%,#c9d6f0 23% 28%,#0e1d46 28% 43%,#c9d6f0 43% 48%,#0e1d46 48% 63%,#c9d6f0 63% 68%,transparent 68%),
    radial-gradient(circle at 100% 50%,#c9d6f0 5%,#0e1d46 5% 15%,#c9d6f0 15% 19%,#0e1d46 19% 29%,#c9d6f0 29% 33%,#0e1d46 33% 44%,#c9d6f0 44% 48%,transparent 48%),
    radial-gradient(circle at 0 50%,#c9d6f0 5%,#0e1d46 5% 15%,#c9d6f0 15% 19%,#0e1d46 19% 29%,#c9d6f0 29% 33%,#0e1d46 33% 44%,#c9d6f0 44% 48%,transparent 48%);
  background-size:44px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.35) 70%,#000 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.35) 70%,#000 100%)}
.binder-skin-seigaiha strong{color:#eef3ff!important}
.binder-skin-seigaiha .binder-cover-grid i{border-color:rgba(201,214,240,.3)!important}

.binder-skin-kintsugi{background:radial-gradient(ellipse at 30% 10%,#2c2620,transparent 60%),linear-gradient(160deg,#1b1813,#0b0a08)!important;border-color:rgba(201,154,62,.45)!important;box-shadow:inset 0 0 0 1px rgba(201,154,62,.25)}
.binder-skin-kintsugi .binder-skin-art{background:url("../../img/supporter/skins/kintsugi.3219c82e0bde.svg") center/100% 100% no-repeat;opacity:.9}
.binder-skin-kintsugi strong{color:#f3d58a!important}
.binder-skin-kintsugi .binder-cover-grid i{border-color:rgba(201,154,62,.35)!important}

.binder-skin-neon{background:linear-gradient(180deg,#0a1528,#05080f 60%,#0b0718)!important;border-color:rgba(46,230,255,.45)!important;box-shadow:0 0 0 1px rgba(255,62,165,.35),0 0 18px rgba(46,230,255,.18)}
.binder-skin-neon .binder-skin-art{overflow:hidden;box-shadow:inset 0 0 0 2px rgba(255,62,165,.45),inset 0 0 16px rgba(255,62,165,.28)}
.binder-skin-neon .binder-skin-art:before{content:"";position:absolute;left:-40%;right:-40%;bottom:-6%;height:48%;
  background:linear-gradient(rgba(46,230,255,.5) 1px,transparent 1px) 0 0/100% 16px,linear-gradient(90deg,rgba(255,62,165,.45) 1px,transparent 1px) 0 0/22px 100%;
  transform:perspective(160px) rotateX(58deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%);mask-image:linear-gradient(180deg,transparent,#000 40%)}
.binder-skin-neon .binder-skin-art:after{content:"";position:absolute;left:0;right:0;top:52%;height:2px;background:linear-gradient(90deg,transparent,#2ee6ff,transparent);box-shadow:0 0 12px #2ee6ff}
.binder-skin-neon strong{color:#e9fdff!important;text-shadow:0 0 8px rgba(46,230,255,.8)}
.binder-skin-neon .binder-cover-grid i{border-color:rgba(46,230,255,.35)!important}

/* Inside an open skinned binder: the same art on every page, behind the
 * pockets, so the skin is the whole binder and not just its cover. The
 * pockets turn to clear sleeves so the art shows round the cards. */
:root .binder-skinned :is(.binder-page,.binder-ghost){isolation:isolate}
:root .binder-skinned :is(.binder-page,.binder-ghost):before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit}
:root .binder-skinned .binder-spread:not(.is-single) .binder-page:first-child:before,:root .binder-skinned .binder-ghost.is-left:before{transform:scaleX(-1)}
:root .binder-skinned .binder-page-grid{position:relative;z-index:1}
:root .binder-skinned .binder-pocket{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 14px 22px rgba(255,255,255,.05),0 2px 8px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}
:root .binder-skinned .binder-pocket.is-empty{background:rgba(255,255,255,.02);-webkit-backdrop-filter:none;backdrop-filter:none}
:root .binder-skinned .binder-page-number{z-index:1;text-shadow:0 1px 4px rgba(0,0,0,.7)}

/* Sakura: plum lacquer, a blossoming branch from the outer corner, petals drifting down. */
:root .binder-skin-in-sakura :is(.binder-page,.binder-ghost){background:radial-gradient(ellipse 80% 60% at 100% 0%,#5c1a3c,transparent 70%),linear-gradient(170deg,#3a0f27,#21081a 55%,#14040e)!important;border-color:rgba(255,170,200,.22)!important}
:root .binder-skin-in-sakura :is(.binder-page,.binder-ghost):before{
  background:url("../../img/supporter/skins/sakura-page.a706761d2aaa.svg") right top/min(78%,460px) auto no-repeat,url("../../img/supporter/skins/sakura-petals.cff0d862996f.svg") 0 0/260px 260px repeat;
  opacity:.85;animation:bs-petals 38s linear infinite}
@keyframes bs-petals{to{background-position:right top,-260px 520px}}
:root:root .binder-skin-in-sakura .binder-pocket{border-color:rgba(255,190,212,.26)}
:root .binder-skin-in-sakura .binder-page-number{color:#ffc2d4}

/* Seigaiha: indigo waves rising from the bottom of each page, with moonlight sweeping across. */
:root .binder-skin-in-seigaiha :is(.binder-page,.binder-ghost){background:radial-gradient(circle at 84% 9%,#f4ecd6 0 26px,rgba(244,236,214,.28) 28px,rgba(201,214,240,.10) 60px,transparent 120px),radial-gradient(ellipse 60% 40% at 85% 6%,rgba(201,214,240,.16),transparent 70%),linear-gradient(180deg,#0b1736,#0e1d46 60%,#0a1638)!important;border-color:rgba(201,214,240,.22)!important}
:root .binder-skin-in-seigaiha :is(.binder-page,.binder-ghost):before{opacity:.5;
  background-image:
    linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 45%,transparent 60%),
    radial-gradient(circle at 100% 150%,#0e1d46 24%,#c9d6f0 24% 27%,#0e1d46 27% 36%,#c9d6f0 36% 39%,transparent 39%),
    radial-gradient(circle at 0 150%,#0e1d46 24%,#c9d6f0 24% 27%,#0e1d46 27% 36%,#c9d6f0 36% 39%,transparent 39%),
    radial-gradient(circle at 50% 100%,#c9d6f0 10%,#0e1d46 10% 23%,#c9d6f0 23% 28%,#0e1d46 28% 43%,#c9d6f0 43% 48%,#0e1d46 48% 63%,#c9d6f0 63% 68%,transparent 68%),
    radial-gradient(circle at 100% 50%,#c9d6f0 5%,#0e1d46 5% 15%,#c9d6f0 15% 19%,#0e1d46 19% 29%,#c9d6f0 29% 33%,#0e1d46 33% 44%,#c9d6f0 44% 48%,transparent 48%),
    radial-gradient(circle at 0 50%,#c9d6f0 5%,#0e1d46 5% 15%,#c9d6f0 15% 19%,#0e1d46 19% 29%,#c9d6f0 29% 33%,#0e1d46 33% 44%,#c9d6f0 44% 48%,transparent 48%);
  background-size:300% 100%,56px 28px,56px 28px,56px 28px,56px 28px,56px 28px;background-position:110% 0,0 100%,0 100%,0 100%,0 100%,0 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.25) 35%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.25) 35%,#000 100%);
  animation:bs-moon 14s ease-in-out infinite}
@keyframes bs-moon{0%,100%{background-position:110% 0,0 100%,0 100%,0 100%,0 100%,0 100%}50%{background-position:-10% 0,0 100%,0 100%,0 100%,0 100%,0 100%}}
:root:root .binder-skin-in-seigaiha .binder-pocket{border-color:rgba(201,214,240,.25)}
:root .binder-skin-in-seigaiha .binder-page-number{color:#c9d6f0}

/* Kintsugi: black urushi lacquer mended right across with gold, glinting now and then. */
:root .binder-skin-in-kintsugi :is(.binder-page,.binder-ghost){background:radial-gradient(ellipse 70% 50% at 20% 0%,#2c2620,transparent 70%),linear-gradient(170deg,#1b1813,#0b0a08)!important;border-color:rgba(201,154,62,.4)!important}
:root .binder-skin-in-kintsugi :is(.binder-page,.binder-ghost):before{background:url("../../img/supporter/skins/kintsugi-page.dac4de0a745c.svg") center/100% 100% no-repeat;opacity:.8;animation:bs-glint 10s ease-in-out infinite}
@keyframes bs-glint{0%,80%,100%{filter:none}88%{filter:brightness(1.4) drop-shadow(0 0 4px rgba(243,213,138,.7))}}
:root:root .binder-skin-in-kintsugi .binder-pocket{border-color:rgba(201,154,62,.3)}
:root .binder-skin-in-kintsugi .binder-page-number{color:#e8c26a}

/* Neon: a midnight grid rolling towards a glowing horizon, neon tube edges. */
:root .binder-skin-in-neon :is(.binder-page,.binder-ghost){background:linear-gradient(90deg,transparent,#2ee6ff 20% 80%,transparent) 0 45%/100% 2px no-repeat,radial-gradient(ellipse 60% 14px at 50% 45%,rgba(46,230,255,.45),transparent) 0 0/100% 100% no-repeat,radial-gradient(ellipse 70% 30% at 50% 45%,rgba(255,62,165,.16),transparent 70%),linear-gradient(180deg,#0a1528,#05080f 55%,#0b0718)!important;border-color:rgba(46,230,255,.4)!important;box-shadow:inset 0 0 0 1px rgba(255,62,165,.3),inset 0 0 26px rgba(255,62,165,.16)!important}
:root .binder-skin-in-neon :is(.binder-page,.binder-ghost):before{top:auto;height:55%;
  background:linear-gradient(rgba(46,230,255,.45) 1px,transparent 1px) 0 0/100% 34px,linear-gradient(90deg,rgba(255,62,165,.4) 1px,transparent 1px) 0 0/46px 100%;
  transform:perspective(260px) rotateX(60deg);transform-origin:50% 100%;border-radius:0;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 45%);mask-image:linear-gradient(180deg,transparent,#000 45%);animation:bs-grid 3s linear infinite}
:root .binder-skinned.binder-skin-in-neon .binder-spread:not(.is-single) .binder-page:first-child:before,:root .binder-skin-in-neon .binder-ghost.is-left:before{transform:perspective(260px) rotateX(60deg)}
@keyframes bs-grid{to{background-position:0 34px,0 0}}
:root:root .binder-skin-in-neon .binder-pocket{border-color:rgba(46,230,255,.3)}
:root .binder-skin-in-neon .binder-page-number{color:#7ff3ff;text-shadow:0 0 8px rgba(46,230,255,.8)}

/* Page-turn effects (js/supporter/binder-fx.js), laid over the turning page. */
.bfx-layer{position:absolute;inset:0;z-index:7;pointer-events:none;perspective:600px}
.bfx-layer>i{position:absolute;left:0;top:0;display:block;will-change:transform,opacity}
.bfx-petal{border-radius:70% 0 70% 0;background:linear-gradient(135deg,#fff0f4,#ff8fb0 65%,#f2387d);box-shadow:0 1px 3px rgba(80,0,30,.35)}
.bfx-drop{border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#c9d6f0 45%,rgba(120,150,210,.6));box-shadow:0 0 6px rgba(201,214,240,.6)}
.bfx-wave{top:0;bottom:0;width:120px;margin-left:-60px;
  background:radial-gradient(ellipse 30% 50% at 50% 50%,rgba(240,246,255,.75),transparent 70%),
    repeating-radial-gradient(circle at 50% 120%,rgba(201,214,240,.0) 0 8px,rgba(201,214,240,.35) 8px 10px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 35% 65%,transparent);mask-image:linear-gradient(90deg,transparent,#000 35% 65%,transparent);filter:blur(.4px)}
.bfx-flake{border-radius:1px 4px 1px 3px;background:linear-gradient(110deg,#8a5c16,#f3d58a 40%,#fff6d6 50%,#c99a3e 70%,#8a5c16);box-shadow:0 0 4px rgba(243,213,138,.7)}
.bfx-glint{left:50%!important;top:4%!important;bottom:4%;width:3px;margin-left:-1.5px;background:linear-gradient(180deg,transparent,#fff3cf 20%,#e8c26a 50%,#fff3cf 80%,transparent);
  box-shadow:0 0 10px #f3d58a,0 0 22px rgba(243,213,138,.7);transform-origin:50% 50%}
.bfx-scan{top:0;bottom:0;width:3px;margin-left:-1.5px;background:#bffaff;box-shadow:0 0 6px #2ee6ff,0 0 14px #2ee6ff,0 0 30px rgba(255,62,165,.8)}
.bfx-spark{width:18px;height:2.5px;border-radius:2px;background:#7ff3ff;box-shadow:0 0 6px #2ee6ff}
.bfx-spark.is-pink{background:#ff8fd0;box-shadow:0 0 6px #ff3ea5}
.binder-spread.bfx-glitch{animation:bfx-glitch .26s steps(2) 1}
@keyframes bfx-glitch{0%{filter:drop-shadow(3px 0 0 rgba(255,62,165,.75)) drop-shadow(-3px 0 0 rgba(46,230,255,.75))}50%{filter:drop-shadow(-2px 0 0 rgba(255,62,165,.75)) drop-shadow(2px 0 0 rgba(46,230,255,.75))}100%{filter:none}}
@media (prefers-reduced-motion:reduce){.bfx-layer{display:none}}

/* The picker on the binder form. */
.binder-skins legend,.binder-skins-locked-title{display:flex;align-items:center;gap:10px}
.binder-skin-tag{display:inline-block;padding:3px 8px;border-radius:999px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(100deg,#b8862a,#f5d58a,#c99a3e);color:#1b1408;font-weight:700}
.binder-skin-help{margin:6px 0 12px;font-size:12px;opacity:.8}
.binder-skin-options{display:flex;flex-wrap:wrap;gap:12px}
.binder-skin-option{position:relative;display:grid;justify-items:center;gap:6px;cursor:pointer;font-size:11px;letter-spacing:.06em}
.binder-skin-option input{position:absolute;opacity:0;pointer-events:none}
.binder-skin-preview{position:relative;display:block;width:64px;aspect-ratio:5/7;border-radius:6px 9px 9px 6px;overflow:hidden;border:1px solid rgba(127,127,127,.35);background:linear-gradient(160deg,#1a1a1a,#0c0c0c);transition:transform .2s,box-shadow .2s}
.binder-skin-option:hover .binder-skin-preview{transform:translateY(-2px)}
.binder-skin-option input:checked+.binder-skin-preview{box-shadow:0 0 0 2px var(--pink,#f2387d),0 8px 18px rgba(0,0,0,.3)}
.binder-skin-option input:focus-visible+.binder-skin-preview{outline:2px solid var(--pink,#f2387d);outline-offset:3px}
.binder-skins.is-locked .binder-skin-option{cursor:default;opacity:.75}
.binder-skins.is-locked .binder-skin-preview{filter:saturate(.8)}

/* ------------------------------------------------------- profile rings -- */
.supporter-ring{position:relative;display:inline-grid;place-items:center;border-radius:50%;padding:5px;isolation:isolate}
.supporter-ring:before{content:"";position:absolute;inset:0;border-radius:50%;z-index:-1;animation:sr-spin 6s linear infinite}
.supporter-ring:after{content:"";position:absolute;inset:-6px;border-radius:50%;z-index:-2;filter:blur(10px);opacity:.55;animation:sr-spin 6s linear infinite}
.supporter-ring .public-profile-avatar,.supporter-ring .account-ring-avatar,.supporter-ring .dashboard-avatar-link{border:3px solid var(--bg,#0a0a0a)!important}
/* 3.30: My Collection shows the ring too; the ring, not the picture, sits in the row */
.dashboard-ring{flex:0 0 auto;align-self:center}
@keyframes sr-spin{to{transform:rotate(360deg)}}
.supporter-ring-sakura:before,.supporter-ring-sakura:after{background:conic-gradient(from 0deg,#ffb3cb,#ff5c93,#ffe1ea,#ff7aa6,#ffb3cb)}
.supporter-ring-neon:before,.supporter-ring-neon:after{background:conic-gradient(from 0deg,#2ee6ff,#7ff3ff,#ff3ea5,#2ee6ff 55%,#ff3ea5 80%,#2ee6ff)}
.supporter-ring-neon:before{animation-duration:3s}
.supporter-ring-gold:before,.supporter-ring-gold:after{background:conic-gradient(from 0deg,#8a5c16,#e8c26a,#fff3cf,#c99a3e,#8a5c16,#f3d58a,#a8761f,#8a5c16)}
.supporter-ring-gold:before{animation-duration:9s}
/* Sakura: petals come loose from the spinning ring and blow away. */
.supporter-ring-sakura .sr-fx{position:absolute;inset:0;pointer-events:none;container-type:size;animation:sr-spin 6s linear infinite}
.supporter-ring-sakura .sr-fx i{position:absolute;left:50%;top:50%;width:max(9px,8.5cqmin);height:max(7px,6.6cqmin);translate:-50% -50%;border-radius:70% 0 70% 0;
  background:linear-gradient(135deg,#ffe3ec,#ff7aa6 70%,#f2387d);filter:drop-shadow(0 0 1px rgba(140,20,60,.35));opacity:0;animation:sr-fly 4.2s cubic-bezier(.2,.6,.4,1) infinite;
  --a:0deg;--d:0s;--s:1}
.supporter-ring-sakura .sr-fx i:nth-child(1){--a:20deg;--d:0s}
.supporter-ring-sakura .sr-fx i:nth-child(2){--a:75deg;--d:-.6s;--s:.8}
.supporter-ring-sakura .sr-fx i:nth-child(3){--a:130deg;--d:-1.2s;--s:1.1}
.supporter-ring-sakura .sr-fx i:nth-child(4){--a:185deg;--d:-1.8s;--s:.85}
.supporter-ring-sakura .sr-fx i:nth-child(5){--a:240deg;--d:-2.4s}
.supporter-ring-sakura .sr-fx i:nth-child(6){--a:290deg;--d:-3s;--s:.75}
.supporter-ring-sakura .sr-fx i:nth-child(7){--a:340deg;--d:-3.6s;--s:.95}
.supporter-ring-sakura .sr-fx i{animation-delay:var(--d)}
@keyframes sr-fly{
  0%{opacity:0;transform:rotate(var(--a)) translateY(-47cqmin) rotate(0deg) scale(calc(var(--s) * .5))}
  10%{opacity:1;transform:rotate(var(--a)) translateY(-50cqmin) rotate(40deg) scale(var(--s))}
  65%{opacity:.85}
  100%{opacity:0;transform:rotate(calc(var(--a) + 34deg)) translateY(calc(-50cqmin - 30px)) rotate(260deg) scale(calc(var(--s) * .7))}}
.sr-fx{position:absolute;inset:0;pointer-events:none;container-type:size}
.sr-fx i{display:none}
.supporter-ring-sakura .sr-fx i{display:block}

/* Koi: a ripple of pond water, a kohaku and a golden ogon chasing round it. */
.supporter-ring-koi:before,.supporter-ring-koi:after{background:conic-gradient(from 0deg,#06313a,#1d7f86,#bfe9e4,#1d7f86,#06313a,#14606a,#9fdcd6,#06313a)}
.supporter-ring-koi:before{animation-duration:11s}
.supporter-ring-koi .sr-fx{animation:sr-spin 8s linear infinite}
.supporter-ring-koi .sr-fx i:nth-child(-n+2){display:block;position:absolute;left:50%;top:50%;width:max(22px,24cqmin);height:max(8px,8.5cqmin);
  translate:-50% -50%;transform:rotate(var(--a,0deg)) translateY(-49cqmin);border-radius:42% 58% 58% 42%/50%;
  background:radial-gradient(ellipse 30% 42% at 66% 42%,#e8432a 0 92%,transparent 100%),radial-gradient(ellipse 18% 36% at 34% 58%,#e8432a 0 90%,transparent 100%),linear-gradient(#fffaf2,#efe6d8);
  box-shadow:0 1px 3px rgba(0,0,0,.35)}
.supporter-ring-koi .sr-fx i:nth-child(2){--a:180deg;background:radial-gradient(ellipse 40% 30% at 60% 40%,#fff6cf,transparent 70%),linear-gradient(#ffd56b,#e2a12c)}
/* tail and fins */
.supporter-ring-koi .sr-fx i:before{content:"";position:absolute;right:92%;top:50%;width:46%;height:150%;translate:0 -50%;background:inherit;opacity:.8;
  clip-path:polygon(100% 44%,100% 56%,0 100%,22% 50%,0 0);transform-origin:100% 50%;animation:sr-tail .5s ease-in-out infinite alternate}
.supporter-ring-koi .sr-fx i:after{content:"";position:absolute;left:46%;top:-55%;width:22%;height:210%;
  background:radial-gradient(ellipse 50% 22% at 50% 12%,rgba(255,255,255,.4),transparent),radial-gradient(ellipse 50% 22% at 50% 88%,rgba(255,255,255,.4),transparent)}
@keyframes sr-tail{from{transform:scaleY(.75) skewY(-10deg)}to{transform:scaleY(1) skewY(10deg)}}

/* Raijin: violet storm light, with real lightning arcs crackling along
   the ring (branching bolts drawn in img/supporter/rings/raijin-*.svg). */
.supporter-ring-raiden:before,.supporter-ring-raiden:after{background:conic-gradient(from 0deg,#120634,#5a28d6,#d9c8ff,#5a28d6,#120634,#3a1896,#b48cff,#120634)}
.supporter-ring-raiden:before{animation-duration:3.2s}
.supporter-ring-raiden:after{animation:sr-spin 3.2s linear infinite,sr-storm 3.1s steps(1) infinite}
@keyframes sr-storm{0%,100%{opacity:.5}20%{opacity:1}22%{opacity:.6}24%{opacity:1}34%{opacity:.5}66%{opacity:.95}69%{opacity:.5}}
.supporter-ring-raiden .sr-fx i:nth-child(-n+4){display:block;position:absolute;inset:-14%;background:url("../../img/supporter/rings/raijin-1.c251396bb33e.svg") center/100% 100% no-repeat;
  filter:drop-shadow(0 0 3px rgba(150,100,255,.9));opacity:0;transform:rotate(var(--a));animation:sr-arc 3.1s steps(1) infinite}
.supporter-ring-raiden .sr-fx i:nth-child(1){--a:25deg;--b:190deg}
.supporter-ring-raiden .sr-fx i:nth-child(2){--a:120deg;--b:305deg;background-image:url("../../img/supporter/rings/raijin-2.29c808ca9749.svg");animation-duration:2.7s;animation-delay:-1.1s}
.supporter-ring-raiden .sr-fx i:nth-child(3){--a:230deg;--b:60deg;background-image:url("../../img/supporter/rings/raijin-3.e1d8248b207f.svg");animation-duration:3.7s;animation-delay:-2.2s}
.supporter-ring-raiden .sr-fx i:nth-child(4){--a:320deg;--b:150deg;background-image:url("../../img/supporter/rings/raijin-4.a03fbda14188.svg");animation-duration:2.3s;animation-delay:-.6s}
/* flash, flicker, gone; then strike again somewhere else on the ring */
@keyframes sr-arc{
  0%{opacity:0;transform:rotate(var(--a))}
  8%{opacity:1;transform:rotate(var(--a))}
  10%{opacity:.2;transform:rotate(var(--a))}
  12%{opacity:1;transform:rotate(var(--a)) scaleX(-1)}
  18%{opacity:0}
  42%{opacity:1;transform:rotate(var(--b))}
  44%{opacity:.25;transform:rotate(var(--b))}
  46%{opacity:1;transform:rotate(var(--b)) scaleY(-1)}
  52%{opacity:0}
  76%{opacity:.9;transform:rotate(calc(var(--a) + 100deg)) scaleX(-1)}
  81%{opacity:0}
  100%{opacity:0}}
/* Manga: black and white speed lines that jolt round, halftone dots and a ドン!. */
.supporter-ring-manga:before{background:conic-gradient(#fff 0 0);box-shadow:0 0 0 2px #111,inset 0 0 0 1.5px #111}
.supporter-ring-manga:before{animation:none}
/* focus lines bursting outward, like a manga reveal panel */
.supporter-ring-manga:after{inset:-16px;filter:none;opacity:.9;animation:sr-spin 2.4s steps(9) infinite;
  background:repeating-conic-gradient(from 0deg,var(--ink,#fff) 0 1.4deg,transparent 1.4deg 6deg,var(--ink,#fff) 6deg 7deg,transparent 7deg 13deg);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent 66%,#000 72%,rgba(0,0,0,.35) 88%,transparent 100%);mask-image:radial-gradient(circle closest-side,transparent 66%,#000 72%,rgba(0,0,0,.35) 88%,transparent 100%)}
.supporter-ring-manga .public-profile-avatar,.supporter-ring-manga .account-ring-avatar,.supporter-ring-manga .dashboard-avatar-link{box-shadow:0 0 0 2px #111}
.supporter-ring-manga .sr-fx i:nth-child(1){display:block;position:absolute;right:-14%;top:-8%;font-style:normal;transform:rotate(12deg) scale(0);transform-origin:30% 80%;animation:sr-don 3.4s cubic-bezier(.3,1.6,.5,1) infinite}
.supporter-ring-manga .sr-fx i:nth-child(1):before{content:"ドン!";display:block;font:900 max(12px,15cqmin)/1 "Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;color:#e8202a;
  -webkit-text-stroke:3px #fff;paint-order:stroke fill;letter-spacing:-.04em;white-space:nowrap;text-shadow:2px 2px 0 #111}
@keyframes sr-don{0%,30%{transform:rotate(12deg) scale(0)}36%{transform:rotate(12deg) scale(1.15)}40%,86%{transform:rotate(12deg) scale(1)}92%,100%{transform:rotate(12deg) scale(0)}}

/* Foxfire: kitsunebi, blue fox flames drifting round a moonlit ring. */
.supporter-ring-foxfire:before,.supporter-ring-foxfire:after{background:conic-gradient(from 0deg,#071531,#1b5fff,#9ff6ff,#071531 40%,#1b5fff 70%,#9ff6ff 85%,#071531)}
.supporter-ring-foxfire:before{animation-duration:9s}
.supporter-ring-foxfire .sr-fx{animation:sr-spin 10s linear infinite reverse}
.supporter-ring-foxfire .sr-fx i:nth-child(-n+3){display:block;position:absolute;left:50%;top:50%;width:max(9px,10cqmin);height:max(9px,10cqmin);translate:-50% -50%;
  transform:rotate(var(--a)) translateY(calc(-50cqmin - 6px)) rotate(-45deg);border-radius:50% 0 50% 50%;
  background:radial-gradient(circle at 62% 38%,#ffffff 0 14%,#b9fbff 30%,#38c8ff 62%,rgba(27,95,255,.2) 100%);
  filter:drop-shadow(0 0 4px #38c8ff) drop-shadow(0 0 9px rgba(27,95,255,.8));animation:sr-flame 1.3s ease-in-out infinite alternate}
.supporter-ring-foxfire .sr-fx i:nth-child(1){--a:0deg}
.supporter-ring-foxfire .sr-fx i:nth-child(2){--a:120deg;animation-delay:-.45s}
.supporter-ring-foxfire .sr-fx i:nth-child(3){--a:240deg;animation-delay:-.9s}
@keyframes sr-flame{from{scale:.82;opacity:.75}to{scale:1.12;opacity:1}}

/* ------------------------------------------- 3.22 free event rings -- */
/* Anyone can wear these while the event is on (collectors/events.py
   EVENT_RINGS); the slug is the event's slug. */

/* Halloween, "Hyakki": a dark pumpkin-and-violet ring with two grinning
   jack-o'-lanterns riding round it, bats flapping off into the night, and a
   skull and a bone rattling at the bottom. Drawn in img/supporter/rings/halloween-*.svg. */
.supporter-ring-halloween:before,.supporter-ring-halloween:after{background:conic-gradient(from 0deg,#ff7a1a,#1d1328 18%,#8f5bd6 32%,#1d1328 46%,#ff7a1a 60%,#1d1328 74%,#8f5bd6 88%,#ff7a1a)}
.supporter-ring-halloween:before{animation-duration:9s}
.supporter-ring-halloween:after{opacity:.75}
.supporter-ring-halloween .sr-fx i:nth-child(-n+7){display:block;position:absolute;left:50%;top:50%;translate:-50% -50%;background:center/contain no-repeat}
/* the pumpkins ride round the ring, bobbing */
.supporter-ring-halloween .sr-fx i:nth-child(-n+2){width:max(16px,21cqmin);height:max(15px,19.5cqmin);background-image:url("../../img/supporter/rings/halloween-pumpkin.00645437ad7c.svg");
  filter:drop-shadow(0 0 5px rgba(255,122,26,.75));animation:sr-pumpkin 8s linear infinite}
.supporter-ring-halloween .sr-fx i:nth-child(2){animation-delay:-4s}
@keyframes sr-pumpkin{
  0%{transform:rotate(0deg) translateY(-51cqmin) rotate(0deg) scale(1)}
  25%{transform:rotate(90deg) translateY(-53cqmin) rotate(-90deg) scale(1.08)}
  50%{transform:rotate(180deg) translateY(-51cqmin) rotate(-180deg) scale(1)}
  75%{transform:rotate(270deg) translateY(-53cqmin) rotate(-270deg) scale(1.08)}
  100%{transform:rotate(360deg) translateY(-51cqmin) rotate(-360deg) scale(1)}}
/* bats fly off the ring and away, flapping */
.supporter-ring-halloween .sr-fx i:nth-child(n+3):nth-child(-n+5){width:max(22px,27cqmin);height:max(11px,13.5cqmin);background-image:url("../../img/supporter/rings/halloween-bat.19cad48cf885.svg");
  filter:drop-shadow(0 0 4px rgba(201,163,255,.7));opacity:0;animation:sr-bat 4.2s ease-in infinite}
.supporter-ring-halloween .sr-fx i:nth-child(3){--a:-40deg}
.supporter-ring-halloween .sr-fx i:nth-child(4){--a:55deg;animation-delay:-1.4s}
.supporter-ring-halloween .sr-fx i:nth-child(5){--a:150deg;animation-delay:-2.8s}
@keyframes sr-bat{
  0%{opacity:0;transform:rotate(var(--a)) translateY(-46cqmin) rotate(calc(-1 * var(--a))) scale(.4,.4)}
  12%{opacity:1;transform:rotate(var(--a)) translateY(-52cqmin) rotate(calc(-1 * var(--a))) scale(.8,.55)}
  24%{transform:rotate(calc(var(--a) + 8deg)) translateY(-60cqmin) rotate(calc(-1 * var(--a))) scale(.9,1)}
  36%{transform:rotate(calc(var(--a) + 14deg)) translateY(-68cqmin) rotate(calc(-1 * var(--a))) scale(.95,.55)}
  48%{transform:rotate(calc(var(--a) + 20deg)) translateY(-76cqmin) rotate(calc(-1 * var(--a))) scale(1,1)}
  60%{transform:rotate(calc(var(--a) + 25deg)) translateY(-84cqmin) rotate(calc(-1 * var(--a))) scale(1,.55)}
  72%{opacity:.8;transform:rotate(calc(var(--a) + 30deg)) translateY(-92cqmin) rotate(calc(-1 * var(--a))) scale(1,1)}
  100%{opacity:0;transform:rotate(calc(var(--a) + 38deg)) translateY(-104cqmin) rotate(calc(-1 * var(--a))) scale(.9,.55)}}
/* a skull at the bottom of the ring, with a bone beside it, rattling now and then */
.supporter-ring-halloween .sr-fx i:nth-child(6){width:max(14px,17cqmin);height:max(15px,18.5cqmin);background-image:url("../../img/supporter/rings/halloween-skull.7601f60436fe.svg");
  transform:translateY(50cqmin);transform-origin:50% 90%;filter:drop-shadow(0 0 4px rgba(155,225,93,.55));animation:sr-rattle 3.6s ease-in-out infinite}
.supporter-ring-halloween .sr-fx i:nth-child(7){width:max(18px,22cqmin);height:max(7px,9cqmin);background-image:url("../../img/supporter/rings/halloween-bone.686b74f6e29a.svg");
  transform:rotate(-38deg) translateY(50cqmin) rotate(20deg);animation:sr-bone 3.6s ease-in-out infinite}
@keyframes sr-rattle{0%,70%,100%{rotate:0deg}74%{rotate:-12deg}78%{rotate:10deg}82%{rotate:-8deg}86%{rotate:5deg}90%{rotate:0deg}}
@keyframes sr-bone{0%,72%,100%{translate:-50% -50%}76%{translate:-50% calc(-50% - 3px)}80%{translate:-50% -50%}84%{translate:-50% calc(-50% - 2px)}88%{translate:-50% -50%}}

/* Christmas, "Gift ribbon": a red and white ribbon wound round, a gold bow
   on top, and snow drifting down past it. */
.supporter-ring-christmas:before{background:repeating-conic-gradient(from 0deg,#e0283f 0 10deg,#fbf6ea 10deg 20deg);animation-duration:14s;
  -webkit-mask-image:radial-gradient(circle closest-side,transparent 74%,#000 76%);mask-image:radial-gradient(circle closest-side,transparent 74%,#000 76%);
  box-shadow:0 0 0 1.5px #b51c30}
.supporter-ring-christmas:after{background:conic-gradient(#e0283f 0 0);opacity:.35}
/* behind the picture, so the snow never falls across someone's face */
.supporter-ring-christmas .sr-fx{z-index:-1}
.supporter-ring-christmas .sr-fx i:nth-child(-n+2){display:block;position:absolute;left:50%;top:-7%;width:max(12px,17cqmin);height:max(9px,12cqmin);
  background:radial-gradient(ellipse at 30% 35%,#fff3c4 0 12%,#f2c14e 40%,#b9871d 100%);border-radius:60% 40% 60% 40%/70% 30% 70% 30%;
  box-shadow:0 1px 2px rgba(0,0,0,.4)}
.supporter-ring-christmas .sr-fx i:nth-child(1){margin-left:calc(-1 * max(12px,17cqmin));transform-origin:100% 50%;transform:rotate(16deg)}
.supporter-ring-christmas .sr-fx i:nth-child(2){transform-origin:0 50%;transform:rotate(-16deg)}
.supporter-ring-christmas .sr-fx i:nth-child(3){display:block;position:absolute;left:50%;top:-3%;width:max(7px,7cqmin);height:max(7px,7cqmin);translate:-50% 0;border-radius:40%;
  background:radial-gradient(circle at 35% 35%,#fff3c4,#f2c14e 50%,#9c6f12);box-shadow:0 1px 2px rgba(0,0,0,.45)}
.supporter-ring-christmas .sr-fx i:nth-child(n+4){display:block;position:absolute;top:-6%;width:max(4px,3.6cqmin);height:max(4px,3.6cqmin);border-radius:50%;background:#ffffff;
  box-shadow:0 0 4px rgba(255,255,255,.9);opacity:0;animation:sr-snow 4.2s linear infinite}
.supporter-ring-christmas .sr-fx i:nth-child(4){left:8%}
.supporter-ring-christmas .sr-fx i:nth-child(5){left:30%;animation-delay:-1.4s;animation-duration:5s}
.supporter-ring-christmas .sr-fx i:nth-child(6){left:72%;animation-delay:-2.6s}
.supporter-ring-christmas .sr-fx i:nth-child(7){left:92%;animation-delay:-.7s;animation-duration:4.8s}
@keyframes sr-snow{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}50%{transform:translate(5px,55cqmin)}88%{opacity:.9}100%{opacity:0;transform:translate(-4px,112cqmin)}}

/* New Year, "Hanabi": midnight navy and gold, with little fireworks bursting
   at different points round the ring. */
.supporter-ring-newyear:before,.supporter-ring-newyear:after{background:conic-gradient(from 0deg,#070b1e,#f5c451,#fff3cf,#1a2550,#f5c451 45%,#070b1e 60%,#f5c451 82%,#070b1e)}
.supporter-ring-newyear:before{animation-duration:10s}
.supporter-ring-newyear .sr-fx i:nth-child(-n+4){display:block;position:absolute;left:50%;top:50%;width:max(22px,30cqmin);height:max(22px,30cqmin);translate:-50% -50%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,var(--c) 0 5deg,transparent 5deg 30deg);
  -webkit-mask-image:radial-gradient(circle,transparent 22%,#000 26%,#000 46%,transparent 50%);mask-image:radial-gradient(circle,transparent 22%,#000 26%,#000 46%,transparent 50%);
  filter:drop-shadow(0 0 3px var(--c));opacity:0;animation:sr-hanabi 3.2s ease-out infinite}
.supporter-ring-newyear .sr-fx i:nth-child(1){--c:#f5c451;--a:35deg}
.supporter-ring-newyear .sr-fx i:nth-child(2){--c:#ff4fa3;--a:150deg;animation-delay:-.8s}
.supporter-ring-newyear .sr-fx i:nth-child(3){--c:#5fe1ff;--a:250deg;animation-delay:-1.6s}
.supporter-ring-newyear .sr-fx i:nth-child(4){--c:#fff3cf;--a:320deg;animation-delay:-2.4s}
@keyframes sr-hanabi{
  0%{opacity:0;transform:rotate(var(--a)) translateY(-52cqmin) scale(.15)}
  10%{opacity:1}
  45%{opacity:.9;transform:rotate(var(--a)) translateY(-52cqmin) scale(1)}
  70%,100%{opacity:0;transform:rotate(var(--a)) translateY(-50cqmin) scale(1.15)}}

@media (prefers-reduced-motion:reduce){
  .supporter-ring-halloween .sr-fx i:nth-child(n+3):nth-child(-n+5),.supporter-ring-christmas .sr-fx i:nth-child(n+4){display:none!important}
  .supporter-ring-halloween .sr-fx i:nth-child(2){transform:rotate(180deg) translateY(-51cqmin) rotate(-180deg)}
  .supporter-ring-halloween .sr-fx i:nth-child(1){transform:translateY(-51cqmin)}
  .supporter-ring-newyear .sr-fx i:nth-child(1){opacity:1;transform:rotate(var(--a)) translateY(-52cqmin)}
}

/* The Account page card for the free event ring. */
.event-ring-form{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:6px 0 4px}
.event-ring-form .supporter-ring{margin:10px 6px}
.event-ring-form .account-ring-avatar{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--panel,#111);font-weight:700;font-size:24px}
.event-ring-copy{flex:1;min-width:180px;display:grid;gap:4px}
.event-ring-copy strong{font-size:16px}
.event-ring-copy small{color:var(--muted,#9a9a9a);line-height:1.45}

/* -------------------------------------------------------- name effects -- */
.name-fx{position:relative;display:inline-block;isolation:isolate}
/* Gold leaf: real leaf colours with a shine running across now and then. */
.name-fx-gold{color:transparent;background:linear-gradient(100deg,#8a5c16 0%,#c99a3e 18%,#f3d58a 34%,#fff6d6 42%,#e8c26a 50%,#a8761f 66%,#e8c26a 84%,#8a5c16 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25));animation:nfx-shine 6s ease-in-out infinite}
@keyframes nfx-shine{0%,55%{background-position:100% 0}85%,100%{background-position:0 0}}
/* Neon: a sign that buzzes into life, then hums. */
.name-fx-neon{color:#f2feff;text-shadow:0 0 2px #fff,0 0 8px #2ee6ff,0 0 18px #2ee6ff,0 0 34px #ff3ea5;animation:nfx-on 1.4s steps(1) both,nfx-hum 4.5s ease-in-out 1.4s infinite}
@keyframes nfx-on{0%{opacity:.15;text-shadow:none}12%{opacity:1}16%{opacity:.25;text-shadow:none}24%{opacity:1}30%{opacity:.4}38%,100%{opacity:1}}
@keyframes nfx-hum{0%,100%{text-shadow:0 0 2px #fff,0 0 8px #2ee6ff,0 0 18px #2ee6ff,0 0 34px #ff3ea5}50%{text-shadow:0 0 2px #fff,0 0 10px #2ee6ff,0 0 24px #2ee6ff,0 0 44px #ff3ea5}}
/* Sakura: blossom pink, with petals drifting down past the letters. */
.name-fx-sakura{color:transparent;background:linear-gradient(180deg,#ffd3e0 0%,#ff8fb0 45%,#f2387d 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 6px rgba(242,56,125,.35))}
.name-fx-sakura:after{content:"";position:absolute;inset:-30% -6%;pointer-events:none;background:url("../../img/supporter/skins/sakura-petals.cff0d862996f.svg") 0 0/150px 150px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 25% 75%,transparent);mask-image:linear-gradient(180deg,transparent,#000 25% 75%,transparent);animation:nfx-petals 9s linear infinite}
@keyframes nfx-petals{to{background-position:-150px 300px}}
/* 3.30: a slim branch of blossom under the name, like Bexi's mock-up. */
.name-fx-sakura{margin-bottom:.22em}
.name-fx-sakura:before{content:"";position:absolute;left:-8%;right:-22%;bottom:-.5em;aspect-ratio:750/280;z-index:1;pointer-events:none;
  background:url("../../img/supporter/sakura/name-sprig.3a1d2a740bd7.webp") center/100% 100% no-repeat;transform-origin:10% 60%;animation:nfx-sprig 7s ease-in-out infinite}
@keyframes nfx-sprig{0%,100%{transform:rotate(0)}50%{transform:rotate(-1.2deg)}}
/* Sumi brush: a sweep of ink, in the theme's accent, painted under the name. */
.name-fx-sumi:before{content:"";position:absolute;left:-4%;right:-6%;bottom:-2%;height:46%;z-index:-1;background:var(--pink,#f2387d);opacity:.85;
  -webkit-mask:url("../../img/supporter/name/sumi-swash.8ae5e01eaca9.svg") 0 0/100% 100% no-repeat;mask:url("../../img/supporter/name/sumi-swash.8ae5e01eaca9.svg") 0 0/100% 100% no-repeat;
  clip-path:inset(0 100% 0 0);animation:nfx-sweep 1.1s cubic-bezier(.6,0,.2,1) .3s forwards}
@keyframes nfx-sweep{to{clip-path:inset(0 0 0 0)}}
/* Manga: inked letters, a hard shadow, speed lines rushing past and a ドン!. */
.name-fx-manga{color:#fff;-webkit-text-stroke:.07em #111;paint-order:stroke fill;text-shadow:.06em .06em 0 #111;font-weight:900;font-style:italic;padding-right:.15em}
.name-fx-manga:before{content:"";position:absolute;inset:8% -12% 8% -24%;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(180deg,var(--ink,#fff) 0 1.5px,transparent 1.5px 9px,var(--ink,#fff) 9px 10px,transparent 10px 17px);opacity:.35;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30% 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30% 70%,transparent);animation:nfx-speed .5s linear infinite}
@keyframes nfx-speed{from{background-position:0 0}to{background-position:0 17px}}
.name-fx-manga:after{content:"ドン!";position:absolute;right:-.62em;top:-.12em;font:900 .3em/1 "Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;font-style:normal;color:#e8202a;
  -webkit-text-stroke:.07em #fff;paint-order:stroke fill;text-shadow:.07em .07em 0 #111;letter-spacing:0;transform:rotate(14deg) scale(0);transform-origin:20% 80%;animation:nfx-don 4s cubic-bezier(.3,1.6,.5,1) 1s infinite}
@keyframes nfx-don{0%{transform:rotate(14deg) scale(0)}6%{transform:rotate(14deg) scale(1.2)}10%,70%{transform:rotate(14deg) scale(1)}76%,100%{transform:rotate(14deg) scale(0)}}
/* Light pages: neon needs a dark glow to read. */
:root:is([data-theme="light"],[data-theme="ink"],[data-theme="kintsugi"],[data-theme="sakura"],[data-theme="manga"]) .name-fx-neon{color:#0aa8c8;text-shadow:0 0 1px #0aa8c8,0 0 10px rgba(46,230,255,.7),0 0 24px rgba(255,62,165,.45);animation:none}

/* The name effect picker on the Account page. */
.sx-names{display:flex;flex-wrap:wrap;gap:10px}
.sx-name{position:relative;display:grid;justify-items:center;gap:6px;padding:12px 16px 8px;min-width:120px;border:1px solid var(--line,#2a2a2a);border-radius:14px;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.sx-name input{position:absolute;opacity:0;pointer-events:none}
.sx-name-preview{font-size:22px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.sx-name small{font-size:11px;opacity:.75}
.sx-name:has(input:checked){border-color:var(--pink,#f2387d);box-shadow:0 0 0 1px var(--pink,#f2387d)}
.sx-name:has(input:checked) small{opacity:1;font-weight:700}
.sx-name:has(input:focus-visible){outline:2px solid var(--pink,#f2387d);outline-offset:3px}
.supporter-extras-card.is-locked .sx-name{cursor:default}

/* ---------------------------------------------- Account: supporter extras -- */
.supporter-extras-card .account-card-head .eyebrow{color:#c99a3e}
.sx-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.sx-theme{position:relative;display:grid;border-radius:14px;overflow:hidden;border:1px solid var(--line,#2a2a2a);background:var(--panel,#111);cursor:pointer;transition:transform .25s,box-shadow .25s,border-color .25s;text-align:left;color:inherit;padding:0;font:inherit}
.sx-theme:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.28)}
.sx-theme input{position:absolute;opacity:0;pointer-events:none}
.sx-theme:has(input:checked){border-color:var(--pink,#f2387d);box-shadow:0 0 0 1px var(--pink,#f2387d)}
.sx-theme:has(input:focus-visible){outline:2px solid var(--pink,#f2387d);outline-offset:3px}
.sx-theme-art{position:relative;display:block;aspect-ratio:16/9;background-size:cover;background-position:center}
.sx-theme-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55))}
.sx-theme-art-toge{background-image:url("../../img/supporter/toge/saitodex-hero-mobile.c60fb25c5936.webp")}
.sx-theme-art-koi{background-image:url("../../img/supporter/koi/saitodex-hero-mobile.5fc777a8c6a5.webp")}
.sx-theme-art-kintsugi{background-image:url("../../img/supporter/kintsugi/saitodex-hero-mobile.acd4d7ad5144.webp")}
.sx-theme-art-sakura{background-image:url("../../img/supporter/sakura/saitodex-hero-mobile.79ad939009e3.webp")}
.sx-theme-art-manga{background-image:url("../../img/supporter/manga/saitodex-hero-mobile.0934dbf11fec.webp")}
.sx-theme-art b{position:absolute;right:12px;bottom:8px;z-index:1;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-size:20px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.sx-theme-copy{display:grid;gap:6px;padding:12px 14px 14px}
.sx-theme-copy strong{font-size:14px;letter-spacing:.04em}
.sx-theme-copy small{font-size:12px;line-height:1.45;opacity:.75}
.sx-swatches{display:flex;gap:5px}
.sx-swatches i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(127,127,127,.4)}
.sx-sw-toge i:nth-child(1){background:#05080f}
.sx-sw-toge i:nth-child(2){background:#0b1626}
.sx-sw-toge i:nth-child(3){background:#2ee6ff}
.sx-sw-toge i:nth-child(4){background:#ff3ea5}
.sx-sw-toge i:nth-child(5){background:#ff2a3d}
.sx-sw-kintsugi i:nth-child(1){background:#f3eee3}
.sx-sw-kintsugi i:nth-child(2){background:#fbf8f1}
.sx-sw-kintsugi i:nth-child(3){background:#1b1712}
.sx-sw-kintsugi i:nth-child(4){background:#c99a3e}
.sx-sw-kintsugi i:nth-child(5){background:#c8392b}
.sx-sw-koi i:nth-child(1){background:#04161b}
.sx-sw-koi i:nth-child(2){background:#0a2830}
.sx-sw-koi i:nth-child(3){background:#ff6a3d}
.sx-sw-koi i:nth-child(4){background:#f6ead8}
.sx-sw-koi i:nth-child(5){background:#e9b44c}
.sx-sw-sakura i:nth-child(1){background:#fff5f7}
.sx-sw-sakura i:nth-child(2){background:#ffffff}
.sx-sw-sakura i:nth-child(3){background:#2b1d33}
.sx-sw-sakura i:nth-child(4){background:#d63d73}
.sx-sw-sakura i:nth-child(5){background:#ffc2d4}
.sx-sw-manga i:nth-child(1){background:#fbfaf7}
.sx-sw-manga i:nth-child(2){background:#ffffff}
.sx-sw-manga i:nth-child(3){background:#111111}
.sx-sw-manga i:nth-child(4){background:#8a8a8a}
.sx-sw-manga i:nth-child(5){background:#e8202a}
.sx-theme-none .sx-theme-art{background:linear-gradient(135deg,#1a1a1a,#0b0b0b)}
.sx-theme-none .sx-theme-art b{font-family:inherit;font-size:12px;letter-spacing:.14em;left:14px;right:auto}
.sx-rings{display:flex;flex-wrap:wrap;gap:18px;margin-top:6px}
.sx-ring{position:relative;display:grid;justify-items:center;gap:8px;cursor:pointer;font-size:12px}
.sx-ring input{position:absolute;opacity:0;pointer-events:none}
.sx-ring .account-ring-avatar{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--panel,#111);border:2px solid var(--line,#2a2a2a);object-fit:cover;font-weight:700;font-size:20px}
.sx-ring:has(input:checked) span:last-child{color:var(--pink,#f2387d);font-weight:700}
.sx-ring:has(input:focus-visible) .account-ring-avatar{outline:2px solid var(--pink,#f2387d);outline-offset:6px}
.sx-subhead{margin:22px 0 10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.sx-note{margin:-4px 0 10px;font-size:13px;opacity:.75}
.sx-pthemes{display:flex;flex-wrap:wrap;gap:10px}
.sx-ptheme{position:relative;display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border:1px solid var(--line,#2a2a2a);border-radius:999px;cursor:pointer;font-size:13px;transition:border-color .2s,box-shadow .2s}
.sx-ptheme input{position:absolute;opacity:0;pointer-events:none}
.sx-ptheme-chip{display:block;width:34px;height:34px;border-radius:50%;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.sx-ptheme-none{background:conic-gradient(from 45deg,#0b0b0b 0 25%,#f4f1ea 0 50%,#0b0b0b 0 75%,#f4f1ea 0)}
.sx-ptheme:has(input:checked){border-color:var(--pink,#f2387d);box-shadow:0 0 0 1px var(--pink,#f2387d)}
.sx-ptheme:has(input:checked) span:last-child{font-weight:700}
.sx-ptheme:has(input:focus-visible){outline:2px solid var(--pink,#f2387d);outline-offset:3px}
.supporter-extras-card.is-locked .sx-ptheme{cursor:default}
.sx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:18px}
.sx-actions small{opacity:.7}
.supporter-extras-card.is-locked .sx-theme{cursor:default}
.supporter-extras-card.is-locked .sx-theme:hover{transform:none;box-shadow:none}
.sx-lock{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}

@media (prefers-reduced-motion:reduce){
  .binder-skinned .binder-page:before,.binder-skinned .binder-page:after,.binder-skinned .binder-ghost:before,.binder-skinned .binder-ghost:after{animation:none!important}
  .supporter-ring:before,.supporter-ring:after,.supporter-ring .sr-fx,.supporter-ring .sr-fx i,.supporter-ring .sr-fx i:before,.supporter-ring .sr-fx i:after{animation:none!important}
  .supporter-ring-sakura .sr-fx i{animation:none;opacity:.9;transform:rotate(var(--a)) translateY(-50cqmin) rotate(40deg) scale(var(--s))}
  .supporter-ring-sakura .sr-fx i:nth-child(even){display:none}
  .name-fx-sakura:before{animation:none}
  .supporter-ring-raiden .sr-fx i:nth-child(1){opacity:.85}
  .binder-skin:after{transition:none}
  .name-fx,.name-fx:before,.name-fx:after{animation:none!important}
  .name-fx-sumi:before{clip-path:none}
  .name-fx-manga:after{transform:rotate(14deg)}
}
.sx-theme{align-content:start;white-space:normal}
.sx-theme-copy small,.sx-theme-copy strong{white-space:normal}
.sx-ring>.account-ring-avatar{margin:5px}
/* 3.20.5: Yozakura's card art and swatches (missing in 3.20.3) */
.sx-theme-art-yozakura{background-image:url("../../img/supporter/yozakura/saitodex-hero-mobile.2ed814b0960c.webp")}
.sx-sw-yozakura i:nth-child(1){background:#120d1c}
.sx-sw-yozakura i:nth-child(2){background:#1c1530}
.sx-sw-yozakura i:nth-child(3){background:#fdf2f6}
.sx-sw-yozakura i:nth-child(4){background:#ff8fb4}
.sx-sw-yozakura i:nth-child(5){background:#ffb35a}

/* =====================================================================
 * 3.21: tuner extras. Inspired by tuning culture, never a real brand.
 * ===================================================================== */

/* ---------------------------------------------------- tuner theme cards -- */
.sx-theme-art-boost{background-image:url("../../img/supporter/boost/saitodex-hero-mobile.4d8a4312a0d3.webp")}
.sx-theme-art-shakotan{background-image:url("../../img/supporter/shakotan/saitodex-hero-mobile.dbbae09ba23b.webp")}
.sx-theme-art-timeattack{background-image:url("../../img/supporter/timeattack/saitodex-hero-mobile.26b843f500a3.webp")}
.sx-sw-boost i:nth-child(1){background:#07070b}
.sx-sw-boost i:nth-child(2){background:#1ee3c8}
.sx-sw-boost i:nth-child(3){background:#2f6bff}
.sx-sw-boost i:nth-child(4){background:#7b3cff}
.sx-sw-boost i:nth-child(5){background:#ff3d8f}
.sx-sw-shakotan i:nth-child(1){background:#0b0607}
.sx-sw-shakotan i:nth-child(2){background:#2a2d33}
.sx-sw-shakotan i:nth-child(3){background:#ff2d3a}
.sx-sw-shakotan i:nth-child(4){background:#d9a441}
.sx-sw-shakotan i:nth-child(5){background:#f3f5f8}
.sx-sw-timeattack i:nth-child(1){background:#f3f5f8}
.sx-sw-timeattack i:nth-child(2){background:#ffffff}
.sx-sw-timeattack i:nth-child(3){background:#11151c}
.sx-sw-timeattack i:nth-child(4){background:#7b2cf5}
.sx-sw-timeattack i:nth-child(5){background:#e10600}

/* ---------------------------------------------------------- tuner rings -- */
/* Boost gauge: a gauge face that doesn't spin; the needle spools up to the
   redline, flutters, and drops back like a blow-off. */
.supporter-ring-boost:before{animation:none;background:
  conic-gradient(from -135deg,transparent 0 198deg,#7b3cff 198deg 232deg,#ff3d8f 232deg 270deg,transparent 270deg),
  repeating-conic-gradient(from -135deg,#f6f3ec 0 1.6deg,transparent 1.6deg 13.5deg),
  conic-gradient(#0b0c0f 0 0);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent 74%,#000 76%);mask-image:radial-gradient(circle closest-side,transparent 74%,#000 76%);
  box-shadow:0 0 0 2px #8d929b,0 0 0 3px #2a2d33}
.supporter-ring-boost:after{animation:none;background:conic-gradient(from -135deg,#1ee3c8 0 198deg,#ff3d8f 198deg 270deg,transparent 270deg);opacity:.45}
.supporter-ring-boost .sr-fx i:nth-child(1){display:block;position:absolute;left:50%;top:-4%;width:max(5px,5.5cqmin);height:54%;margin-left:min(-2.5px,-2.75cqmin);
  background:linear-gradient(180deg,#e4fffa,#1ee3c8 10%,#7b3cff 22%,transparent 22%);border-radius:4px;transform-origin:50% 100%;
  filter:drop-shadow(0 0 3px #1ee3c8) drop-shadow(0 0 7px rgba(123,60,255,.9));
  animation:sr-needle 4.2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sr-needle{
  0%{transform:rotate(-120deg)}
  32%{transform:rotate(112deg)}
  36%{transform:rotate(104deg)}40%{transform:rotate(114deg)}44%{transform:rotate(106deg)}48%{transform:rotate(113deg)}
  60%{transform:rotate(-70deg)}
  100%{transform:rotate(-120deg)}}

/* Burnt titanium: heat-blued colours turning slowly, with a heat shimmer. */
.supporter-ring-titanium:before,.supporter-ring-titanium:after{background:conic-gradient(from 0deg,#d9b45a,#e8a24a,#b06ab3,#5b4fd6,#3f6fd8,#6fd3e8,#3f6fd8,#8a5cc8,#d18a52,#d9b45a)}
.supporter-ring-titanium:before{animation-duration:12s}
.supporter-ring-titanium:after{animation:sr-spin 12s linear infinite,sr-heat 3.6s ease-in-out infinite alternate}
@keyframes sr-heat{from{filter:blur(10px) hue-rotate(0deg);opacity:.45}to{filter:blur(13px) hue-rotate(-24deg);opacity:.8}}

/* Coilover: red coils wound round the picture that compress and rebound.
   3.23: the coils squash with a transform, not padding, so the ring never
   changes size and the page around it stays still. */
.supporter-ring-coil:before{animation:sr-coil 2.2s cubic-bezier(.45,0,.55,1) infinite;background:
  repeating-conic-gradient(from 8deg,#ff2d3a 0 9deg,#ff8a92 9deg 11deg,#a5101a 11deg 17deg,#3a060a 17deg 22.5deg)}
.supporter-ring-coil:after{animation:none;background:conic-gradient(#ff2d3a 0 0);opacity:.35}
.supporter-ring-coil .public-profile-avatar,.supporter-ring-coil .account-ring-avatar,.supporter-ring-coil .dashboard-avatar-link{box-shadow:0 0 0 2px #d9a441}
@keyframes sr-coil{0%,100%{transform:scale(1)}40%{transform:scale(.955)}60%{transform:scale(1.02)}75%{transform:scale(.99)}}
/* a glint running along the coils */
.supporter-ring-coil .sr-fx{animation:sr-spin 2.2s linear infinite}
.supporter-ring-coil .sr-fx i:nth-child(1){display:block;position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 82%,rgba(255,240,240,.85) 90%,transparent 97%);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent 84%,#000 86%);mask-image:radial-gradient(circle closest-side,transparent 84%,#000 86%)}

/* Chequered: a chequered flag ring, with a purple sector light lapping it. */
.supporter-ring-chequered:before{animation:sr-spin 14s linear infinite;background:
  repeating-conic-gradient(from 0deg,#11151c 0 7.5deg,#ffffff 7.5deg 15deg);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent 70%,#000 72%);mask-image:radial-gradient(circle closest-side,transparent 70%,#000 72%);
  box-shadow:0 0 0 1.5px #11151c}
.supporter-ring-chequered:after{animation:none;background:conic-gradient(#7b2cf5 0 0);opacity:.35}
.supporter-ring-chequered .sr-fx{animation:sr-spin 2.6s linear infinite}
.supporter-ring-chequered .sr-fx i:nth-child(1){display:block;position:absolute;left:50%;top:50%;width:max(8px,8cqmin);height:max(8px,8cqmin);translate:-50% -50%;border-radius:50%;
  transform:translateY(calc(-50cqmin + 2px));background:#b48cff;box-shadow:0 0 0 2px #fff,0 0 10px #7b2cf5,0 0 22px #7b2cf5}
.supporter-ring-chequered .sr-fx i:nth-child(2){display:block;position:absolute;inset:-2px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 70%,rgba(123,44,245,.0) 70%,rgba(123,44,245,.65) 99%,transparent 100%);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent 82%,#000 84%);mask-image:radial-gradient(circle closest-side,transparent 82%,#000 84%)}

/* ---------------------------------------------------- tuner name effects -- */
/* Burnt titanium: heat-blued gradient letters with a shimmer running through. */
.name-fx-titanium{color:transparent;text-shadow:none;background:linear-gradient(100deg,#c79a3e 0%,#e8b25a 14%,#c46fa8 30%,#6a55d8 46%,#3f78e0 58%,#7fe0f0 66%,#3f78e0 74%,#9a62c8 86%,#d9a44a 100%);
  background-size:150% 100%;-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 1px 0 rgba(0,0,0,.3));animation:nfx-heat 8s ease-in-out infinite alternate}
@keyframes nfx-heat{from{background-position:0 0}to{background-position:100% 0}}
/* Livery: slanted race letters with teal, blue, purple and pink stripes behind. */
.name-fx-livery{font-style:italic;font-weight:900;color:#fff;transform:skewX(-6deg);text-shadow:.04em .04em 0 rgba(0,0,0,.55);padding:0 .2em 0 .05em}
.name-fx-livery:before{content:"";position:absolute;left:-4%;right:-10%;bottom:4%;height:30%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#1ee3c8 0 30%,transparent 30% 36%,#2f6bff 36% 56%,transparent 56% 62%,#7b3cff 62% 80%,transparent 80% 86%,#ff3d8f 86%);
  transform:skewX(-30deg) scaleX(0);transform-origin:0 50%;animation:nfx-livery .9s cubic-bezier(.2,.8,.2,1) .25s forwards}
@keyframes nfx-livery{to{transform:skewX(-30deg) scaleX(1)}}
/* Timing board: LED dot letters that flash purple for a best lap now and then. */
.name-fx-timing{font-weight:900;letter-spacing:.06em;color:transparent;
  background:radial-gradient(circle,#f6f8ff 0 56%,transparent 64%) 0 0/max(2.6px,.065em) max(2.6px,.065em);text-shadow:none;-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.35));animation:nfx-pb 6s steps(1) infinite}
@keyframes nfx-pb{0%,78%{filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}80%,84%,88%{filter:drop-shadow(0 0 2px #b48cff) drop-shadow(0 0 10px #7b2cf5) hue-rotate(0deg) brightness(.85) sepia(1) saturate(6) hue-rotate(215deg)}82%,86%,90%,100%{filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}}
/* Light pages: dark letters so they read. */
:root:is([data-theme="light"],[data-theme="ink"],[data-theme="kintsugi"],[data-theme="sakura"],[data-theme="manga"],[data-theme="timeattack"]) .name-fx-livery{color:#11151c;text-shadow:none}
:root:is([data-theme="light"],[data-theme="ink"],[data-theme="kintsugi"],[data-theme="sakura"],[data-theme="manga"],[data-theme="timeattack"]) .name-fx-timing{background-image:radial-gradient(circle,#11151c 0 60%,transparent 68%);filter:none;animation-name:nfx-pb-light}
@keyframes nfx-pb-light{0%,78%,82%,86%,90%,100%{filter:drop-shadow(0 1px 0 rgba(255,255,255,.7))}80%,84%,88%{filter:drop-shadow(0 0 1px #7b2cf5) sepia(1) saturate(8) hue-rotate(220deg)}}
:root[data-theme="timeattack"] .name-fx-neon{color:#0aa8c8;text-shadow:0 0 1px #0aa8c8,0 0 10px rgba(46,230,255,.7),0 0 24px rgba(255,62,165,.45);animation:none}

/* ---------------------------------------------------------- tuner skins -- */
.binder-skin-carbon{background:#0d0e11!important;border-color:rgba(30,227,200,.35)!important}
.binder-skin-carbon .binder-skin-art{background:
  linear-gradient(170deg,rgba(255,255,255,.12),transparent 30%,transparent 70%,rgba(0,0,0,.45)),
  url("../../img/supporter/boost/slashes-dense.dee74513efdb.svg") 0 0/150px 150px,
  linear-gradient(45deg,#1c1e23 25%,transparent 25% 75%,#1c1e23 75%) 0 0/10px 10px,
  linear-gradient(-45deg,#1c1e23 25%,transparent 25% 75%,#1c1e23 75%) 0 0/10px 10px,#0d0e11}
.binder-skin-carbon strong{color:#8ff5e6!important;font-style:italic}
.binder-skin-carbon .binder-cover-grid i{border-color:rgba(30,227,200,.3)!important}

.binder-skin-anodised{background:linear-gradient(90deg,#8f0d15,#ff2d3a 45%,#ff6b74 55%,#a5101a)!important;border-color:rgba(217,164,65,.6)!important}
.binder-skin-anodised .binder-skin-art{background:
  radial-gradient(circle at 10px 10px,#fff3cf 0 1.5px,#c4912f 2px 4px,#5c3d0c 4.5px,transparent 5px),
  radial-gradient(circle at calc(100% - 10px) 10px,#fff3cf 0 1.5px,#c4912f 2px 4px,#5c3d0c 4.5px,transparent 5px),
  radial-gradient(circle at 10px calc(100% - 10px),#fff3cf 0 1.5px,#c4912f 2px 4px,#5c3d0c 4.5px,transparent 5px),
  radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#fff3cf 0 1.5px,#c4912f 2px 4px,#5c3d0c 4.5px,transparent 5px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),
  linear-gradient(180deg,rgba(255,255,255,.18),transparent 40%,rgba(0,0,0,.3))}
.binder-skin-anodised strong{color:#fff!important;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.binder-skin-anodised .binder-cover-grid i{border-color:rgba(255,255,255,.3)!important}

.binder-skin-chequered{background:#ffffff!important;border-color:#11151c!important}
.binder-skin-chequered .binder-skin-art{background:
  repeating-linear-gradient(90deg,#e10600 0 8px,#ffffff 8px 16px) 0 0/100% 6px no-repeat,
  repeating-linear-gradient(90deg,#e10600 0 8px,#ffffff 8px 16px) 0 100%/100% 6px no-repeat,
  repeating-conic-gradient(#11151c 0 25%,#ffffff 0 50%) 0 0/16px 16px;opacity:.95}
.binder-skin-chequered strong{color:#fff!important;background:#11151c;padding:2px 6px;box-shadow:inset 3px 0 0 #7b2cf5}
.binder-skin-chequered .binder-cover-grid i{border-color:rgba(123,44,245,.6)!important;background:rgba(255,255,255,.6)}

/* Inside an open tuner-skinned binder. */
:root .binder-skin-in-carbon :is(.binder-page,.binder-ghost){background:#0d0e11!important;border-color:rgba(30,227,200,.3)!important}
:root .binder-skin-in-carbon :is(.binder-page,.binder-ghost):before{background:
  linear-gradient(170deg,rgba(255,255,255,.08),transparent 25%,transparent 75%,rgba(0,0,0,.4)),
  linear-gradient(100deg,transparent 0 77%,rgba(30,227,200,.85) 77% 79.5%,transparent 79.5% 80.5%,rgba(47,107,255,.85) 80.5% 82%,transparent 82% 83%,rgba(123,60,255,.85) 83% 84.2%,transparent 84.2% 85%,rgba(255,61,143,.85) 85% 86%,transparent 86%),
  linear-gradient(45deg,#1a1c21 25%,transparent 25% 75%,#1a1c21 75%) 0 0/14px 14px,
  linear-gradient(-45deg,#1a1c21 25%,transparent 25% 75%,#1a1c21 75%) 0 0/14px 14px;
  animation:bs-clear 9s ease-in-out infinite}
@keyframes bs-clear{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
:root:root .binder-skin-in-carbon .binder-pocket{border-color:rgba(30,227,200,.22)}
:root .binder-skin-in-carbon .binder-page-number{color:#8ff5e6}

:root .binder-skin-in-anodised :is(.binder-page,.binder-ghost){background:linear-gradient(180deg,#b3141d,#7a0b12)!important;border-color:rgba(217,164,65,.5)!important}
:root .binder-skin-in-anodised :is(.binder-page,.binder-ghost):before{background:
  radial-gradient(circle at 14px 14px,#fff3cf 0 2px,#c4912f 2.5px 5px,#5c3d0c 5.5px,transparent 6px),
  radial-gradient(circle at calc(100% - 14px) 14px,#fff3cf 0 2px,#c4912f 2.5px 5px,#5c3d0c 5.5px,transparent 6px),
  radial-gradient(circle at 14px calc(100% - 14px),#fff3cf 0 2px,#c4912f 2.5px 5px,#5c3d0c 5.5px,transparent 6px),
  radial-gradient(circle at calc(100% - 14px) calc(100% - 14px),#fff3cf 0 2px,#c4912f 2.5px 5px,#5c3d0c 5.5px,transparent 6px),
  linear-gradient(115deg,transparent 35%,rgba(255,255,255,.14) 48%,transparent 60%) 0 0/300% 100%,
  repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px);
  animation:bs-anodised 11s ease-in-out infinite}
@keyframes bs-anodised{0%,100%{background-position:0 0,0 0,0 0,0 0,110% 0,0 0}50%{background-position:0 0,0 0,0 0,0 0,-10% 0,0 0}}
:root:root .binder-skin-in-anodised .binder-pocket{border-color:rgba(255,255,255,.22)}
:root .binder-skin-in-anodised .binder-page-number{color:#f3d58a}

:root .binder-skin-in-chequered :is(.binder-page,.binder-ghost){background:#e9ecf1!important;border-color:#11151c!important}
:root .binder-skin-in-chequered :is(.binder-page,.binder-ghost):before{background:
  repeating-linear-gradient(90deg,#e10600 0 16px,#ffffff 16px 32px) 0 0/100% 8px no-repeat,
  repeating-linear-gradient(90deg,#e10600 0 16px,#ffffff 16px 32px) 0 100%/100% 8px no-repeat,
  repeating-conic-gradient(rgba(17,21,28,.16) 0 25%,transparent 0 50%) 0 0/28px 28px}
/* 3.30: the pockets now show on the light chequered page (the page's own
 * theme colours used to win, leaving faint white pockets on white). */
:root:root .binder-skin-in-chequered .binder-pocket{border:1px solid rgba(17,21,28,.45);background:rgba(255,255,255,.72);box-shadow:0 2px 6px rgba(17,21,28,.12)}
:root:root .binder-skin-in-chequered .binder-pocket.is-empty{border:1.5px dashed rgba(17,21,28,.42);background:rgba(255,255,255,.66);box-shadow:none}
:root:root .binder-skin-in-chequered .binder-pocket.is-unowned{border:1.5px dashed rgba(17,21,28,.42)}
:root .binder-skin-in-chequered .binder-page-number{color:#11151c;text-shadow:none}

/* Page-turn effects for the tuner skins (js/supporter/binder-fx.js). */
.bfx-streak{top:0;bottom:0;width:4px;margin-left:-2px;background:linear-gradient(180deg,transparent,#1ee3c8 15%,#2f6bff 40%,#7b3cff 62%,#ff3d8f 85%,transparent);box-shadow:0 0 10px #1ee3c8,0 0 24px rgba(123,60,255,.7)}
.bfx-ember{width:10px;height:2.5px;border-radius:2px;background:#8ff5e6;box-shadow:0 0 6px #7b3cff}
.bfx-check{border-radius:1px;background:repeating-conic-gradient(#11151c 0 25%,#ffffff 0 50%) 0 0/50% 50%;box-shadow:0 1px 3px rgba(17,21,28,.35)}
.bfx-check.is-purple{background:#7b2cf5}

@media (prefers-reduced-motion:reduce){
  .supporter-ring-coil:before,.supporter-ring-boost .sr-fx i,.supporter-ring-chequered .sr-fx{animation:none!important}
  .supporter-ring-boost .sr-fx i:nth-child(1){transform:rotate(-40deg)}
  .name-fx-livery:before{transform:skewX(-30deg)}
}

/* 3.23: the tuner themes' footer scenes (Full Boost, Shakotan, Time Attack,
   3.24 Midnight Run, 3.26 Tsuiso, 3.27 Kinpika, 3.28 Group A and 3.29 Taikyu).
   The scene sits INSIDE the footer, above its links, so the rest of the page
   can never cover or cut it off. Full width; the picture is cropped from the
   sides on narrow screens (the middle is where the important bits are). */
:root[data-supporter-theme="boost"],:root[data-supporter-theme="shakotan"],:root[data-supporter-theme="timeattack"],:root[data-supporter-theme="nightrun"],:root[data-supporter-theme="tsuiso"],:root[data-supporter-theme="kinpika"],:root[data-supporter-theme="groupa"],:root[data-supporter-theme="taikyu"]{--tf-h:clamp(270px,13.6vw,400px)}
html:root[data-supporter-theme="boost"] .site-footer,html:root[data-supporter-theme="shakotan"] .site-footer,html:root[data-supporter-theme="timeattack"] .site-footer,html:root[data-supporter-theme="nightrun"] .site-footer,html:root[data-supporter-theme="tsuiso"] .site-footer,html:root[data-supporter-theme="kinpika"] .site-footer,html:root[data-supporter-theme="groupa"] .site-footer,html:root[data-supporter-theme="taikyu"] .site-footer{
  position:relative;overflow:visible;margin-top:56px;border-top:0;padding-top:calc(var(--tf-h) + 34px);clip-path:inset(0 -100vmax -100vmax -100vmax)}
.tf-scene{position:absolute;top:0;left:50%;width:100vw;height:var(--tf-h);transform:translateX(-50%);pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 44px);mask-image:linear-gradient(transparent,#000 44px)}
.tf-art{display:block;width:100%;height:100%}
@media(max-width:600px){:root[data-supporter-theme="boost"],:root[data-supporter-theme="shakotan"],:root[data-supporter-theme="timeattack"],:root[data-supporter-theme="nightrun"],:root[data-supporter-theme="tsuiso"],:root[data-supporter-theme="kinpika"],:root[data-supporter-theme="groupa"],:root[data-supporter-theme="taikyu"]{--tf-h:170px}}
@media print{.tf-scene{display:none}}

/* =====================================================================
 * 3.24: Midnight Run extras. Shop stripes in orange, green and red; never a
 * real shop's name, logo or number.
 * ===================================================================== */
.sx-theme-art-nightrun{background-image:url("../../img/supporter/nightrun/saitodex-hero-mobile.e3d4ce8d4b05.webp")}
.sx-sw-nightrun i:nth-child(1){background:#070c16}
.sx-sw-nightrun i:nth-child(2){background:#f4f8fb}
.sx-sw-nightrun i:nth-child(3){background:#ff7a1a}
.sx-sw-nightrun i:nth-child(4){background:#00a35a}
.sx-sw-nightrun i:nth-child(5){background:#e8202a}

/* Ring: the three stripes wound round the picture like a lit sign, a
   fluorescent glint running round, a flicker now and then, and an onigiri
   doing laps. */
/* A touch wider than the other rings (fixed, never animated) so all three
   stripes show. */
.supporter-ring-nightrun{padding:7px}
.supporter-ring-nightrun:before{animation:sr-kb-flicker 8s steps(1) infinite;background:
  radial-gradient(circle closest-side,transparent calc(100% - 7.5px),#e8202a calc(100% - 7.5px) calc(100% - 5.4px),#00a35a calc(100% - 5.4px) calc(100% - 3.4px),#ff7a1a calc(100% - 3.4px) calc(100% - 1.2px),#f4f8fb calc(100% - 1.2px))}
.supporter-ring-nightrun:after{animation:sr-spin 6s linear infinite;background:conic-gradient(from 0deg,#ff7a1a,#00a35a,#e8202a,#ff7a1a);opacity:.5}
@keyframes sr-kb-flicker{0%,80%,83%,85%,100%{opacity:1}81%{opacity:.35}84%{opacity:.6}}
.supporter-ring-nightrun .public-profile-avatar,.supporter-ring-nightrun .account-ring-avatar,.supporter-ring-nightrun .dashboard-avatar-link{box-shadow:0 0 0 1.5px #f4f8fb}
.supporter-ring-nightrun .sr-fx{animation:sr-spin 3.4s linear infinite}
.supporter-ring-nightrun .sr-fx i:nth-child(1){display:block;position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 80%,rgba(255,255,255,.95) 90%,transparent 96%);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent calc(100% - 7.5px),#000 calc(100% - 7.5px));mask-image:radial-gradient(circle closest-side,transparent calc(100% - 7.5px),#000 calc(100% - 7.5px))}
.supporter-ring-nightrun .sr-fx i:nth-child(2){display:block;position:absolute;left:50%;top:50%;width:max(13px,13cqmin);height:max(12px,11.5cqmin);translate:-50% -50%;
  transform:rotate(180deg) translateY(calc(-50cqmin + 3px));
  background:linear-gradient(0deg,#1b2a1f 0 34%,transparent 34%),#fbfbf7;clip-path:polygon(50% 0,62% 6%,100% 80%,98% 94%,88% 100%,12% 100%,2% 94%,0 80%,38% 6%);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}

/* Name effect "Shop sign": the name lit like a fascia, flickering on, on
   top of the three stripes. */
.name-fx-nightrun{color:#fbfdff;text-shadow:0 0 1px #fff,0 0 8px rgba(214,236,255,.75),0 0 20px rgba(255,122,26,.35);padding:0 .12em .16em;animation:nfx-kb-on 1.3s steps(1) both}
.name-fx-nightrun:before{content:"";position:absolute;left:-2%;right:-2%;bottom:0;height:.16em;min-height:6px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#ff7a1a 0 36%,transparent 36% 44%,#00a35a 44% 70%,transparent 70% 78%,#e8202a 78%);
  box-shadow:0 0 10px rgba(255,122,26,.45);transform:scaleX(0);transform-origin:50% 50%;animation:nfx-kb-stripes .8s cubic-bezier(.2,.8,.2,1) .2s forwards}
@keyframes nfx-kb-on{0%{opacity:.15}10%{opacity:.9}16%{opacity:.25}28%{opacity:1}34%{opacity:.5}44%,100%{opacity:1}}
@keyframes nfx-kb-stripes{to{transform:scaleX(1)}}
:root:is([data-theme="light"],[data-theme="ink"],[data-theme="kintsugi"],[data-theme="sakura"],[data-theme="manga"],[data-theme="timeattack"]) .name-fx-nightrun{color:#0b1a2a;text-shadow:0 1px 0 rgba(255,255,255,.7)}

/* Binder skin: a lit white shop front with the three stripes. */
.binder-skin-nightrun{background:linear-gradient(180deg,#ffffff,#e6eef5)!important;border-color:#c9d5e0!important;box-shadow:0 0 18px rgba(214,236,255,.25)}
.binder-skin-nightrun .binder-skin-art{background:
  linear-gradient(180deg,transparent 0 58%,#ff7a1a 58% 63%,transparent 63% 64.5%,#00a35a 64.5% 68.5%,transparent 68.5% 70%,#e8202a 70% 73.5%,transparent 73.5%),
  linear-gradient(170deg,rgba(255,255,255,.7),transparent 35%)}
.binder-skin-nightrun strong{color:#0b1a2a!important}
.binder-skin-nightrun .binder-cover-grid i{border-color:rgba(11,26,42,.25)!important;background:rgba(255,255,255,.55)}

:root .binder-skin-in-nightrun :is(.binder-page,.binder-ghost){background:linear-gradient(180deg,#f7fafd,#e4ecf3)!important;border-color:#c9d5e0!important}
:root .binder-skin-in-nightrun :is(.binder-page,.binder-ghost):before{background:
  linear-gradient(180deg,#ff7a1a 0 8px,transparent 8px 10px,#00a35a 10px 16px,transparent 16px 18px,#e8202a 18px 23px,transparent 23px) 0 0/100% 23px no-repeat,
  linear-gradient(0deg,#e8202a 0 5px,transparent 5px 7px,#00a35a 7px 13px,transparent 13px 15px,#ff7a1a 15px 23px,transparent 23px) 0 100%/100% 23px no-repeat,
  linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 60%) 0 0/300% 100%,
  linear-gradient(rgba(11,26,42,.06) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(11,26,42,.06) 1px,transparent 1px) 0 0/44px 44px;
  animation:bs-nightrun 12s ease-in-out infinite}
@keyframes bs-nightrun{0%,100%{background-position:0 0,0 100%,110% 0,0 0,0 0}50%{background-position:0 0,0 100%,-10% 0,0 0,0 0}}
:root:root .binder-skin-in-nightrun .binder-pocket{border-color:rgba(11,26,42,.25);background:rgba(255,255,255,.6)}
:root:root .binder-skin-in-nightrun .binder-pocket.is-empty{border:1px dashed rgba(11,26,42,.28);background:rgba(255,255,255,.55)}
:root .binder-skin-in-nightrun .binder-page-number{color:#0b1a2a;text-shadow:none}

/* Page-turn effect: price stickers peel off the page and flutter away. */
.bfx-sticker{border-radius:3px;background:#ff7a1a;box-shadow:0 1px 3px rgba(11,26,42,.35)}
.bfx-sticker.is-green{background:#00a35a}
.bfx-sticker.is-red{background:#e8202a}
.bfx-sticker.is-white{background:linear-gradient(0deg,#e8202a 0 2px,#00a35a 2px 4px,#ff7a1a 4px 6px,#fbfbf7 6px)}

@media (prefers-reduced-motion:reduce){
  .supporter-ring-nightrun:before,.supporter-ring-nightrun .sr-fx{animation:none!important}
  .name-fx-nightrun{animation:none}
  .name-fx-nightrun:before{animation:none;transform:none}
}

/* =====================================================================
 * 3.26: Tsuiso extras. Livery blue and teal with tapered speed stripes;
 * never a real team's or tyre maker's name, logo or font.
 * ===================================================================== */
.sx-theme-art-tsuiso{background-image:url("../../img/supporter/tsuiso/saitodex-hero-mobile.acd18018feff.webp")}
.sx-sw-tsuiso i:nth-child(1){background:#050b24}
.sx-sw-tsuiso i:nth-child(2){background:#1f4fd8}
.sx-sw-tsuiso i:nth-child(3){background:#2fe0b4}
.sx-sw-tsuiso i:nth-child(4){background:#8af3d6}
.sx-sw-tsuiso i:nth-child(5){background:#f4f8ff}

/* Ring "Tandem": livery bands of blue, teal and white, with a lead and a
   chase drifting round side by side, the gap opening and closing, each
   trailing a wisp of smoke. */
.supporter-ring-tsuiso{padding:6px}
.supporter-ring-tsuiso:before{animation:none;background:
  radial-gradient(circle closest-side,transparent calc(100% - 6.5px),#1f4fd8 calc(100% - 6.5px) calc(100% - 4.2px),#2fe0b4 calc(100% - 4.2px) calc(100% - 2.2px),#f4f8ff calc(100% - 2.2px))}
.supporter-ring-tsuiso:after{animation:sr-spin 5s linear infinite;background:conic-gradient(from 0deg,#1f4fd8,#2fe0b4,#1f4fd8,#8af3d6,#1f4fd8);opacity:.5}
.supporter-ring-tsuiso .public-profile-avatar,.supporter-ring-tsuiso .account-ring-avatar,.supporter-ring-tsuiso .dashboard-avatar-link{box-shadow:0 0 0 1.5px #050b24}
.supporter-ring-tsuiso .sr-fx i:nth-child(-n+2){display:block;position:absolute;inset:0;border-radius:50%}
/* the smoke behind each one is a soft arc, masked to the ring */
.supporter-ring-tsuiso .sr-fx i:nth-child(-n+2):before{content:"";position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 72%,rgba(220,238,250,.0) 72%,rgba(220,238,250,.75) 99%,transparent 99.5%);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent calc(100% - 10px),#000 calc(100% - 8px));mask-image:radial-gradient(circle closest-side,transparent calc(100% - 10px),#000 calc(100% - 8px));filter:blur(1.5px)}
/* and the car itself is just a bright dot at the front of the smoke */
.supporter-ring-tsuiso .sr-fx i:nth-child(-n+2):after{content:"";position:absolute;left:50%;top:0;width:max(7px,6cqmin);height:max(7px,6cqmin);border-radius:50%;translate:-50% 1px;
  background:radial-gradient(circle,#fff 0 35%,#8af3d6 55%,rgba(47,224,180,0) 72%)}
.supporter-ring-tsuiso .sr-fx i:nth-child(1){animation:sr-ts-lead 3.2s linear infinite}
.supporter-ring-tsuiso .sr-fx i:nth-child(2){animation:sr-ts-chase 3.2s linear infinite}
.supporter-ring-tsuiso .sr-fx i:nth-child(2):after{background:radial-gradient(circle,#fff 0 35%,#7aa0ff 55%,rgba(31,79,216,0) 72%)}
@keyframes sr-ts-lead{to{transform:rotate(360deg)}}
@keyframes sr-ts-chase{0%{transform:rotate(-34deg)}25%{transform:rotate(66deg)}50%{transform:rotate(152deg)}75%{transform:rotate(246deg)}100%{transform:rotate(326deg)}}

/* Name effect "Drift line": slanted livery letters that slide in sideways,
   the tapered speed stripes streaking out underneath and a puff of smoke. */
.name-fx-tsuiso{color:#fff;font-style:italic;text-shadow:0 2px 0 #1f4fd8,0 0 14px rgba(47,224,180,.35);padding:0 .1em 0 .2em;transform:skewX(-8deg);
  animation:nfx-ts-in .9s cubic-bezier(.2,.9,.2,1) both}
.name-fx-tsuiso:before{content:"";position:absolute;right:.1em;top:90%;width:85%;height:.2em;min-height:7px;pointer-events:none;
  background:linear-gradient(#2fe0b4,#2fe0b4) 100% 0/100% 24% no-repeat,linear-gradient(#2fe0b4,#2fe0b4) 100% 50%/70% 24% no-repeat,linear-gradient(#2fe0b4,#2fe0b4) 100% 100%/45% 24% no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%);animation:nfx-ts-stripes .9s .15s cubic-bezier(.2,.9,.2,1) both}
.name-fx-tsuiso:after{content:"";position:absolute;left:-.6em;bottom:-10%;width:1.3em;height:.9em;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse,rgba(220,238,250,.55),rgba(220,238,250,0) 70%);filter:blur(2px);animation:nfx-ts-puff 1.6s .35s ease-out both}
@keyframes nfx-ts-in{from{transform:skewX(-8deg) translateX(.8em);opacity:0;filter:blur(3px)}to{transform:skewX(-8deg);opacity:1;filter:none}}
@keyframes nfx-ts-stripes{from{opacity:0;transform:translateX(.5em)}to{opacity:1;transform:none}}
@keyframes nfx-ts-puff{0%{opacity:0;transform:scale(.4)}35%{opacity:1}100%{opacity:0;transform:translate(-.5em,-.2em) scale(1.6)}}
:root:is([data-theme="light"],[data-theme="ink"],[data-theme="kintsugi"],[data-theme="sakura"],[data-theme="manga"],[data-theme="timeattack"]) .name-fx-tsuiso{color:#0a1d66;text-shadow:0 2px 0 rgba(47,224,180,.55)}
:root:is([data-theme="light"],[data-theme="ink"],[data-theme="kintsugi"],[data-theme="sakura"],[data-theme="manga"],[data-theme="timeattack"]) .name-fx-tsuiso:after{background:radial-gradient(ellipse,rgba(10,29,102,.18),rgba(10,29,102,0) 70%)}

/* Binder skin "Drift day": livery blue, a teal sweep and the stripes. */
.binder-skin-tsuiso{background:linear-gradient(160deg,#2a5ff0,#1f4fd8 45%,#0a1d66)!important;border-color:#2fe0b4!important;box-shadow:0 0 18px rgba(47,224,180,.22)}
.binder-skin-tsuiso .binder-skin-art{background:
  linear-gradient(155deg,transparent 0 56%,#2fe0b4 56% 64%,transparent 64% 67%,rgba(138,243,214,.75) 67% 69%,transparent 69%),
  linear-gradient(90deg,transparent 40%,#2fe0b4) 92% 18%/42% 7% no-repeat,linear-gradient(90deg,transparent 40%,#2fe0b4) 92% 27%/30% 7% no-repeat,linear-gradient(90deg,transparent 40%,#2fe0b4) 92% 36%/20% 7% no-repeat}
.binder-skin-tsuiso strong{color:#fff!important}
.binder-skin-tsuiso .binder-cover-grid i{border-color:rgba(255,255,255,.3)!important;background:rgba(5,11,36,.35)}

:root .binder-skin-in-tsuiso :is(.binder-page,.binder-ghost){background:linear-gradient(170deg,#173fb8,#0d2680 55%,#081a5c)!important;border-color:#2fe0b4!important}
:root .binder-skin-in-tsuiso :is(.binder-page,.binder-ghost):before{background:
  linear-gradient(160deg,transparent 0 78%,rgba(47,224,180,.75) 78% 83%,transparent 83% 85%,rgba(138,243,214,.5) 85% 86%,transparent 86%),
  linear-gradient(90deg,transparent,rgba(47,224,180,.6)) 100% 14px/38% 6px no-repeat,linear-gradient(90deg,transparent,rgba(47,224,180,.6)) 100% 25px/27% 6px no-repeat,linear-gradient(90deg,transparent,rgba(47,224,180,.6)) 100% 36px/18% 6px no-repeat,
  radial-gradient(ellipse 60% 22% at -10% 100%,rgba(220,238,250,.16),transparent 70%) 0 0/200% 100%;
  animation:bs-tsuiso 16s ease-in-out infinite}
@keyframes bs-tsuiso{0%,100%{background-position:0 0,100% 14px,100% 25px,100% 36px,0 0}50%{background-position:0 0,100% 14px,100% 25px,100% 36px,-60% 0}}
:root:root .binder-skin-in-tsuiso .binder-pocket{border-color:rgba(138,243,214,.3);background:rgba(5,11,36,.35)}
:root:root .binder-skin-in-tsuiso .binder-pocket.is-empty{border:1px dashed rgba(138,243,214,.35);background:rgba(5,11,36,.3)}
:root .binder-skin-in-tsuiso .binder-page-number{color:#8af3d6;text-shadow:none}

/* Page-turn effect: tyre smoke billows off the page edge, with a teal
   speed stripe riding it. */
.bfx-smoke{border-radius:50%;background:radial-gradient(circle at 45% 45%,rgba(240,249,255,.85),rgba(214,236,250,.45) 40%,rgba(200,226,246,0) 70%);filter:blur(3px)}
.bfx-stripe{top:0;bottom:0;width:5px;margin-left:-2.5px;background:linear-gradient(180deg,transparent,#2fe0b4 15%,#8af3d6 50%,#2fe0b4 85%,transparent);box-shadow:0 0 10px #2fe0b4,0 0 22px rgba(31,79,216,.7)}

@media (prefers-reduced-motion:reduce){
  .supporter-ring-tsuiso .sr-fx i{animation:none!important}
  .name-fx-tsuiso,.name-fx-tsuiso:before,.name-fx-tsuiso:after{animation:none}
  .name-fx-tsuiso:after{opacity:0}
}

/* =====================================================================
 * 3.27: Kinpika extras. Polished champagne gold, metal flake and black
 * flame decals; never a real shop's or team's name, logo or font.
 * ===================================================================== */
.sx-theme-art-kinpika{background-image:url("../../img/supporter/kinpika/saitodex-hero-mobile.80d6f832f697.webp")}
.sx-sw-kinpika i:nth-child(1){background:#0c0a07}
.sx-sw-kinpika i:nth-child(2){background:#8a6a32}
.sx-sw-kinpika i:nth-child(3){background:#e2b866}
.sx-sw-kinpika i:nth-child(4){background:#f6dc9a}
.sx-sw-kinpika i:nth-child(5){background:#fbf5e6}

/* Ring "Gold flake": a polished gold band with metal flake twinkling in
   it, a glint of light running round, and little black flame tips licking
   at the edge. */
.supporter-ring-kinpika:before{animation:none;background:
  radial-gradient(circle,rgba(255,250,225,.95) 0 .6px,transparent 1px) 0 0/7px 6px,
  conic-gradient(from 20deg,#8a6a32,#f6dc9a,#fff2c4,#e2b866,#8a6a32,#c9973f,#fff2c4,#e2b866,#8a6a32);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent calc(100% - 5px),#000 calc(100% - 5px));mask-image:radial-gradient(circle closest-side,transparent calc(100% - 5px),#000 calc(100% - 5px))}
.supporter-ring-kinpika:after{animation:sr-spin 8s linear infinite;background:conic-gradient(from 0deg,#e2b866,#8a6a32,#f6dc9a,#8a6a32,#e2b866);opacity:.5}
.supporter-ring-kinpika .public-profile-avatar,.supporter-ring-kinpika .account-ring-avatar,.supporter-ring-kinpika .dashboard-avatar-link{box-shadow:0 0 0 1.5px #0c0a07}
.supporter-ring-kinpika .sr-fx i:nth-child(-n+5){display:block;position:absolute}
.supporter-ring-kinpika .sr-fx i:nth-child(1){inset:0;border-radius:50%;animation:sr-spin 3s linear infinite;
  background:conic-gradient(from 0deg,transparent 0 84%,rgba(255,255,255,.95) 92%,transparent 97%);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent calc(100% - 5px),#000 calc(100% - 5px));mask-image:radial-gradient(circle closest-side,transparent calc(100% - 5px),#000 calc(100% - 5px))}
/* the flame tips: small black licks with a gold edge, set round the outside */
.supporter-ring-kinpika .sr-fx i:nth-child(n+2):nth-child(-n+5){left:50%;top:50%;width:max(10px,9cqmin);height:max(14px,13cqmin);translate:-50% -50%;
  transform:rotate(var(--a)) translateY(calc(-50cqmin - 1px));transform-origin:50% 50%;
  background:linear-gradient(180deg,#f6dc9a,#c9973f);clip-path:path("M5 0 C8 4 10 7 9 10 C9 12 7 14 5 14 C3 14 1 12 1 10 C1 8 3 7 3 4 C4 6 5 6 5 4 Z");
  animation:sr-kp-lick 1.4s ease-in-out infinite;animation-delay:var(--d)}
.supporter-ring-kinpika .sr-fx i:nth-child(2){--a:40deg;--d:0s}
.supporter-ring-kinpika .sr-fx i:nth-child(3){--a:130deg;--d:-.35s}
.supporter-ring-kinpika .sr-fx i:nth-child(4){--a:220deg;--d:-.7s}
.supporter-ring-kinpika .sr-fx i:nth-child(5){--a:310deg;--d:-1.05s}
@keyframes sr-kp-lick{0%,100%{scale:1 1}50%{scale:.85 1.18}}

/* Name effect "Gold paint": polished champagne gold letters with a sparkle
   of metal flake and a glint of light running across. */
.name-fx-kinpika{color:transparent;
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%) -80% 0/50% 100% no-repeat,
    radial-gradient(circle,rgba(255,250,225,.9) 0 .5px,transparent .9px) 0 0/5px 6px,
    linear-gradient(180deg,#fff2c4 0%,#f6dc9a 22%,#e2b866 45%,#a8782e 64%,#e2b866 84%,#f6dc9a 100%);
  -webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 0 #3a2a10) drop-shadow(0 0 10px rgba(226,184,102,.25));
  animation:nfx-kp-glint 5s 1s ease-in-out infinite}
@keyframes nfx-kp-glint{0%,72%{background-position:-80% 0,0 0,0 0}92%,100%{background-position:180% 0,0 0,0 0}}
:root:is([data-theme="light"],[data-theme="ink"],[data-theme="kintsugi"],[data-theme="sakura"],[data-theme="manga"],[data-theme="timeattack"]) .name-fx-kinpika{
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.9) 50%,transparent 58%) -80% 0/50% 100% no-repeat,
    linear-gradient(180deg,#c9973f 0%,#8a6a32 50%,#5a3e10 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 1px 0 rgba(255,255,255,.7))}

/* Binder skin "Gold paint": black paint with metal flake and gold flame decals. */
.binder-skin-kinpika{background:radial-gradient(circle,rgba(246,220,154,.35) 0 .6px,transparent 1px) 0 0/9px 8px,linear-gradient(160deg,#1a150c,#0a0805)!important;border-color:#c9973f!important;box-shadow:0 0 18px rgba(226,184,102,.2)}
.binder-skin-kinpika .binder-skin-art{background:url("../../img/supporter/skins/kinpika-flames.c03e2d277409.svg") 0 100%/90% auto no-repeat}
.binder-skin-kinpika strong{color:#f6dc9a!important}
.binder-skin-kinpika .binder-cover-grid i{border-color:rgba(226,184,102,.35)!important;background:rgba(0,0,0,.35)}

:root .binder-skin-in-kinpika :is(.binder-page,.binder-ghost){background:linear-gradient(170deg,#17120a,#0b0906 60%,#080604)!important;border-color:#8a6a32!important}
:root .binder-skin-in-kinpika :is(.binder-page,.binder-ghost):before{background:
  url("../../img/supporter/skins/kinpika-flames.c03e2d277409.svg") 0 100%/min(70%,340px) auto no-repeat,
  linear-gradient(115deg,transparent 38%,rgba(246,220,154,.08) 48%,transparent 58%) 0 0/300% 100%,
  radial-gradient(circle,rgba(246,220,154,.22) 0 .6px,transparent 1px) 0 0/11px 9px;opacity:.9;
  animation:bs-kinpika 14s ease-in-out infinite}
@keyframes bs-kinpika{0%,100%{background-position:0 100%,110% 0,0 0}50%{background-position:0 100%,-10% 0,0 0}}
:root:root .binder-skin-in-kinpika .binder-pocket{border-color:rgba(226,184,102,.3);background:rgba(0,0,0,.3)}
:root:root .binder-skin-in-kinpika .binder-pocket.is-empty{border:1px dashed rgba(226,184,102,.35);background:rgba(0,0,0,.25)}
:root .binder-skin-in-kinpika .binder-page-number{color:#e2b866;text-shadow:none}

/* Page-turn effect: a polished gold edge rides the page and throws off
   bright sparks. */
.bfx-goldedge{top:0;bottom:0;width:4px;margin-left:-2px;background:linear-gradient(180deg,transparent,#c9973f 12%,#fff2c4 50%,#c9973f 88%,transparent);box-shadow:0 0 10px rgba(246,220,154,.9),0 0 26px rgba(226,184,102,.6)}
.bfx-gspark{width:12px;height:2px;border-radius:2px;background:#fff2c4;box-shadow:0 0 6px #f6dc9a,0 0 12px rgba(226,184,102,.8)}

@media (prefers-reduced-motion:reduce){
  .supporter-ring-kinpika .sr-fx i{animation:none!important}
  .name-fx-kinpika{animation:none}
}

/* =====================================================================
 * 3.28: Group A extras. Touring-car livery blue, a yellow windscreen strip,
 * white race lettering and a number board; never a real team's or
 * sponsor's name or logo. The race lettering is Archivo Expanded Black
 * Italic (SIL Open Font License, fonts/OFL-Archivo.txt).
 * ===================================================================== */
@font-face{font-family:"SaitoDex Race";src:url("../../fonts/archivo-expanded-black-italic-saitodex.decac65326d0.woff2") format("woff2");font-weight:900;font-style:italic;font-display:swap}
.sx-theme-art-groupa{background-image:url("../../img/supporter/groupa/saitodex-hero-mobile.fe15b5955f29.webp")}
.sx-sw-groupa i:nth-child(1){background:#0c1a5c}
.sx-sw-groupa i:nth-child(2){background:#16379e}
.sx-sw-groupa i:nth-child(3){background:#2f5fe0}
.sx-sw-groupa i:nth-child(4){background:#ffd21a}
.sx-sw-groupa i:nth-child(5){background:#ffffff}

/* Ring "Livery": a livery-blue band with the yellow windscreen strip across
   the top and a white pinstripe inside. Kept still: just the colours. */
.supporter-ring-groupa{padding:6px}
.supporter-ring-groupa:before{animation:none;background:
  radial-gradient(circle closest-side,transparent calc(100% - 9px),#fff calc(100% - 9px),#fff calc(100% - 7px),transparent calc(100% - 7px)),
  conic-gradient(from -50deg,#ffd21a 0 100deg,#1f4fd8 100deg 360deg);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent calc(100% - 9px),#000 calc(100% - 9px));mask-image:radial-gradient(circle closest-side,transparent calc(100% - 9px),#000 calc(100% - 9px))}
.supporter-ring-groupa:after{animation:none;background:conic-gradient(from -50deg,#ffd21a 0 100deg,#1f4fd8 100deg 360deg);opacity:.45}
.supporter-ring-groupa .public-profile-avatar,.supporter-ring-groupa .account-ring-avatar,.supporter-ring-groupa .dashboard-avatar-link{box-shadow:0 0 0 1.5px #0c1a5c}

/* Name effect "Race lettering": bold slanted white race lettering edged in
   livery blue, with the yellow strip sweeping in underneath. */
.name-fx-groupa{color:#fff;font-family:"SaitoDex Race","Arial Black",sans-serif;font-style:italic;font-weight:900;letter-spacing:-.01em;padding:0 .08em;
  text-shadow:.05em .05em 0 #16379e,.08em .08em 0 #0c1a5c;
  background:linear-gradient(#ffd21a,#ffd21a) 0 94%/100% .14em no-repeat;animation:nfx-ga-in 1s .2s cubic-bezier(.2,.8,.2,1) both}
@keyframes nfx-ga-in{from{background-size:0 .14em}to{background-size:100% .14em}}
:root:is([data-theme="light"],[data-theme="ink"],[data-theme="kintsugi"],[data-theme="sakura"],[data-theme="manga"],[data-theme="timeattack"]) .name-fx-groupa{
  color:#1f4fd8;text-shadow:.05em .05em 0 #0c1a5c}

/* Binder skin "Livery": livery blue with the yellow windscreen strip and a
   white sweep with a pinstripe. */
.binder-skin-groupa{background:
  linear-gradient(#ffd21a,#ffd21a) 0 0/100% 14% no-repeat,
  linear-gradient(160deg,transparent 58%,#fff 58% 66%,transparent 66% 68%,#fff 68% 69%,transparent 69%),
  linear-gradient(160deg,#2554e0,#16379e)!important;border-color:#fff!important;box-shadow:0 0 0 2px #0c1a5c,0 10px 24px rgba(6,14,60,.35)}
.binder-skin-groupa strong{color:#fff!important;font-family:"SaitoDex Race","Arial Black",sans-serif;font-style:italic;text-shadow:2px 2px 0 #0c1a5c}
.binder-skin-groupa .binder-cover-grid i{border-color:rgba(255,255,255,.4)!important;background:rgba(12,26,92,.35)}

:root .binder-skin-in-groupa :is(.binder-page,.binder-ghost){background:linear-gradient(170deg,#2251d8,#1a3fb4 60%,#15359a)!important;border-color:#fff!important}
:root .binder-skin-in-groupa :is(.binder-page,.binder-ghost):before{background:
  linear-gradient(#ffd21a,#ffd21a) 0 0/100% 10px no-repeat,
  linear-gradient(170deg,transparent 80%,rgba(255,255,255,.22) 80% 84%,transparent 84% 85.5%,rgba(255,255,255,.22) 85.5% 86%,transparent 86%),
  linear-gradient(160deg,transparent 30%,rgba(255,255,255,.07) 45%,transparent 60%) 0 0/250% 250%;opacity:1;
  animation:bs-groupa 18s ease-in-out infinite}
@keyframes bs-groupa{0%,100%{background-position:0 0,0 0,100% 0}50%{background-position:0 0,0 0,0 100%}}
:root:root .binder-skin-in-groupa .binder-pocket{border-color:rgba(255,255,255,.35);background:rgba(12,26,92,.3)}
:root:root .binder-skin-in-groupa .binder-pocket.is-empty{border:1px dashed rgba(255,255,255,.4);background:rgba(12,26,92,.25)}
:root .binder-skin-in-groupa .binder-page-number{color:#ffd21a;text-shadow:none}

/* Page-turn effect: blue, yellow and white confetti off the page edge. */
.bfx-confetti{width:8px;height:12px;border-radius:1px;background:#1f4fd8;box-shadow:0 0 0 1px rgba(255,255,255,.4)}
.bfx-confetti.is-yellow{background:#ffd21a}
.bfx-confetti.is-white{background:#fff}

@media (prefers-reduced-motion:reduce){
  .name-fx-groupa{animation:none}
}

/* =====================================================================
 * 3.29: Taikyu extras. An endurance racer's livery: deep green and bright
 * orange split by a white chequer band; never a real team's or sponsor's
 * name or logo.
 * ===================================================================== */
.sx-theme-art-taikyu{background-image:url("../../img/supporter/taikyu/saitodex-hero-mobile.293289af6a80.webp")}
.sx-sw-taikyu i:nth-child(1){background:#06301e}
.sx-sw-taikyu i:nth-child(2){background:#0a5534}
.sx-sw-taikyu i:nth-child(3){background:#13a85e}
.sx-sw-taikyu i:nth-child(4){background:#ff7a1a}
.sx-sw-taikyu i:nth-child(5){background:#ffffff}

/* Ring "Split": half livery green, half orange, split by white chequer
   bands. Kept still. */
.supporter-ring-taikyu{padding:6px}
.supporter-ring-taikyu:before{animation:none;background:conic-gradient(from 40deg,
  #ff7a1a 0 170deg,#fff 170deg 172deg,#14201a 172deg 175deg,#fff 175deg 178deg,#14201a 178deg 181deg,#fff 181deg 184deg,#14201a 184deg 187deg,#fff 187deg 190deg,
  #13a85e 190deg 350deg,#fff 350deg 352deg,#14201a 352deg 355deg,#fff 355deg 358deg,#14201a 358deg 1deg,#fff 1deg 4deg,#14201a 4deg 7deg,#fff 7deg 10deg,#ff7a1a 10deg);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent calc(100% - 9px),#000 calc(100% - 9px));mask-image:radial-gradient(circle closest-side,transparent calc(100% - 9px),#000 calc(100% - 9px))}
.supporter-ring-taikyu:after{animation:none;background:conic-gradient(from 40deg,#ff7a1a 0 180deg,#13a85e 180deg 360deg);opacity:.4}
.supporter-ring-taikyu .public-profile-avatar,.supporter-ring-taikyu .account-ring-avatar,.supporter-ring-taikyu .dashboard-avatar-link{box-shadow:0 0 0 1.5px #06301e}

/* Name effect "Chequer line": bright orange letters edged in livery green,
   with a white chequer band rolling in underneath. */
.name-fx-taikyu{color:#ff7a1a;font-style:italic;font-weight:900;padding:0 .08em .12em;
  text-shadow:.05em .05em 0 #0a5534,.08em .08em 0 #06301e;
  background:repeating-conic-gradient(#14201a 0 25%,#fff 0 50%) 0 100%/.24em .24em repeat-x;
  animation:nfx-tk-in .9s .2s cubic-bezier(.2,.8,.2,1) both}
@keyframes nfx-tk-in{from{background-position:0 calc(100% + .3em)}to{background-position:.96em 100%}}
:root:is([data-theme="light"],[data-theme="ink"],[data-theme="kintsugi"],[data-theme="sakura"],[data-theme="manga"],[data-theme="timeattack"]) .name-fx-taikyu{
  color:#e85f00;text-shadow:.05em .05em 0 #0a5534}

/* Binder skin "Split livery": green with an orange nose sweeping up from
   the corner, cut off by a white chequer band. */
.binder-skin-taikyu{background:
  linear-gradient(35deg,#ff7a1a 0 30%,#fff 30% 31%,#14201a 31% 32%,#fff 32% 33%,transparent 33%),
  linear-gradient(160deg,#13864d,#0a5534)!important;border-color:#fff!important;box-shadow:0 0 0 2px #06301e,0 10px 24px rgba(3,24,14,.4)}
.binder-skin-taikyu strong{color:#fff!important;font-style:italic;text-shadow:2px 2px 0 #06301e}
.binder-skin-taikyu .binder-cover-grid i{border-color:rgba(255,255,255,.4)!important;background:rgba(6,48,30,.35)}

:root .binder-skin-in-taikyu :is(.binder-page,.binder-ghost){background:linear-gradient(170deg,#107a47,#0b5e37 60%,#09502f)!important;border-color:#fff!important}
:root .binder-skin-in-taikyu :is(.binder-page,.binder-ghost):before{background:
  linear-gradient(35deg,rgba(255,122,26,.9) 0 12%,#fff 12% 12.6%,#14201a 12.6% 13.2%,#fff 13.2% 13.8%,transparent 13.8%),
  repeating-conic-gradient(#14201a 0 25%,#fff 0 50%) 0 0/8px 8px repeat-x;background-size:auto,8px 8px;background-repeat:no-repeat,repeat-x;opacity:1}
:root:root .binder-skin-in-taikyu .binder-pocket{border-color:rgba(255,255,255,.35);background:rgba(6,48,30,.3)}
:root:root .binder-skin-in-taikyu .binder-pocket.is-empty{border:1px dashed rgba(255,255,255,.4);background:rgba(6,48,30,.25)}
:root .binder-skin-in-taikyu .binder-page-number{color:#ff7a1a;text-shadow:none}

/* Page-turn effect: a white chequer band rides the page, and streaks of
   headlight and tail light shoot off its edge. */
.bfx-tkband{top:0;bottom:0;width:10px;margin-left:-5px;background:repeating-conic-gradient(#14201a 0 25%,#fff 0 50%) 0 0/10px 10px;box-shadow:0 0 0 2px #fff,0 0 14px rgba(255,122,26,.7)}
.bfx-light{width:90px;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,248,224,.8) 80%,#fff);box-shadow:0 0 8px rgba(255,248,224,.9)}
.bfx-light.is-tail{background:linear-gradient(90deg,#ff3030,rgba(255,48,48,.6) 20%,transparent);box-shadow:0 0 8px rgba(255,48,48,.8)}

@media (prefers-reduced-motion:reduce){
  .name-fx-taikyu{animation:none}
}