/* Showcases page (js/showcases.js, 2026-10-12; round 2 "make it prettier": compact cards with an inner screen, ambient
   light, gradient ring on hover). Prefix scx-. Animated scenes use transforms / opacity only. */
.scx{--scx-line:rgba(130,180,255,.12);--scx-muted:rgba(214,229,250,.62);--scx-grad:linear-gradient(135deg,#1fc9f1,#8a7dff);
  position:relative;display:grid;gap:40px;width:min(1400px,calc(100% - 2 * var(--site-gutter,24px)));margin:44px auto 72px;color:#e9f3ff;font-family:Montserrat,system-ui,sans-serif;isolation:isolate}
.scx *{box-sizing:border-box}
/* ambient light behind the page (fixed, very soft) */
.scx::before,.scx::after{content:"";position:fixed;z-index:-1;width:720px;height:720px;border-radius:50%;filter:blur(110px);opacity:.33;pointer-events:none;animation:scx-drift 26s ease-in-out infinite alternate}
.scx::before{top:-240px;left:-200px;background:radial-gradient(circle,#1fc9f1,transparent 65%)}
.scx::after{right:-260px;top:30vh;background:radial-gradient(circle,#8a7dff,transparent 65%);animation-delay:-13s}
@keyframes scx-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(80px,60px) scale(1.15)}}

.scx-hero{display:grid;gap:14px;justify-items:start;max-width:820px}
.scx-kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid rgba(127,233,255,.25);border-radius:999px;background:rgba(31,201,241,.08);
  color:#9ff0ff;font:800 11px/1 Montserrat,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.scx-kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:#1fc9f1;box-shadow:0 0 10px #1fc9f1}
.scx-title{margin:0;font:900 clamp(34px,4.4vw,60px)/1.04 Montserrat,system-ui,sans-serif;color:#fff;letter-spacing:-.02em}
.scx-title em{font-style:normal;background:linear-gradient(100deg,#7fe9ff 10%,#c4b8ff 60%,#8a7dff);-webkit-background-clip:text;background-clip:text;color:transparent}
.scx-lead{margin:0;max-width:640px;color:var(--scx-muted);font:500 16.5px/1.6 Montserrat,system-ui,sans-serif}
.scx-facts{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0;padding:0;list-style:none}
.scx-facts li{padding:8px 14px;border:1px solid var(--scx-line);border-radius:12px;background:rgba(255,255,255,.03);color:rgba(226,238,255,.8);font:600 13px/1 Montserrat,system-ui,sans-serif}
.scx-facts b{color:#fff;font-weight:800}

/* cards: a frame with an inner "screen" for the scene */
.scx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.scx-card{position:relative;display:grid;grid-template-rows:auto 1fr;gap:4px;padding:8px;border-radius:22px;color:inherit;text-decoration:none;
  background:linear-gradient(180deg,rgba(18,28,56,.72),rgba(8,13,30,.82));box-shadow:inset 0 0 0 1px var(--scx-line);backdrop-filter:blur(6px);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
/* gradient ring that fades in on hover */
.scx-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(127,233,255,.9),rgba(138,125,255,.25) 40%,rgba(138,125,255,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s;pointer-events:none}
.scx-card:hover,.scx-card:focus-visible{transform:translateY(-4px);box-shadow:inset 0 0 0 1px transparent,0 22px 50px rgba(0,0,0,.45),0 0 40px rgba(31,201,241,.08);outline:none}
.scx-card:hover::before,.scx-card:focus-visible::before{opacity:1}
.scx-card__stage{position:relative;height:176px;overflow:hidden;border-radius:15px;
  background:radial-gradient(80% 100% at 20% 0%,rgba(31,201,241,.16),transparent 65%),radial-gradient(70% 90% at 100% 100%,rgba(138,125,255,.18),transparent 65%),#050a18;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.08)}
/* faint scanlines + vignette inside the screen */
.scx-card__stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 30%),radial-gradient(120% 90% at 50% 50%,transparent 60%,rgba(0,0,0,.45))}
.scx-card__stage .scx-s{transform:scale(.86);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.scx-card:hover .scx-card__stage .scx-s{transform:scale(.92)}
.scx-card__body{position:relative;display:grid;align-content:start;gap:6px;padding:12px 12px 10px}
.scx-card__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.scx-card__title{margin:0;font:800 16px/1.25 Montserrat,system-ui,sans-serif;color:#fff}
.scx-card__desc{margin:0;color:var(--scx-muted);font:500 13px/1.5 Montserrat,system-ui,sans-serif}
.scx-tag{display:inline-flex;align-items:center;height:19px;padding:0 8px;border-radius:999px;font:800 9.5px/1 Montserrat,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase}
.scx-tag--tagNew{background:#fff;color:#050a18}
.scx-tag--tagFree{background:rgba(95,242,181,.12);color:#9ff5cf;box-shadow:inset 0 0 0 1px rgba(95,242,181,.25)}

/* scenes */
.scx-s{position:absolute;inset:0;display:grid;place-items:center}
.scx-s i,.scx-s b{display:block}
/* Workshop: the art splits into 5 parts and joins again */
.scx-s--workshop{grid-template-columns:repeat(5,52px);place-content:center;gap:0;animation:scx-gap 4s ease-in-out infinite}
.scx-s--workshop i{width:52px;height:150px;background:var(--scx-art) center/260px auto no-repeat;background-position:calc(var(--i) * -52px) center;border-radius:2px}
@keyframes scx-gap{0%,15%{gap:0}45%,70%{gap:9px}100%{gap:0}}
.scx-s--workshop i{animation:scx-rise 4s ease-in-out infinite;animation-delay:calc(var(--i) * .08s)}
@keyframes scx-rise{0%,15%,100%{transform:none}45%,70%{transform:translateY(-6px)}}
/* Featured: one big art with a light sweep */
.scx-s--featured i{position:relative;overflow:hidden;width:270px;height:152px;border-radius:4px;background:var(--scx-art) center/cover;box-shadow:0 0 0 2px rgba(127,233,255,.35),0 14px 30px rgba(0,0,0,.5);animation:scx-float 5s ease-in-out infinite}
.scx-s--featured i::after{content:"";position:absolute;top:-60%;left:0;width:70px;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:translateX(-140px) rotate(18deg);animation:scx-sweep 3.6s ease-in-out infinite}
@keyframes scx-sweep{0%,30%{transform:translateX(-140px) rotate(18deg)}70%,100%{transform:translateX(360px) rotate(18deg)}}
@keyframes scx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* Artwork showcase: big part and the narrow side slide together */
.scx-s--split{grid-template-columns:auto auto;place-content:center;gap:8px}
.scx-big{width:212px;height:150px;border-radius:3px;background:var(--scx-art) 0 center/256px auto no-repeat;animation:scx-from-left 4.4s ease-in-out infinite}
.scx-side{width:42px;height:150px;border-radius:3px;background:var(--scx-art) -214px center/256px auto no-repeat;animation:scx-from-right 4.4s ease-in-out infinite}
@keyframes scx-from-left{0%,10%{transform:translateX(-18px);opacity:.4}35%,80%{transform:none;opacity:1}100%{transform:translateX(-18px);opacity:.4}}
@keyframes scx-from-right{0%,10%{transform:translateX(30px);opacity:0}35%,80%{transform:none;opacity:1}100%{transform:translateX(30px);opacity:0}}
/* Long Workshop: a tall art scrolls up inside 5 columns */
.scx-s--rows{grid-template-columns:repeat(5,46px);place-content:center;gap:5px}
.scx-s--rows i{width:46px;height:186px;background:var(--scx-art) no-repeat;background-size:auto 300px;background-position-x:calc(var(--i) * -46px - 130px);animation:scx-scroll 7s ease-in-out infinite alternate;border-radius:2px}
@keyframes scx-scroll{0%,12%{background-position-y:-4px}88%,100%{background-position-y:-114px}}
/* Squares: five squares pop in one after another */
.scx-s--squares{grid-template-columns:repeat(5,58px);grid-auto-rows:58px;place-content:center;gap:6px}
.scx-s--squares i{width:58px;height:58px;border-radius:3px;background:var(--scx-art) no-repeat;background-size:420px auto;
  background-position:calc(var(--i) * -64px - 36px) calc(var(--scx-row, 0) * -64px - 12px);box-shadow:0 0 0 1px rgba(255,255,255,.06);
  animation:scx-pop 3.6s ease-in-out infinite;animation-delay:calc(var(--i) * .12s + var(--scx-row, 0) * .3s)}
.scx-s--squares i:nth-child(n+6){--scx-row:1}
@keyframes scx-pop{0%,8%{transform:scale(.6);opacity:0}25%,75%{transform:none;opacity:1}100%{transform:scale(.6);opacity:0}}
/* Info box: lines are typed into a Steam box */
.scx-box{display:grid;gap:8px;width:280px;padding:0 0 14px;border-radius:4px;background:rgba(0,0,0,.45);overflow:hidden;box-shadow:0 0 0 1px rgba(110,170,255,.15)}
.scx-box__head{height:24px;background:linear-gradient(90deg,rgba(115,173,184,.4),rgba(43,45,68,.9))}
.scx-line{height:7px;margin:0 16px;border-radius:4px;background:linear-gradient(90deg,#7fe9ff,#c4b8ff);transform-origin:left;animation:scx-type 5s steps(12) infinite;animation-delay:calc(var(--i) * .5s)}
.scx-line:nth-child(odd){margin-right:70px}
.scx-line:nth-child(3n){margin-left:60px;margin-right:60px}
@keyframes scx-type{0%{transform:scaleX(0)}30%,80%{transform:scaleX(1)}100%{transform:scaleX(0)}}
/* About me and name: the name changes its font, three lines under it */
.scx-s--about{grid-template-columns:76px 200px;grid-template-rows:38px 38px;place-content:center;place-items:stretch;column-gap:16px;row-gap:0}
.scx-av{grid-row:1/3;align-self:center;width:76px;height:76px;padding:2px;overflow:hidden;background:linear-gradient(135deg,#57cbde,#8a7dff);box-shadow:0 8px 20px rgba(0,0,0,.45)}
.scx-av::before{content:"";display:block;width:100%;height:100%;background:#0b1224 var(--sm-avatar,url('/static/img/favicon/favicon-512.png')) center/cover no-repeat}
.scx-nick{position:relative;align-self:end;height:32px;overflow:hidden}
.scx-nick b{position:absolute;inset:0;text-align:left;color:#fff;font:400 24px/32px "Motiva Sans",Arial,sans-serif;white-space:nowrap;opacity:0;animation:scx-nick 10s infinite}
.scx-nick b:nth-child(2){animation-delay:2s}.scx-nick b:nth-child(3){animation-delay:4s}.scx-nick b:nth-child(4){animation-delay:6s}.scx-nick b:nth-child(5){animation-delay:8s}
@keyframes scx-nick{0%{opacity:0;transform:translateY(8px)}4%,18%{opacity:1;transform:none}22%,100%{opacity:0;transform:translateY(-8px)}}
.scx-sum{display:grid;gap:6px;align-self:start;align-content:start;padding-top:8px}
.scx-sum .scx-line{margin:0;height:6px;background:rgba(214,229,250,.45)}
.scx-sum .scx-line:nth-child(n){margin-right:30px}
.scx-s--letters{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
/* Achievements: a Steam-like row of five 64 px achievement slots; each flips to the next game's real letter icon */
.scx-ach{display:grid;grid-template-columns:repeat(5,52px);gap:8px;padding:10px 12px;border-radius:6px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.scx-ach i{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:4px;overflow:hidden;font-style:normal;
  background:linear-gradient(135deg,#2a3f5a,#14202f);box-shadow:0 6px 14px rgba(0,0,0,.45);transition:transform .23s cubic-bezier(.4,0,.6,1);transform:perspective(220px) rotateY(0)}
.scx-ach i span{font:900 22px/1 Montserrat,system-ui,sans-serif;color:#9fb6d3}
.scx-ach i.has-icon span{display:none}
.scx-ach i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scx-ach i.is-flip{transform:perspective(220px) rotateY(90deg)}
.scx-ach__game{min-height:16px;max-width:300px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 12px/16px Montserrat,system-ui,sans-serif;color:#9fb6d3;
  opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.scx-ach__game.is-on{opacity:.85;transform:none}
@media (prefers-reduced-motion:reduce){.scx-ach i,.scx-ach__game{transition:none}}
/* Your own design: a background, then layers (background, character, text, effect) stack up in the layer list */
.scx-s--builder{grid-template-columns:200px 92px;place-content:center;gap:12px}
.scx-bg{position:relative;width:200px;height:150px;border-radius:4px;background:var(--scx-art) 38% center/cover;box-shadow:0 0 0 1px rgba(110,170,255,.2)}
.scx-text{position:absolute;left:0;right:0;bottom:16px;color:#fff;font:900 17px/1 Montserrat,system-ui,sans-serif;letter-spacing:.16em;text-align:center;text-shadow:0 0 10px #1fc9f1;
  animation:scx-in 6s ease-in-out infinite 1.4s}
.scx-spark{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 8px #7fe9ff;left:calc(14px + var(--i) * 23px);top:calc(14px + (var(--i) * 29px) % 90px);
  animation:scx-spark 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * .3s)}
.scx-layers{display:grid;gap:6px}
.scx-layers i{display:flex!important;align-items:center;gap:6px;height:30px;padding:0 8px;border-radius:8px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(110,170,255,.22);
  font:700 13px/1 system-ui,sans-serif;font-style:normal;color:#bff3ff;animation:scx-in 6s ease-in-out infinite;animation-delay:calc(var(--i) * .45s)}
.scx-layers i::after{content:"";flex:1;height:5px;border-radius:3px;background:rgba(214,229,250,.3)}
.scx-layers i:first-child{box-shadow:inset 0 0 0 1px rgba(111,227,255,.6);background:rgba(31,201,241,.14)}
@keyframes scx-in{0%,5%{opacity:0;transform:translateY(10px)}20%,85%{opacity:1;transform:none}100%{opacity:0;transform:translateY(10px)}}
@keyframes scx-spark{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}

/* where to start */
.scx-start{display:grid;gap:16px;padding:32px;border-radius:24px;background:linear-gradient(180deg,rgba(18,28,56,.6),rgba(8,13,30,.75));box-shadow:inset 0 0 0 1px var(--scx-line)}
.scx-start h2{margin:0;font:800 26px/1.2 Montserrat,system-ui,sans-serif;color:#fff}
.scx-start__lead{margin:0;color:var(--scx-muted);font:500 14.5px/1.55 Montserrat,system-ui,sans-serif}
.scx-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.scx-steps li{display:flex;gap:14px;padding:16px;border:1px solid var(--scx-line);border-radius:16px;background:rgba(4,10,26,.55)}
.scx-steps__n{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:11px;background:var(--scx-grad);color:#041019;font:900 15px/1 Montserrat,system-ui,sans-serif}
.scx-steps b{display:block;margin-bottom:4px;color:#fff;font:700 15px/1.3 Montserrat,system-ui,sans-serif}
.scx-steps p{margin:0;color:var(--scx-muted);font:500 13px/1.5 Montserrat,system-ui,sans-serif}
.scx-note{margin:0;color:rgba(226,238,255,.82);font:600 14px/1.5 Montserrat,system-ui,sans-serif}
.scx-links{display:flex;flex-wrap:wrap;gap:8px}
.scx-link{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--scx-line);border-radius:12px;background:rgba(255,255,255,.04);
  color:#dff6ff;font:700 13.5px/1 Montserrat,system-ui,sans-serif;text-decoration:none}
.scx-link:hover{border-color:rgba(111,227,255,.5);color:#fff}

@media (max-width:1100px){.scx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .scx{width:calc(100% - 32px);margin:24px auto 48px;gap:28px}
  .scx::before,.scx::after{width:420px;height:420px}
  .scx-grid,.scx-steps{grid-template-columns:1fr}
  .scx-start{padding:20px}
}
@media (prefers-reduced-motion:reduce){.scx-s *,.scx-card,.scx::before,.scx::after{animation:none!important;transition:none!important}}

/* Favorite Guide: an animated square cover next to the title and description lines */
.scx-s--guide{grid-template-columns:96px 170px;column-gap:14px;place-content:center;place-items:center stretch}
.scx-gimg{position:relative;width:96px;height:96px;border-radius:3px;background:var(--scx-art) 40% 20%/220% auto no-repeat;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.scx-gimg::after{content:"";position:absolute;inset:-40% auto -40% 0;width:30px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-60px) rotate(20deg);animation:scx-gshine 2.8s ease-in-out infinite}
@keyframes scx-gshine{0%,35%{transform:translateX(-60px) rotate(20deg)}75%,100%{transform:translateX(150px) rotate(20deg)}}
.scx-ginfo{display:grid;gap:7px}
.scx-ginfo b{height:12px;width:80%;border-radius:4px;background:linear-gradient(90deg,#fff,#cfe9ff);letter-spacing:4px}
.scx-ginfo .scx-line{margin:0;height:6px;background:rgba(214,229,250,.45)}
.scx-ginfo .scx-line:nth-child(n){margin-right:20px}

/* Glass round (2026-10-13, owner reference: translucent cards over soft light). The page gets slow diagonal light
   beams in the site palette; cards, their screens, facts, steps and links become frosted glass that lets the light
   through. Accents (gradient ring, arrow, tags) stay as before. */
.scx-beams{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.scx-beams i{position:absolute;top:-30vh;width:38vw;height:160vh;border-radius:50%;filter:blur(70px);transform:rotate(28deg);opacity:.55;
  animation:scx-beam 30s ease-in-out infinite alternate}
.scx-beams i:nth-child(1){left:-12vw;background:linear-gradient(90deg,transparent,rgba(127,233,255,.16) 45%,rgba(127,233,255,.05) 60%,transparent)}
.scx-beams i:nth-child(2){left:30vw;width:22vw;background:linear-gradient(90deg,transparent,rgba(196,184,255,.12) 50%,transparent);animation-delay:-10s;animation-duration:36s}
.scx-beams i:nth-child(3){right:-16vw;background:linear-gradient(90deg,transparent,rgba(138,125,255,.15) 45%,transparent);animation-delay:-20s}
@keyframes scx-beam{from{transform:translateX(-4vw) rotate(28deg)}to{transform:translateX(6vw) rotate(24deg)}}
.scx::before,.scx::after{opacity:.22}

.scx-card{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.075),inset 0 1px 0 rgba(255,255,255,.07),0 18px 40px rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
.scx-card:hover,.scx-card:focus-visible{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03))}
.scx-card__stage{background:radial-gradient(80% 100% at 20% 0%,rgba(31,201,241,.10),transparent 65%),radial-gradient(70% 90% at 100% 100%,rgba(138,125,255,.11),transparent 65%),rgba(2,6,16,.42);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.06)}
.scx-card__stage::after{background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 35%),radial-gradient(120% 90% at 50% 50%,transparent 62%,rgba(0,0,0,.28))}
.scx-facts li,.scx-steps li,.scx-link{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
.scx-steps li{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.scx-link:hover{background:rgba(255,255,255,.08)}
.scx-kicker{background:rgba(31,201,241,.07);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@media (prefers-reduced-motion:reduce){.scx-beams i{animation:none}}

/* Background cutter card (2026-10-14): the art dimmed, showcase windows light up one by one with their crisp crop. */
.scx-bgc{position:relative;width:280px;height:158px;border-radius:6px;overflow:hidden;background:var(--scx-art) 0 0/280px 158px;box-shadow:0 14px 30px rgba(0,0,0,.5)}
.scx-bgc::before{content:"";position:absolute;inset:0;background:rgba(3,8,20,.62)}
.scx-bgc i{position:absolute;background-image:var(--scx-art);background-size:280px 158px;box-shadow:0 0 0 1.5px rgba(127,233,255,.85),0 0 14px rgba(31,201,241,.35);
  animation:scx-bgc-win 4.8s ease-in-out infinite;animation-delay:calc(var(--i) * .18s)}
@keyframes scx-bgc-win{0%,8%{opacity:0;transform:scale(.92)}22%,82%{opacity:1;transform:none}100%{opacity:0;transform:scale(.92)}}
/* Profile mockup card: a tiny profile with an animated frame, a showcase and a recording bar. */
.scx-mk{position:relative;width:280px;height:158px;border-radius:6px;overflow:hidden;background:linear-gradient(rgba(3,8,20,.45),rgba(3,8,20,.75)),var(--scx-art) center/cover;box-shadow:0 14px 30px rgba(0,0,0,.5)}
.scx-mk__av{position:absolute;left:62px;top:12px;width:30px;height:30px;border-radius:2px;background:#1b2838;box-shadow:0 0 0 2px #ff7a3c,0 0 12px #ff7a3c;animation:scx-mk-frame 1.6s ease-in-out infinite alternate}
@keyframes scx-mk-frame{from{box-shadow:0 0 0 2px #ff7a3c,0 0 6px #ff7a3c}to{box-shadow:0 0 0 2px #ffd166,0 0 16px #ff4d6a}}
.scx-mk__name,.scx-mk__sub{position:absolute;left:100px;height:7px;border-radius:4px;background:rgba(255,255,255,.85)}
.scx-mk__name{top:16px;width:58px}
.scx-mk__sub{top:28px;width:84px;height:5px;background:rgba(255,255,255,.4)}
.scx-mk__sc{position:absolute;left:62px;top:52px;width:110px;height:84px;background:var(--scx-art) 30% 30%/240px auto;box-shadow:0 0 0 1px rgba(0,0,0,.8);animation:scx-float 5s ease-in-out infinite}
.scx-mk__side{position:absolute;left:180px;top:52px;width:44px;height:84px;border-radius:2px;background:rgba(0,0,0,.35)}
.scx-mk__rec{position:absolute;right:8px;top:8px;padding:1px 6px 1px 14px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font:800 8px/12px Montserrat,sans-serif}
.scx-mk__rec::before{content:"";position:absolute;left:5px;top:3px;width:6px;height:6px;border-radius:50%;background:#ff4d6a;animation:scx-mk-blink 1s steps(2,start) infinite}
@keyframes scx-mk-blink{to{visibility:hidden}}
.scx-mk__bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,#1fc9f1,#8a7dff);transform-origin:0 50%;animation:scx-mk-bar 5s linear infinite}
@keyframes scx-mk-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}