#rz-home-entry{width:100%;font-family:"Noto Sans TC","Noto Sans CJK TC","Microsoft JhengHei",Arial,sans-serif;color:#f3f9ff;color-scheme:dark;container-type:inline-size}
#rz-home-entry *{box-sizing:border-box}
#rz-home-entry .rz-game{--stats-height:clamp(24px,2.75cqw,36px);position:relative;isolation:isolate;aspect-ratio:16/9;overflow:hidden;background:#020b20;line-height:1.25}
#rz-home-entry button{font:inherit;color:inherit;background:none;border:0;padding:0;touch-action:manipulation;cursor:pointer}
#rz-home-entry button:focus-visible{outline:2px solid #f1fdff;outline-offset:3px}
#rz-home-entry .scene{position:absolute;inset:0 0 var(--stats-height);overflow:hidden;background:#041635}
#rz-home-entry .plate,#rz-home-entry .team,#rz-home-entry .fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#rz-home-entry .plate,#rz-home-entry .team{object-fit:cover;object-position:45% top}
#rz-home-entry .fx{overflow:hidden}
#rz-home-entry .fx svg{width:100%;height:100%;display:block}
#rz-home-entry .trail{stroke-linecap:round;fill:none;animation:rzLap 5.6s linear infinite;opacity:.85}
#rz-home-entry .trail.b{animation-delay:-3s;animation-duration:7.3s}
#rz-home-entry .blade{position:absolute;width:13%;height:.3%;background:linear-gradient(90deg,transparent,#39beff 64%,#c5ffff);transform:rotate(-32deg);animation:rzJet 3.8s linear infinite}
#rz-home-entry .dots{position:absolute;inset:0 0 0 auto;width:28%;opacity:.18;background:radial-gradient(#78d4ff 1px,transparent 1.65px) 0 0/7px 7px;mask-image:linear-gradient(125deg,transparent 40%,black 83%,transparent);animation:rzDots 4.8s linear infinite}
#rz-home-entry .speck{position:absolute;height:.42%;width:.23%;border-radius:80%;background:#7cffff;box-shadow:0 0 4px #19b5ff;animation:rzSpark var(--dur) linear infinite;animation-delay:var(--delay);opacity:0}
#rz-home-entry .rz-header{position:absolute;inset:0 0 auto;height:15%;display:flex;align-items:center;justify-content:space-between;padding:0 1.8% 0 3.1%;pointer-events:none}
#rz-home-entry .brand{display:block;flex:none;width:19.1cqw;height:auto}
#rz-home-entry .tools{position:relative;display:flex;gap:.65cqw;pointer-events:auto}
#rz-home-entry .utility{display:flex;align-items:center;gap:.5cqw;border:1px solid #40b5d4;padding:.25cqw .75cqw;background:#06172e;color:#dffaff;font-size:1.32cqw;font-weight:700;transform:skew(-13deg);transition:background .18s}
#rz-home-entry .utility:hover,#rz-home-entry .utility:focus-visible{background:#145072}
#rz-home-entry .utility span{transform:skew(13deg)}
#rz-home-entry .modes{position:absolute;left:1.85%;top:20%;width:29.1%;display:flex;flex-direction:column;gap:1.22cqw}
#rz-home-entry .entry{position:relative;width:100%;height:4.52cqw;--i:0}
#rz-home-entry .mode,#rz-home-entry .rank{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;height:100%;padding:0 2.3cqw 0 3.1cqw;isolation:isolate;text-align:left}
#rz-home-entry .mode:before,#rz-home-entry .rank:before,#rz-home-entry .rank:after{content:"";position:absolute;inset:0;z-index:-2;clip-path:polygon(5.4% 0,100% 0,94.6% 100%,0 100%);background:linear-gradient(110deg,#102e69,#0b2253 68%,#092353)}
#rz-home-entry .mode:disabled{cursor:default}
#rz-home-entry .mode b,#rz-home-entry .rank b{font-size:2.8cqw;font-style:italic;font-weight:900;letter-spacing:.05em;white-space:nowrap}
#rz-home-entry .mode .state{display:flex;align-items:center;gap:.65cqw;font-size:1.18cqw;font-style:italic;font-weight:650;color:#a9c2e2}
#rz-home-entry .lock{display:inline-block;position:relative;width:.87cqw;height:.75cqw;background:#abc1de;border-radius:.1cqw}
#rz-home-entry .lock:before{content:"";position:absolute;left:14%;top:-55%;width:72%;height:75%;box-sizing:border-box;border:.13cqw solid #abc1de;border-radius:.32cqw .32cqw 0 0}
#rz-home-entry .primary{color:#05142b}
#rz-home-entry .primary:before{background:linear-gradient(110deg,#efffff 3%,#e6fdff 54%,#70f2fc);animation:rzVersusPulse 3.2s ease-in-out infinite}
@keyframes rzVersusPulse{0%,100%{filter:brightness(.945)}50%{filter:brightness(1.035)}}
#rz-home-entry .quiet .primary:before{animation:none}
@media(prefers-reduced-motion:reduce){#rz-home-entry .primary:before{animation:none!important}}
#rz-home-entry .act .shine{position:absolute;inset:0;z-index:-1;overflow:hidden;clip-path:polygon(5.4% 0,100% 0,94.6% 100%,0 100%)}
#rz-home-entry .act .shine:after{content:"";position:absolute;inset:-40% -25%;background:linear-gradient(110deg,transparent 40%,#fff 48%,#b0ffff 51%,transparent 57%);opacity:0;transform:translateX(-70%)}
#rz-home-entry .act:is(:hover,:focus-visible) .shine:after{animation:rzButton .58s ease-out both}
#rz-home-entry .act:active{transform:translateY(1px)}
#rz-home-entry .arrow{width:2.15cqw;height:.31cqw;background:currentColor;position:relative;display:inline-block;transition:transform .19s}
#rz-home-entry .arrow:after{content:"";position:absolute;right:.1cqw;top:50%;height:1.05cqw;width:1.05cqw;border-top:.28cqw solid currentColor;border-right:.28cqw solid currentColor;transform:translateY(-50%) rotate(45deg)}
#rz-home-entry .act:is(:hover,:focus-visible) .arrow{transform:translateX(.64cqw)}
#rz-home-entry .rankentry{margin-top:.45cqw}
#rz-home-entry .rank{color:#60eafa}
#rz-home-entry .rank b{color:#ecfaff;font-size:2.4cqw;display:inline-flex;gap:.8cqw;align-items:center}
#rz-home-entry .rank:before{background:#31d9e9}
#rz-home-entry .rank:after{inset:2px 3px;background:#061831;z-index:-1}
#rz-home-entry .cup{display:inline-block;font-family:Arial,sans-serif;font-style:normal;color:#4fe4f1}
#rz-home-entry footer{position:absolute;bottom:0;height:var(--stats-height);width:100%;display:flex;align-items:center;justify-content:space-evenly;border-top:1px solid #265173;background:linear-gradient(100deg,#061734,#031128 85%);font-size:clamp(10px,1.05cqw,13px);line-height:1.15}
#rz-home-entry footer .stat{display:flex;align-items:center;gap:.55cqw;color:#bed0e2;white-space:nowrap}
#rz-home-entry footer .stat-value{display:inline-flex;align-items:center;gap:.5em}
#rz-home-entry footer b{font:600 clamp(12px,1.3cqw,16px)/1.15 Arial,sans-serif;font-variant-numeric:tabular-nums;color:#dfedf8}
#rz-home-entry footer .divider{width:1px;height:30%;background:#396483;transform:skew(-18deg)}
#rz-home-entry footer small{font-size:clamp(8px,.78cqw,10px);color:#9aadc2;white-space:nowrap}
#rz-home-entry .live{position:relative;width:clamp(3px,.4cqw,5px);height:clamp(3px,.4cqw,5px);border-radius:100%;background:#2ff3bd}
#rz-home-entry .live:after{content:"";position:absolute;inset:-78%;border:1px solid #29d3b0;border-radius:100%;animation:rzLive 2.8s ease-out infinite}
#rz-home-entry .enter .team{animation:rzTeam .74s cubic-bezier(.18,.72,.25,1) both}
#rz-home-entry .enter .entry{animation:rzEntry .5s cubic-bezier(.2,.73,.25,1) both;animation-delay:calc(.055s * var(--i))}
#rz-home-entry .enter .brand{animation:rzEntry .45s both}
#rz-home-entry .curtain{position:absolute;inset:0;z-index:12;pointer-events:none;opacity:0;background:linear-gradient(109deg,transparent 0 24%,#1a55e0 24% 28%,#76f6fa 28% 29%,#07182e 29% 73%,#40e5f7 73% 76%,transparent 76%);transform:scaleX(2.5) translateX(-84%)}
#rz-home-entry .swipe{animation:rzCut .68s cubic-bezier(.65,.06,.3,.96) both}
#rz-home-entry .sheet{position:absolute;z-index:8;inset:0;display:grid;place-items:center;background:linear-gradient(100deg,#020919fb,#061630e8);color:#f4fbff}
#rz-home-entry [hidden]{display:none!important}
#rz-home-entry .sheetbox{width:min(75%,820px);padding:2.4cqw 0;border-top:2px solid #56dfea;border-bottom:1px solid #335473}
#rz-home-entry .sheet h2{font-size:3.6cqw;font-style:italic;margin:0 0 1.1cqw}
#rz-home-entry .sheet p{font-size:1.45cqw;color:#bbcee5;margin:1.3cqw 0}
#rz-home-entry .sheet button{display:inline-flex;align-items:center;gap:.4em;background:#102746;border:1px solid #366582;padding:.6em 1.2em;margin:.4em .5em .3em 0;font-size:1.45cqw}
#rz-home-entry .sheet button:is(:hover,:focus-visible),#rz-home-entry .sheet button[aria-pressed="true"]{border-color:#57edf1;color:#80fbff}
#rz-home-entry .sheet .back{margin-top:1.8cqw}
#rz-home-entry .quiet :is(.trail,.dots,.speck,.blade,.live:after){animation:none!important}
#rz-home-entry .quiet .entry,#rz-home-entry .quiet .team,#rz-home-entry .quiet .brand{animation:none!important}
@keyframes rzLap{from{stroke-dashoffset:1190}to{stroke-dashoffset:0}}
@keyframes rzJet{0%{opacity:0;translate:-8cqw 5cqw}18%{opacity:.85}53%,100%{opacity:0;translate:10cqw -6cqw}}
@keyframes rzDots{from{background-position:0 0}to{background-position:14px -7px}}
@keyframes rzSpark{0%{opacity:0;translate:-1cqw .8cqw}20%{opacity:.82}70%,100%{opacity:0;translate:4cqw -2.6cqw}}
@keyframes rzButton{0%{opacity:0;transform:translateX(-65%)}20%{opacity:.78}100%{opacity:0;transform:translateX(65%)}}
@keyframes rzLive{0%{transform:scale(.5);opacity:.85}80%,100%{transform:scale(1.95);opacity:0}}
@keyframes rzTeam{from{opacity:.15;transform:translate(1.7%,1%) scale(.992)}to{opacity:1;transform:none}}
@keyframes rzEntry{from{opacity:.1;transform:translateX(-1.4cqw)}to{opacity:1;transform:none}}
@keyframes rzCut{0%{opacity:1;transform:scaleX(2.5) translateX(-84%)}42%{opacity:1;transform:scaleX(2.5) translateX(0)}100%{opacity:1;transform:scaleX(2.5) translateX(84%)}}
@media(prefers-reduced-motion:reduce){#rz-home-entry *,#rz-home-entry *:before,#rz-home-entry *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}}
@container(max-width:520px){
#rz-home-entry .rz-game{aspect-ratio:auto;min-height:530px;display:grid;grid-template-rows:54px auto 1fr auto}
#rz-home-entry .rz-header{position:relative;height:54px;grid-row:1;padding-inline:3%;background:#041029}
#rz-home-entry .brand{width:25cqw}
#rz-home-entry .tools{gap:6px}
#rz-home-entry .utility{font-size:12px;padding:0 2cqw;transform:none}
#rz-home-entry .scene{position:relative;inset:auto;grid-row:2;aspect-ratio:2.42;overflow:hidden}
#rz-home-entry .modes{position:relative;inset:auto;width:auto;grid-row:3;margin:10px 4%;gap:3px}
#rz-home-entry .entry{height:44px}
#rz-home-entry .mode b,#rz-home-entry .rank b{font-size:18px}
#rz-home-entry .mode .state{font-size:12px}
#rz-home-entry .mode,#rz-home-entry .rank{padding:0 7%}
#rz-home-entry .rankentry{margin-top:5px}
#rz-home-entry footer{position:relative;grid-row:4;height:auto;min-height:34px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:3px;padding:3px 2%;font-size:10px}
#rz-home-entry footer .stat{flex-direction:column;justify-content:center;gap:1px}
#rz-home-entry footer .divider{display:none}
#rz-home-entry footer b{font-size:12px}#rz-home-entry footer small{font-size:8px}
#rz-home-entry .sheetbox{width:90%;padding:20px 0}#rz-home-entry .sheet h2{font-size:28px}#rz-home-entry .sheet p,#rz-home-entry .sheet button{font-size:13px}
#rz-home-entry .sheet button{min-height:44px}
}
/* The pale keys read steeper than their dark neighbors; compensate for luminance and the rank border. */
#rz-home-entry .entry{--rise:4.52cqw;--inset:calc(var(--rise) * .263);height:var(--rise)}
#rz-home-entry .entry:first-child{--inset:calc(var(--rise) * .252)}
#rz-home-entry .rankentry{--inset:calc(var(--rise) * .275)}
#rz-home-entry .mode:before,#rz-home-entry .rank:before,#rz-home-entry .rank:after,#rz-home-entry .act .shine{
  clip-path:polygon(var(--inset) 0,100% 0,calc(100% - var(--inset)) 100%,0 100%)}
#rz-home-entry .rank:after{inset:1.5px 2px;--inset:calc((var(--rise) - 3px) * .275)}
#rz-home-entry .mode b,#rz-home-entry .rank b,#rz-home-entry .state{font-style:normal;transform:skewX(-10deg)}
#rz-home-entry .state .lock{transform:skewX(10deg)}
#rz-home-entry .entry .shine:after{background:linear-gradient(104.5deg,transparent 41%,#cffbff88 46%,#fff 49%,transparent 55%)}
#rz-home-entry .curtain{background:linear-gradient(104.3deg,transparent 0 24%,#1a55e0 24% 28%,#76f6fa 28% 29%,#07182e 29% 73%,#40e5f7 73% 76%,transparent 76%)}
#rz-home-entry footer .divider{transform:skewX(-14.8deg)}
#rz-home-entry footer{font-style:normal}
#rz-home-entry .rz-header{z-index:5}
#rz-home-entry .tools{gap:.65cqw;align-items:center}
#rz-home-entry .utility{position:relative;isolation:isolate;height:clamp(22px,2.52cqw,32px);min-width:0;gap:.36cqw;padding:0 .88cqw;
  font-size:clamp(10px,1.15cqw,16px);font-style:normal;background:transparent;border:0;transform:none}
#rz-home-entry .utility:before{content:"";position:absolute;inset:0;transform:skewX(-13deg);z-index:-1;background:#06172e;border:1px solid #46b4d1;transition:background .16s,border-color .16s}
#rz-home-entry .utility:is(:hover,:focus-visible,[aria-expanded="true"]):before{background:#11324f;border-color:#91f3fa}
#rz-home-entry .utility:is(:hover,:focus-visible){background:transparent}
#rz-home-entry .utility span{transform:none}
#rz-home-entry .note{position:relative;font:700 1.18em/1 Arial,sans-serif;color:#72ebfa}
#rz-home-entry .music-tool[data-audible="false"] .note{color:#adbecf}
#rz-home-entry .brand-lockup{display:block;position:absolute;pointer-events:none;left:46.7%;top:67.3%;width:34.2%;height:auto;max-width:none;animation:none}
#rz-home-entry .quiet :is(.trail,.dots,.speck,.blade,.live:after){animation:none!important}
#rz-home-entry .quiet .brand-lockup{animation:none;filter:none}
#rz-home-entry .audio-pop{position:absolute;z-index:7;right:0;top:calc(100% + 8px);width:clamp(204px,23cqw,274px);color:#eaf3ff;
  background:#091a32;border:1px solid #31536d;border-top:2px solid #68ddeb;box-shadow:0 10px 25px #010a1ebf;padding:12px 16px 13px;pointer-events:auto;line-height:1.24}
#rz-home-entry .mix-title,#rz-home-entry .play-row,#rz-home-entry .mix-label{display:flex;align-items:center;justify-content:space-between;gap:8px}
#rz-home-entry .mix-title h2{font-size:clamp(15px,1.6cqw,19px);font-weight:800;margin:0}
#rz-home-entry .mix-close{width:28px;height:28px;color:#a9c4d5;font:normal 23px/1 Arial,sans-serif}
#rz-home-entry .play-row{border-bottom:1px solid #244159;padding:7px 0 10px;margin:0 0 8px;font-size:13px;font-weight:700}
#rz-home-entry .bgm-switch{min-height:26px;display:inline-flex;align-items:center;gap:7px;color:#bcd0df;font-size:12px}
#rz-home-entry .toggle-track{position:relative;width:32px;height:16px;border:1px solid #7793a7;border-radius:14px;background:#1b3248}
#rz-home-entry .toggle-track:after{content:"";position:absolute;left:3px;top:3px;width:8px;height:8px;border-radius:50%;background:#b5c7d6;transition:transform .15s}
#rz-home-entry .bgm-switch[aria-checked="true"]{color:#78eeef}
#rz-home-entry .bgm-switch[aria-checked="true"] .toggle-track{background:#16515f;border-color:#69d8e4}
#rz-home-entry .bgm-switch[aria-checked="true"] .toggle-track:after{background:#a1ffff;transform:translateX(16px)}
#rz-home-entry .mix-row{display:block;margin:4px 0 3px}
#rz-home-entry .mix-label{font-size:clamp(12px,1.2cqw,14px);color:#d4e3ed}
#rz-home-entry .mix-label output{font:600 11px/1.2 Arial,sans-serif;letter-spacing:.04em;color:#94e0eb;font-variant-numeric:tabular-nums}
#rz-home-entry .mix-row input{appearance:none;display:block;width:100%;height:20px;padding:0;margin:0;background:transparent;accent-color:#7ae6f2;cursor:ew-resize}
#rz-home-entry .mix-row input::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,#60d3e4 0 var(--fill),#324b61 var(--fill) 100%);border-radius:4px}
#rz-home-entry .mix-row input::-webkit-slider-thumb{appearance:none;width:11px;height:11px;margin-top:-4px;background:#c7faff;border-radius:50%;border:0}
#rz-home-entry .mix-row input::-moz-range-track{height:3px;background:#324b61}
#rz-home-entry .mix-row input::-moz-range-progress{height:3px;background:#60d3e4}
#rz-home-entry .mix-row input::-moz-range-thumb{width:11px;height:11px;background:#c7faff;border:0;border-radius:50%}
#rz-home-entry .mix-row input:focus-visible{outline:2px solid #a0f5ff;outline-offset:1px}
#rz-home-entry .audio-error{font-size:12px;color:#ffd3a1;margin:6px 0 0}
@media(prefers-reduced-motion:reduce){#rz-home-entry .brand-lockup{animation:none!important;filter:none}}
@container(max-width:520px){
 #rz-home-entry .utility{height:28px;font-size:11px;padding:0 6px;gap:3px}
 #rz-home-entry .audio-pop{top:calc(100% + 6px);width:min(248px,90cqw);padding:10px 14px 12px}
 #rz-home-entry .entry{--rise:44px}
#rz-home-entry .scene{aspect-ratio:1.48}
 #rz-home-entry .scene>.plate,#rz-home-entry .scene>.team{object-fit:fill}
 #rz-home-entry .scene>.plate,#rz-home-entry .scene>.team,#rz-home-entry .scene>.fx{width:137%;height:104%;max-width:none;left:-37%;top:-1%}
 #rz-home-entry .scene>.brand-lockup{left:27%;top:68.9%;width:47%;height:auto}
}
@container(min-width:521px) and (max-width:730px){
 #rz-home-entry .audio-pop{padding:5px 12px 7px}
 #rz-home-entry .play-row{margin:0;padding:2px 0 5px}
 #rz-home-entry .mix-row{margin:2px 0}
 #rz-home-entry .mix-row input{height:15px}
}

/* One illuminated stroke follows the whole two-line mark. The last second is dark. */
#rz-home-entry .brand-lockup { --rz-cycle:6.25s; animation:none }
#rz-home-entry .rz-sweep { transform:translateX(-315px); animation:rzComboSweep var(--rz-cycle) linear infinite }
@keyframes rzComboSweep {
 0%,2.2% { transform:translateX(-315px) }
 17.7%,100% { transform:translateX(1300px) }
}
#rz-home-entry .rz-orbit { animation:rzOrbitFade var(--rz-cycle) linear infinite }
#rz-home-entry .rz-orbit-stroke {
 stroke-dasharray:var(--tail) calc(var(--distance) + 500px);
 stroke-dashoffset:var(--tail);
 animation:rzOrbitLap var(--rz-cycle) linear infinite;
}
@keyframes rzOrbitLap {
 0% { stroke-dashoffset:var(--tail) }
 84%,100% { stroke-dashoffset:calc(var(--tail) - var(--distance) - 210px) }
}
@keyframes rzOrbitFade {
 0%,84%,100% { opacity:0 }
 2%,79% { opacity:1 }
}
#rz-home-entry .quiet .rz-ornament {display:none}
@media (prefers-reduced-motion:reduce) {
  #rz-home-entry .rz-ornament {display:none}
}

#rz-home-entry .mute-all {border:1px solid #3f7897;background:#102845;color:#d4eff7;padding:.3em .7em}
#rz-home-entry .mute-all[aria-pressed=true]{color:#08243b;background:#95eaff}
#rz-home-entry [data-t=retry][hidden] {display:none}
#rz-home-entry:where(:lang(en),:lang(id)) .modes :is(.mode,.rank){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.9cqw;align-items:center}
#rz-home-entry:where(:lang(en),:lang(id)) .modes b{font-size:1.87cqw;letter-spacing:.005em;white-space:normal;line-height:1.05}
#rz-home-entry:where(:lang(en),:lang(id)) .modes .state{white-space:nowrap;font-size:1.04cqw;gap:.35cqw}
#rz-home-entry:where(:lang(en),:lang(id)) .modes .arrow{justify-self:end;flex:none}
@media(max-width:640px) and (orientation:portrait){
 #rz-home-entry:where(:lang(en),:lang(id)) .modes b{font-size:17px}
 #rz-home-entry:where(:lang(en),:lang(id)) .modes .state{font-size:11px}
}