: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 310px; display: grid; gap: 0; }
.sch .rw { display: grid; grid-template-columns: 70px 1fr; gap: 14px; font-size: 38px; 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: 34px; line-height: 1.2; }
.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; }
#stage.clk-on .l3w { bottom: 138px; }
.l3w.in { clip-path: inset(-140px -140px -140px -140px); }
.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); } }


body.control { --g-ac: var(--brand, #ff6b2c); --g-live: var(--live, #ff4545); --g-go: var(--accent, #3ddbb0);
  --g-glow: color-mix(in srgb, var(--g-ac) 38%, transparent); --g-edge: inset 0 1px 0 rgba(255,255,255,.05); }
body.control .card { box-shadow: var(--g-edge), 0 14px 30px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.02); transition: box-shadow 260ms ease; }
body.control .item, body.control .tile { box-shadow: var(--g-edge), 0 6px 14px -10px rgba(0,0,0,.9);
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 240ms ease, transform 200ms cubic-bezier(.2,.8,.2,1); }
body.control .item.armed, body.control .tile.armed { box-shadow: 0 0 0 1px color-mix(in srgb, var(--g-ac) 40%, transparent), 0 10px 26px -10px var(--g-glow); }
body.control .item.live, body.control .tile.live { box-shadow: inset 0 0 0 2px var(--g-live), 0 10px 28px -10px color-mix(in srgb, var(--g-live) 55%, transparent); }
body.control button { transition: background-color 160ms ease, color 160ms ease, box-shadow 220ms ease, transform 160ms cubic-bezier(.2,.8,.2,1); }
body.control button.take { box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--g-go) 70%, transparent); }
body.control button.on { box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--g-live) 70%, transparent); }
body.control input:focus, body.control select:focus, body.control textarea:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--g-ac) 20%, transparent); }
@media (hover: hover) and (pointer: fine) {
  body.control .item:not(.edit):hover, body.control .tile:hover { transform: translateY(-1px); box-shadow: var(--g-edge), 0 12px 24px -12px var(--g-glow), 0 0 0 1px color-mix(in srgb, var(--g-ac) 25%, transparent); }
  body.control .item.live:hover, body.control .tile.live:hover { box-shadow: inset 0 0 0 2px var(--g-live), 0 12px 28px -10px color-mix(in srgb, var(--g-live) 65%, transparent); }
  body.control button:not(:disabled):hover { box-shadow: 0 8px 18px -10px var(--g-glow); }
  body.control button.take:not(:disabled):hover { box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--g-go) 80%, transparent); transform: translateY(-1px); }
}
body.control .item:not(.edit):active, body.control button:not(:disabled):active { transform: scale(.985); transition-duration: 60ms; }
@media (prefers-reduced-motion: reduce) { body.control .item, body.control .tile, body.control button, body.control .card { transition-duration: 1ms; }
  body.control .item:hover, body.control .tile:hover, body.control button:hover { transform: none !important; } }


.mfs[data-k=tape3a], .mfs[data-k=tape3b], .mfs[data-k=tape3c] { opacity: 1; transform: none; transition: none; }
.t3 { position: absolute; inset: 0; --gold: #d9b25a; color: #fff; }
.t3c { position: absolute; left: 600px; width: 720px; top: 0; bottom: 0; z-index: 3; clip-path: inset(0 50% 0 50%); transition: clip-path 380ms cubic-bezier(.7,0,.2,1) 80ms; }
.t3.gold .t3c { background: #050505; border-left: 22px solid var(--gold); border-right: 22px solid var(--gold); }
.t3.glass .t3c { background: linear-gradient(rgba(0,0,0,.78), rgba(0,0,0,.55) 60%, rgba(0,0,0,.2)); }
.t3l { height: 190px; display: flex; align-items: center; justify-content: center; }
.t3.gold .t3l { border-bottom: 4px solid var(--gold); } .t3.glass .t3l { height: 160px; }
.t3l img { height: 120px; max-width: 520px; object-fit: contain; }
.t3t { font-family: var(--mfont); font-size: 78px; letter-spacing: .04em; text-align: center; padding: 22px 0 0; text-transform: uppercase; line-height: 1; }
.t3t small { display: block; font-family: var(--mtext); font-size: 30px; letter-spacing: .35em; color: #cdb98a; margin-top: 6px; }
.t3rs { margin: 18px 24px 0; }
.t3.glass .t3rs { margin: 14px 40px 0; display: grid; gap: 12px; }
.t3r { display: grid; grid-template-columns: 1fr 250px 1fr; align-items: center; text-align: center; font-size: 62px; font-weight: 600; color: #fff; opacity: 0; transform: translateX(-26px); transition: opacity 200ms ease, transform 240ms ease; }
.t3.gold .t3r { border-top: 2px solid #ffffff18; } .t3.gold .t3r:nth-child(odd) { background: #ffffff0a; }
.t3.glass .t3r { background: rgba(70,74,84,.62); }
.t3r span { text-transform: uppercase; white-space: nowrap; }
.t3r b { font-family: var(--mfont); font-weight: 400; font-size: 32px; letter-spacing: .16em; color: #cdb98a; }
.t3ph { position: absolute; bottom: 0; height: 900px; width: 640px; z-index: 5; opacity: 0; transition: transform 340ms cubic-bezier(.55,0,.85,.35), opacity 260ms ease;
  -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.t3ph.L { left: 20px; transform: translateX(-125%); } .t3ph.R { right: 20px; transform: translateX(125%); }
.t3ph img { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; }
.t3n { position: absolute; bottom: 70px; width: 560px; z-index: 8; text-shadow: 0 3px 14px #000; opacity: 0; transform: translateY(16px); transition: opacity 200ms ease, transform 240ms ease; }
.t3n.L { left: 60px; text-align: left; } .t3n.R { right: 60px; text-align: right; }
.t3n small { display: block; font-size: 34px; letter-spacing: .3em; color: #f2e4bd; text-transform: uppercase; }
.t3n b { color: #fff; display: block; font-family: var(--mfont); font-weight: 400; font-size: 104px; line-height: .9; letter-spacing: .03em; text-transform: uppercase; border-bottom: 3px solid #fff; padding-bottom: 14px; margin-bottom: 12px; white-space: nowrap; overflow: hidden; }
.t3n i { font-style: normal; font-size: 34px; letter-spacing: .2em; font-weight: 600; text-transform: uppercase; display: inline-block; padding: 4px 16px; background: rgba(0,0,0,.65); border-bottom: 4px solid var(--c); }
.mfs.in .t3c { clip-path: inset(0 0 0 0); transition: clip-path 700ms cubic-bezier(.7,0,.2,1); }
.mfs.in .t3r { opacity: 1; transform: none; transition: opacity 450ms ease calc(520ms + var(--r, 0) * 90ms), transform 650ms cubic-bezier(.2,.9,.25,1) calc(520ms + var(--r, 0) * 90ms); }
.mfs.in .t3ph { opacity: 1; transform: none; transition: transform 900ms cubic-bezier(.2,.9,.2,1) 700ms, opacity 450ms ease 700ms; }
.mfs.in .t3n { opacity: 1; transform: none; transition: opacity 500ms ease 1100ms, transform 700ms cubic-bezier(.2,.9,.25,1) 1100ms; }


.t3.blue .t3c { background: #050505; border-left: 0; border-right: 0; width: 680px; left: 620px; overflow: hidden; }
.t3.blue .t3c::before, .t3.blue .t3c::after { content: ""; position: absolute; top: 0; bottom: 0; width: 6px; background: #2f6bff; box-shadow: 0 0 14px rgba(47,107,255,.8); z-index: 4; }
.t3.blue .t3c::before { left: 0; } .t3.blue .t3c::after { right: 0; }
.t3.blue .t3l { border-bottom: 4px solid #2f6bff; } .t3.blue .t3r b, .t3.blue .t3t small { color: #9fbcff; }
.t3.blue .t3r { border-top: 2px solid #ffffff18; } .t3.blue .t3r:nth-child(odd) { background: #ffffff0a; }
.t3.blue .t3rs { margin: 18px 24px 0; }
.t3.blue .t3c i.rl { position: absolute; width: 6px; height: 460px; z-index: 5; background: linear-gradient(transparent, #6f9bff 40%, #fff 62%, transparent); filter: blur(1px); animation: t3runD 4800ms linear infinite; }
.t3.blue .t3c i.rl.l { left: 0; animation-name: t3runU; } .t3.blue .t3c i.rl.r { right: 0; }
@keyframes t3runD { from { top: -460px; } to { top: 1080px; } } @keyframes t3runU { from { top: 1080px; } to { top: -460px; } }
.t3.blue .t3c .tl, .t3.blue .t3c .bl { position: absolute; left: 0; right: 0; height: 6px; background: #2f6bff; z-index: 4; } .t3.blue .t3c .tl { top: 0; } .t3.blue .t3c .bl { bottom: 0; }


body.lite *, body.lite *::before, body.lite *::after { filter: none !important; backdrop-filter: none !important; mix-blend-mode: normal !important; text-shadow: none !important; }
body.lite .smoke, body.lite .smoke::after, body.lite .opn .glow, body.lite .opn .sheen, body.lite .hx-run, body.lite .t3c i.rl { display: none !important; }
body.lite .tp .hx.opn { animation: none !important; }


.hx, .fside, .clk .bar { filter: none !important; }