:root { --ma: #2f6bff; --mb: #e0182d; --edge: #4a7ae6; --ink: #000; --mfont: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif; --mtext: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; }

body.output { font-family: var(--mtext); }
#stage .mfs, #stage .fside, #stage .l3w, #stage .clk, #stage .bug { position: absolute; }


.hx { position: absolute; --hexp: polygon(21.4% 0, 78.6% 0, 100% 50%, 78.6% 100%, 21.4% 100%, 0 50%); filter: drop-shadow(0 18px 40px rgba(0,0,0,.55)); }
.hx-o { position: absolute; inset: 0; background: var(--edge); clip-path: var(--hexp); }
.hx-i { position: absolute; inset: 3px; background: #000; clip-path: var(--hexp); }
.hx-i::before { content: ""; position: absolute; inset: 9px; background: #3b3b3b; clip-path: var(--hexp); }
.hx-i::after { content: ""; position: absolute; inset: 10px; background: #000; clip-path: var(--hexp); }
.hx-c { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; color: #fff; }
.hx-logo { display: block; object-fit: contain; }
.hx-title { font-family: var(--mfont); letter-spacing: .02em; text-transform: uppercase; line-height: 1; }


.phx { position: absolute; overflow: hidden; }
.phx.L { clip-path: polygon(0 50%, 34% 0, 100% 0, 100% 100%, 34% 100%); }
.phx.R { clip-path: polygon(0 0, 66% 0, 100% 50%, 66% 100%, 0 100%); }
.smoke { position: absolute; inset: -25%; background-size: cover; background-position: center; will-change: transform; animation: smokeA 9s ease-in-out infinite alternate; }
.smoke::after { content: ""; position: absolute; inset: 0; background: inherit; mix-blend-mode: screen; opacity: .75; transform: scale(1.35) rotate(180deg); animation: smokeB 13s ease-in-out infinite alternate; }
.smoke.blue { background-image: url(img/smoke-blue.jpg); }
.smoke.red { background-image: url(img/smoke-red.jpg); }
@keyframes smokeA { 0% { transform: translate3d(-12%, 6%, 0) scale(1.05) rotate(-6deg); } 100% { transform: translate3d(13%, -8%, 0) scale(1.35) rotate(14deg); } }
@keyframes smokeB { 0% { transform: scale(1.4) rotate(180deg) translate3d(10%, -6%, 0); } 100% { transform: scale(1.1) rotate(158deg) translate3d(-12%, 10%, 0); } }
.phx img { position: absolute; bottom: 0; height: 92%; width: auto; max-width: none; }
.phx.L img { left: 10%; }
.phx.R img { right: 10%; }
.phx .pname { position: absolute; bottom: 0; left: 0; right: 0; padding: 60px 0 22px; text-align: center; text-transform: uppercase; z-index: 3;
  background: linear-gradient(0deg, rgba(0,0,0,.78), transparent); font-family: var(--mfont); font-size: 46px; line-height: .95; letter-spacing: .03em; }
.phx .pname small { display: block; font-family: var(--mtext); font-size: 26px; font-weight: 500; opacity: .85; letter-spacing: .06em; }
.phx .pname.n11 { font-size: 40px; } .phx .pname.n14 { font-size: 33px; }
.phx.L .pname { padding-left: 38%; padding-right: 26%; }
.phx.R .pname { padding-right: 34%; padding-left: 31%; }


.mfs { left: 0; top: 0; width: 1920px; height: 1080px; opacity: 0; transform: scale(.96); transition: opacity 450ms ease, transform 550ms cubic-bezier(.2,.8,.2,1); }
.mfs.in { opacity: 1; transform: none; }

.tape .hx-c { padding-top: 40px; }
.tape .hx-logo { height: 110px; max-width: 320px; }
.tape .hx-title { font-size: 88px; margin: 26px 0 30px; }
.tr { display: grid; grid-template-columns: 1fr 170px 1fr; align-items: center; width: 100%; padding: 0 112px; height: 78px; font-size: 40px; font-weight: 400; text-transform: uppercase; white-space: nowrap; }
.tr.sm { font-size: 34px; }
.tr span { overflow: hidden; text-overflow: ellipsis; }
.tr span.f1 { font-size: 33px; } .tr span.f2 { font-size: 28px; } .tr.sm span.f1 { font-size: 29px; } .tr.sm span.f2 { font-size: 25px; }
.tr .l { text-align: left; } .tr .r { text-align: right; }
.tr b { text-align: center; font-weight: 700; font-size: 40px; letter-spacing: .02em; }
.tr.sm b { font-size: 34px; }

.nxt .hx-c { padding-top: 40px; }
.nxt .hx-logo { height: 84px; max-width: 260px; }
.nxt .hx-title { font-size: 74px; margin: 14px 0 18px; color: var(--edge); }
.nxt .vs { display: grid; grid-template-columns: 1fr auto 1fr; width: 100%; padding: 0 130px; align-items: center; gap: 24px; }
.nxt .p { text-transform: uppercase; line-height: 1; }
.nxt .p b { display: block; font-family: var(--mfont); font-size: 62px; font-weight: 400; letter-spacing: .02em; }
.nxt .p small { display: block; font-size: 28px; font-weight: 500; opacity: .8; margin-top: 4px; }
.nxt .p.r { text-align: right; }
.nxt .vsw { font-family: var(--mfont); font-size: 64px; color: var(--edge); }
.nxt .tm { font-family: var(--mfont); font-size: 64px; margin-top: 26px; }

.sch .hx-c { padding-top: 46px; }
.sch .hx-logo { height: 84px; max-width: 260px; }
.sch .hx-title { font-size: 78px; margin: 10px 0 14px; color: var(--edge); }
.sch .rows { width: 100%; padding: 0 200px; display: grid; gap: 0; }
.sch .rw { display: grid; grid-template-columns: 110px 1fr; gap: 14px; font-size: 34px; text-transform: uppercase; line-height: 1.32; }
.sch .rw.hd { grid-template-columns: 1fr; text-align: center; color: var(--edge); font-weight: 700; letter-spacing: .08em; margin: 6px 0 2px; }
.sch .rw.hd span { color: var(--edge); }
.sch.many2 .rw { font-size: 26px; line-height: 1.28; }
.sch.many2 .hx-title { font-size: 58px; margin: 2px 0 6px; }
.sch.many .rw { font-size: 29px; line-height: 1.3; }
.sch.many .hx-title { font-size: 64px; margin: 4px 0 8px; }
.sch .rw span:first-child { font-weight: 700; color: var(--edge); }

.opn .hx-c { justify-content: center; text-align: center; gap: 12px; }
.opn .hx-logo { height: 250px; max-width: 700px; }
.opn .hx-title { font-size: 120px; }
.opn .l1 { font-size: 46px; text-transform: uppercase; font-weight: 500; letter-spacing: .06em; }
.opn .l2 { font-size: 52px; text-transform: uppercase; font-weight: 700; margin-top: 24px; }

.cmm .pl { position: absolute; background: #04060c; }
.cmm .frm { position: absolute; border: 3px solid var(--edge); }
.cmm .frm.v1 { left: 57px; top: 198px; width: 1221px; height: 690px; }
.cmm .frm.v2 { left: 1287px; top: 552px; width: 591px; height: 336px; }
.cmm .lg { position: absolute; left: 1287px; top: 190px; width: 591px; height: 330px; display: flex; align-items: center; justify-content: center; }
.cmm .lg img { max-width: 80%; max-height: 90%; object-fit: contain; }


.fside { left: 0; top: 0; width: 620px; height: 1080px; transform: translateX(-104%); transition: transform 600ms cubic-bezier(.7,0,.2,1); --sp: polygon(0 0, 84% 0, 100% 50%, 84% 100%, 0 100%); filter: drop-shadow(0 0 40px rgba(0,0,0,.6)); }
.fside.in { transform: none; }
.fside .so { position: absolute; inset: 0; background: var(--sc); clip-path: var(--sp); }
.fside .si { position: absolute; inset: 0 0 0 0; margin: 0; background: linear-gradient(90deg, #000, #05070d); clip-path: var(--sp); transform: scale(1); }
.fside .si { inset: 4px 4px 4px 0; }
.fside .sc { position: absolute; left: 70px; top: 0; bottom: 0; width: 400px; display: flex; flex-direction: column; justify-content: center; text-transform: uppercase; color: #fff; }
.fside .nm1 { font-size: 46px; font-weight: 400; line-height: 1; }
.fside .nm2 { font-family: var(--mfont); font-size: 84px; line-height: .95; margin-bottom: 40px; letter-spacing: .02em; }
.fside .kv { margin-bottom: 20px; line-height: 1; }
.fside .kv small { display: block; font-size: 28px; font-weight: 400; opacity: .7; letter-spacing: .04em; }
.fside .kv b { font-size: 44px; font-weight: 700; }


.l3w { left: 50%; bottom: 74px; width: 860px; height: 96px; margin-left: -430px; --lp: polygon(2.8% 0, 97.2% 0, 100% 50%, 97.2% 100%, 2.8% 100%, 0 50%); clip-path: inset(0 50% 0 50%); transition: clip-path 600ms cubic-bezier(.7,0,.2,1), bottom 400ms ease; filter: drop-shadow(0 10px 24px rgba(0,0,0,.6)); }
#stage.clk-on .l3w { bottom: 138px; }
.l3w.in { clip-path: inset(-30px 0 -30px 0); }
.l3w .lo { position: absolute; inset: 0; background: var(--lc, var(--edge)); clip-path: var(--lp); }
.l3w .li { position: absolute; inset: 3px; background: #000; clip-path: var(--lp); }
.l3w .lc { position: absolute; inset: 0; display: flex; align-items: center; gap: 26px; padding: 0 60px; color: #fff; text-transform: uppercase; }
.l3w .llogo { height: 60px; max-width: 150px; object-fit: contain; flex: none; }
.l3w .lt { flex: 1; text-align: center; line-height: 1; }
.l3w .lt b { display: block; font-family: var(--mfont); font-size: 50px; font-weight: 400; letter-spacing: .03em; }
.l3w .lc.gold .lt b { color: #e6c05e; } .l3w .lc.gold .lt small { color: #d9b04a; opacity: 1; }
.l3w .lt small { display: block; font-size: 27px; font-weight: 500; opacity: .85; margin-top: 3px; letter-spacing: .04em; }
.l3w.noL .lc { justify-content: center; }

.l3w .lc.cm { padding: 0 70px; gap: 0; } .l3w .lc.cm .lt { padding: 0 20px; min-width: 0; } .l3w .lc.cm .vd { flex: none; width: 3px; height: 62px; background: var(--edge); }
.l3w[data-k=commentators] { width: 780px; margin-left: -390px; }   
.l3w .lc.cm { padding: 0 44px; } .l3w .lc.cm .lt { padding: 0 12px; }
.l3w .lc.cm .lt b { font-size: 42px; } .l3w .lc.cm .lt small { font-size: 22px; }
.l3w .lc.cm .cmtv { flex: none; height: 38px; width: auto; max-width: 130px; object-fit: contain; display: block; margin: 0 20px; }
.l3w[data-k=credits] { width: 1240px; height: 150px; margin-left: -620px; --lp: polygon(2.2% 0, 97.8% 0, 100% 50%, 97.8% 100%, 2.2% 100%, 0 50%); }
.l3w .lc.cr { padding: 0 90px; gap: 0; } .l3w .lc.cr .lt { flex: 1 1 0; min-width: 0; padding: 0 28px; } .l3w .lc.cr .lt small { margin: 0 0 6px; font-size: 26px; letter-spacing: .12em; color: var(--edge); opacity: 1; font-weight: 600; }
.l3w .lc.cr .clogo { flex: none; height: 98px; max-width: 280px; object-fit: contain; }


.clk { left: 50%; bottom: 40px; transform: translateX(-50%); text-transform: uppercase; color: #fff; --ease: cubic-bezier(.65, 0, .25, 1); }
.clk .bar { display: flex; justify-content: center; height: 78px; position: relative; filter: drop-shadow(0 10px 24px rgba(0,0,0,.6)); transition: height 700ms var(--ease); }
.clk.mini .bar { height: 62px; }
.clk .cell { position: relative; flex: none; overflow: hidden; opacity: 0; transition: transform 650ms cubic-bezier(.2,.8,.2,1), opacity 350ms ease, width 700ms var(--ease); }
.clk .cell.l, .clk .cell.r { width: 305px; }
.clk .cell.c { width: 210px; transform: scale(.4); transition: transform 650ms cubic-bezier(.2,.8,.2,1) 250ms, opacity 350ms ease 250ms, width 700ms var(--ease); }
.clk .cell.l { transform: translateX(-900px); }
.clk .cell.r { transform: translateX(900px); }
.clk.in .cell { opacity: 1; transform: none; }
.clk.mini .cell.l, .clk.mini .cell.r { width: 0; }
.clk.mini .cell.c { width: 190px; }
.clk .cell .o { position: absolute; inset: 0; background: var(--edge); }
.clk .cell .i { position: absolute; overflow: hidden; background: #000; }
.clk .cell .i::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.28); }
.clk .cell .sm { position: absolute; inset: 0; overflow: hidden; }
.clk .cell.l .o { clip-path: polygon(0 50%, 6% 0, 100% 0, 100% 100%, 6% 100%); }
.clk .cell.l .i { inset: 3px 0 3px 3px; clip-path: polygon(0 50%, 5.6% 0, 100% 0, 100% 100%, 5.6% 100%); }
.clk .cell.r .o { clip-path: polygon(0 0, 94% 0, 100% 50%, 94% 100%, 0 100%); }
.clk .cell.r .i { inset: 3px 3px 3px 0; clip-path: polygon(0 0, 94.4% 0, 100% 50%, 94.4% 100%, 0 100%); }
.clk .cell.c .o { clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 50%); transition: clip-path 700ms var(--ease); }
.clk .cell.c .i { inset: 3px 0; clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 50%); transition: clip-path 700ms var(--ease), left 700ms var(--ease), right 700ms var(--ease); }
.clk.mini .cell.c .o { clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%); }
.clk.mini .cell.c .i { left: 3px; right: 3px; clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%); }
.clk .cell .nm, .clk .cell .ct { position: absolute; inset: 0; z-index: 2; }
.clk .nm { display: flex; align-items: center; font-family: var(--mfont); font-size: 38px; letter-spacing: .03em; padding: 0 40px; white-space: nowrap; overflow: hidden; }
.clk .nm.a { justify-content: flex-start; } .clk .nm.b { justify-content: flex-end; flex-direction: row-reverse; }
.clk .nm.a::before, .clk .nm.b::after { content: ""; width: 8px; height: 40px; background: var(--ma); margin: 0 14px 0 0; flex: none; }
.clk .nm.b::after { background: var(--mb); margin: 0 0 0 14px; }
.clk .ct { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.clk .ct b { font-family: var(--mfont); font-size: 54px; font-weight: 400; font-variant-numeric: tabular-nums; transition: font-size 700ms var(--ease); }
.clk.mini .ct b { font-size: 40px; }
.clk .ct small { font-size: 20px; font-weight: 600; letter-spacing: .1em; opacity: .85; margin-top: -2px; }

.bug { left: 44px; top: 34px; height: 72px; opacity: 0; transition: opacity 400ms; }
.bug.in { opacity: 1; }
.bug img { height: 100%; width: auto; display: block; }


.fcard { background: #17181b; border: 1px solid #26272c; border-radius: 10px; }
.fcard > summary { cursor: pointer; padding: 12px 14px; font-weight: 700; font-size: 18px; list-style: none; display: flex; gap: 10px; align-items: center; }
.fcard > summary::-webkit-details-marker { display: none; }
.fcard > summary::before { content: "›"; color: #8e8e94; font-size: 22px; transition: transform .15s; }
.fcard[open] > summary::before { transform: rotate(90deg); }
.fcard .fb { padding: 4px 14px 14px; display: grid; gap: 12px; }
.fcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.fcol { background: #121315; border-radius: 8px; padding: 10px; display: grid; gap: 8px; align-content: start; }
.fcol h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.fcol h3 i { width: 10px; height: 18px; display: inline-block; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pthumb { width: 56px; height: 56px; border-radius: 6px; background: #0e0f11 center/cover no-repeat; border: 1px solid #34353b; flex: none; }
.selrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.selrow select { flex: 1; min-width: 200px; }

.fside .si .smoke { opacity: .8; }
.fside .si { overflow: hidden; }
.dropzone { border: 2px dashed #34353b; border-radius: 10px; padding: 18px; text-align: center; color: #a3a3a8; cursor: pointer; }
.dropzone:hover, .dropzone.over { border-color: var(--brand, #ff6b2c); color: #f0f0f2; background: #1a1b1f; }
.winc { padding: 10px 12px; gap: 8px; }
.winrow { flex-wrap: nowrap; }
.wlab { font-weight: 700; color: #a3a3a8; min-width: 56px; }
.winbtn { flex: 1; min-height: 40px; padding: 6px 10px; font-size: 18px; min-width: 0; }
.winrow input { min-height: 40px; padding: 6px 10px; }
.chipbtn { min-height: 32px; padding: 4px 12px; font-size: 14px; }
.chipbtn.sel { background: #2a2418; color: #c9a86a; box-shadow: inset 0 0 0 1px #c9a86a; }


.fside.r { left: auto; right: 0; transform: translateX(104%); --sp: polygon(16% 0, 100% 0, 100% 100%, 16% 100%, 0 50%); }
.fside.r.in { transform: none; }
.fside.r .si { inset: 4px 0 4px 4px; background: linear-gradient(270deg, #000, #05070d); }
.fside.r .sc { left: auto; right: 70px; text-align: right; }


.mfs[data-k=tape], .mfs[data-k=next], .mfs[data-k=opener], .mfs[data-k=schedule] { opacity: 1; transform: none; transition: none; }
.tp { position: absolute; inset: 0; }

.tp .hx.tape, .tp .hx.nxt, .tp .hx.opn, .tp .hx.sch { clip-path: inset(-160px 50% -160px 50%); transition: clip-path 380ms cubic-bezier(.7,0,.2,1) 80ms; }
.tp .phx { opacity: 0; transition: transform 340ms cubic-bezier(.55,0,.85,.35), opacity 260ms ease; }
.tp .phx.L { transform: translateX(-125%); } .tp .phx.R { transform: translateX(125%); }
.tp .hx-logo, .tp .hx-title, .tp .tr, .tp .vs, .tp .tm, .tp .l1, .tp .l2, .tp .rw { opacity: 0; transition: opacity 200ms ease, transform 240ms ease; }
.tp .hx-logo, .tp .hx-title { transform: translateY(16px); }
.tp .tr, .tp .vs, .tp .tm, .tp .rw { transform: translateX(-26px); }
.tp .opn .l1, .tp .opn .l2 { transform: translateY(14px); }

.mfs.in .tp .hx.tape, .mfs.in .tp .hx.nxt, .mfs.in .tp .hx.opn, .mfs.in .tp .hx.sch { clip-path: inset(-160px -160px -160px -160px); transition: clip-path 850ms cubic-bezier(.7,0,.2,1); }
.mfs.in .tp .hx-logo { opacity: 1; transform: none; transition: opacity 500ms ease 420ms, transform 700ms cubic-bezier(.2,.9,.25,1) 420ms; }
.mfs.in .tp .hx-title { opacity: 1; transform: none; transition: opacity 500ms ease 520ms, transform 700ms cubic-bezier(.2,.9,.25,1) 520ms; }
.mfs.in .tp .tr, .mfs.in .tp .vs, .mfs.in .tp .tm, .mfs.in .tp .l1, .mfs.in .tp .l2, .mfs.in .tp .rw { opacity: 1; transform: none; transition: opacity 450ms ease calc(640ms + var(--r, 0) * 90ms), transform 650ms cubic-bezier(.2,.9,.25,1) calc(640ms + var(--r, 0) * 90ms); }
.mfs.in .tp .phx { opacity: 1; transform: none; transition: transform 900ms cubic-bezier(.2,.9,.2,1) 950ms, opacity 450ms ease 950ms; }


.mfs { transition: opacity 260ms cubic-bezier(.55,0,1,.45), transform 300ms cubic-bezier(.55,0,1,.45); }
.mfs.in { transition: opacity 450ms cubic-bezier(.23,1,.32,1), transform 600ms cubic-bezier(.16,1,.3,1); }
.fside { transition: transform 380ms cubic-bezier(.7,0,.84,0); }
.fside.in { transition: transform 650ms cubic-bezier(.16,1,.3,1); }
.l3w { transition: clip-path 360ms cubic-bezier(.7,0,.84,0), bottom 450ms cubic-bezier(.65,0,.35,1); }
.l3w.in { transition: clip-path 600ms cubic-bezier(.6,0,.15,1), bottom 450ms cubic-bezier(.65,0,.35,1); }

.clk .cell, .clk .cell.c { transition: transform 340ms cubic-bezier(.55,0,1,.45), opacity 240ms ease-in, width 700ms var(--ease); }
.clk.in .cell { transition: transform 650ms cubic-bezier(.16,1,.3,1), opacity 300ms ease-out, width 700ms var(--ease); }
.clk.in .cell.c { transition: transform 600ms cubic-bezier(.34,1.3,.64,1) 220ms, opacity 250ms ease-out 220ms, width 700ms var(--ease); }
.bug { transition: opacity 250ms ease-in; }
.bug.in { transition: opacity 500ms cubic-bezier(.23,1,.32,1); }


.clk .nm, .l3w .lt b, .l3w .lt small, .sch .rw span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l3w .lt, .sch .rw span:nth-child(2) { min-width: 0; }

.clk .nm.b { flex-direction: row; justify-content: flex-end; }


.sch .rw.tv { grid-template-columns: 110px 1fr 150px; align-items: center; }
.sch .rw.tv span:last-child { display: flex; justify-content: flex-end; align-items: center; }
.sch .rw.tv img { height: 34px; max-width: 150px; object-fit: contain; display: block; }


.tp .opn .hx-logo, .tp .opn .hx-title { transform: scale(.88); }
.mfs.in .tp .opn .hx-logo, .mfs.in .tp .opn .hx-title { transform: none; transition: opacity 600ms ease 380ms, transform 1100ms cubic-bezier(.16,1,.3,1) 380ms; }
.opn .sheen { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; clip-path: var(--hexp); }
.opn .sheen::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: -40%; width: 28%; transform: skewX(-18deg); opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16) 45%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.16) 55%, transparent); }
.mfs.in .opn .sheen::after { animation: opnSheen 1300ms cubic-bezier(.45,0,.25,1) 1250ms 1 both; }
@keyframes opnSheen { 0% { left: -40%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 115%; opacity: 0; } }

.opn .glow { position: absolute; inset: 0; filter: blur(26px); opacity: 0; pointer-events: none; }
.opn .glow i { position: absolute; inset: -14px; background: #5b8cff; clip-path: var(--hexp); }
.tp .hx.opn { animation: opnBreathe 1600ms ease-in-out 2000ms infinite alternate; }
.opn .glow { animation: opnGlow 1600ms ease-in-out 2000ms infinite alternate; }
@keyframes opnBreathe { from { transform: scale(1); } to { transform: scale(1.025); } }
@keyframes opnGlow { from { opacity: .2; } to { opacity: 1; } }


.hx-o, .hx-run i { overflow: hidden; }
.tp .hx-o::after, .tp .hx-run i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 220%; aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 230deg, rgba(60,120,255,.55) 290deg, #4f86ff 330deg, #8fb6ff 352deg, transparent 360deg);
  transform: translate(-50%, -50%) rotate(0deg); animation: hxRun 4800ms linear infinite; }
.hx-run { position: absolute; inset: 0; filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity 400ms ease; }
.hx-run i { position: absolute; inset: -9px; clip-path: var(--hexp); }
.tp .hx-o::after { opacity: 0; transition: opacity 400ms ease; }
.mfs.in .tp .hx-o::after { opacity: 1; transition: opacity 900ms ease 900ms; }
.mfs.in .tp .hx-run { opacity: .95; transition: opacity 900ms ease 900ms; }
@keyframes hxRun { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }