.dm-bot-plate { font-family: var(--k-font-body); font-weight: 900; font-size: 8.6px; letter-spacing: .08em; fill: #3A2606; }
.dm-eye { fill: rgba(127, 231, 255, .12); stroke: #7FE7FF; stroke-width: 2.2; filter: drop-shadow(0 0 3px rgba(127, 231, 255, .9)); }
.dm-eye.is-hit { fill: #E6FCFF; stroke: #FFFFFF; }
.dm-col-mouth { fill: #3A3470; }
.dm-collector.is-suck .dm-col-mouth { fill: #7FE7FF; filter: drop-shadow(0 0 4px #7FE7FF); }

.dm-b-bullet, .dm-b-flash, .dm-b-note, .dm-b-burst, .dm-b-shot, .dm-b-finger, .dm-b-perfect, .dm-b-hit, .dm-b-gauge-cut { transform-box: view-box; }
.dm-b-bullet { transform: translate(164px, 112px); }
.dm-b-note { transform: translate(186px, 300px); }
.dm-b-flash, .dm-b-burst, .dm-b-shot, .dm-b-hit, .dm-b-perfect { opacity: 0; }
.dm-b-burst { transform-origin: 194px 372px; }
.dm-b-label { font-family: var(--k-font-body); font-weight: 700; font-size: 10.5px; letter-spacing: .08em; fill: #CFC8FF; }
.dm-b-finger { transform: translate(0, -10px); }
.dm-b-hex { transform-box: fill-box; transform-origin: center; }
.dm-b-judge { fill: #0C0920; stroke: #C9C2FF; stroke-width: 2.4; }
.dm-b-judge-on { stroke: #7FE7FF; }
.dm-b-perfect { font-family: var(--k-font-body); font-weight: 900; font-size: 13px; letter-spacing: .12em; fill: #FFE9A8; }
.dm-b-shot { stroke-dasharray: 340; stroke-dashoffset: 340; }
.dm-b-gauge-cut { transform-origin: 224px 0; transform: scaleX(0); }

.dm-rule-body.is-play .dm-b-bullet { animation: dm-b-bullet 4.8s linear infinite; }
.dm-rule-body.is-play .dm-b-flash { animation: dm-b-flash 4.8s var(--ease-out) infinite; }
.dm-rule-body.is-play .dm-b-note { animation: dm-b-note 4.8s linear infinite; }
.dm-rule-body.is-play .dm-b-finger { animation: dm-b-finger 4.8s var(--ease-out) infinite; }
.dm-rule-body.is-play .dm-b-burst { animation: dm-b-burst 4.8s var(--ease-out) infinite; }
.dm-rule-body.is-play .dm-b-shot { animation: dm-b-shot 4.8s var(--ease-out) infinite; }
.dm-rule-body.is-play .dm-b-perfect { animation: dm-b-perfect 4.8s var(--ease-out) infinite; }
.dm-rule-body.is-play .dm-b-hit { animation: dm-b-hit 4.8s var(--ease-out) infinite; }
.dm-rule-body.is-play .dm-b-gauge-cut { animation: dm-b-gauge 4.8s var(--ease-out) infinite; }
.dm-rule-body.is-play .dm-b-hex { animation: dm-spin 9.6s linear infinite; }
.dm-rule-body.is-play .dm-step { animation: dm-step 4.8s linear infinite; }
.dm-rule-body.is-play .dm-step-2 { animation-name: dm-step-2; }
.dm-rule-body.is-play .dm-step-3 { animation-name: dm-step-3; }
.dm-rule-body.is-play .dm-step-4 { animation-name: dm-step-4; }

@keyframes dm-b-bullet {
  0% { transform: translate(160px, 78px) scale(.6); opacity: 0; }
  4% { opacity: 1; }
  22% { transform: translate(168px, 150px) scale(1); opacity: 1; }
  23%, 100% { transform: translate(168px, 152px) scale(1); opacity: 0; }
}
@keyframes dm-b-flash {
  0%, 21% { transform: translate(168px, 150px) scale(.4); opacity: 0; }
  23% { transform: translate(168px, 150px) scale(1.1); opacity: 1; }
  32%, 100% { transform: translate(168px, 150px) scale(1.6); opacity: 0; }
}
@keyframes dm-b-note {
  0%, 21% { transform: translate(168px, 150px) scale(.6); opacity: 0; }
  24% { transform: translate(170px, 162px) scale(.7); opacity: 1; }
  52% { transform: translate(194px, 372px) scale(1.1); opacity: 1; }
  53%, 100% { transform: translate(194px, 372px) scale(1.1); opacity: 0; }
}
@keyframes dm-b-finger {
  0%, 44% { transform: translate(0, -14px); opacity: .9; }
  52% { transform: translate(0, 6px); opacity: 1; }
  60% { transform: translate(0, -6px); opacity: 1; }
  100% { transform: translate(0, -14px); opacity: .9; }
}
@keyframes dm-b-burst {
  0%, 51% { transform: scale(.6); opacity: 0; }
  53% { transform: scale(.9); opacity: 1; }
  66%, 100% { transform: scale(1.8); opacity: 0; }
}
@keyframes dm-b-shot {
  0%, 52% { stroke-dashoffset: 340; opacity: 0; }
  54% { opacity: 1; }
  66% { stroke-dashoffset: 0; opacity: 1; }
  76%, 100% { stroke-dashoffset: -340; opacity: 0; }
}
@keyframes dm-b-perfect {
  0%, 52% { transform: translateY(6px); opacity: 0; }
  56% { transform: translateY(0); opacity: 1; }
  78% { transform: translateY(-4px); opacity: 1; }
  88%, 100% { transform: translateY(-8px); opacity: 0; }
}
@keyframes dm-b-hit { 0%, 64% { opacity: 0; } 67% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes dm-b-gauge { 0%, 64% { transform: scaleX(0); } 72%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes dm-spin { to { transform: rotate(360deg); } }
@keyframes dm-step { 0%, 21% { border-color: rgba(232, 196, 106, .7); background-color: rgba(48, 38, 104, .8); } 25%, 100% { border-color: var(--k-line); background-color: var(--dm-panel); } }
@keyframes dm-step-2 { 0%, 21% { border-color: var(--k-line); background-color: var(--dm-panel); } 23%, 48% { border-color: rgba(232, 196, 106, .7); background-color: rgba(48, 38, 104, .8); } 52%, 100% { border-color: var(--k-line); background-color: var(--dm-panel); } }
@keyframes dm-step-3 { 0%, 48% { border-color: var(--k-line); background-color: var(--dm-panel); } 50%, 62% { border-color: rgba(232, 196, 106, .7); background-color: rgba(48, 38, 104, .8); } 66%, 100% { border-color: var(--k-line); background-color: var(--dm-panel); } }
@keyframes dm-step-4 { 0%, 62% { border-color: var(--k-line); background-color: var(--dm-panel); } 65%, 94% { border-color: rgba(232, 196, 106, .7); background-color: rgba(48, 38, 104, .8); } 98%, 100% { border-color: var(--k-line); background-color: var(--dm-panel); } }

.dm-o-note, .dm-o-finger, .dm-o-burst, .dm-o-shot, .dm-o-trail, .dm-o-count, .dm-o-spin, .dm-o-trace, .dm-o-big, .dm-o-bullets { transform-box: view-box; }
.dm-o-burst { fill: none; stroke: var(--op); stroke-width: 3; opacity: 0; transform-origin: 0 0; }
.dm-op-tap .dm-o-burst, .dm-op-mash .dm-o-burst { transform-origin: 75px 118px; }
.dm-op-hold .dm-o-burst { transform-origin: 125px 118px; }
.dm-o-shot { stroke: #E6FCFF; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 120; stroke-dashoffset: 120; opacity: 0; }
.dm-o-trail { stroke: var(--dm-flick); stroke-width: 6; stroke-linecap: round; opacity: 0; }
.dm-o-count { font-family: var(--k-font-body); font-weight: 900; font-size: 16px; fill: var(--dm-mash); opacity: 0; }
.dm-o-trace { fill: none; stroke: var(--dm-circle); stroke-width: 3; stroke-dasharray: 214; stroke-dashoffset: 214; opacity: .9; transform-origin: 100px 88px; transform: rotate(-90deg); }
.dm-o-spin { transform-origin: 100px 88px; }
.dm-op-circle .dm-o-finger { transform: translate(0, 0); }
.dm-o-big { fill: #FFF3A0; opacity: 0; transform-origin: 100px 88px; }

.dm-op-tap .dm-o-note { transform: translate(0, 36px); }
.dm-op-hold .dm-o-note { transform: translate(0, 60px); }
.dm-op-flick .dm-o-note { transform: translate(0, 60px); }
.dm-op-slide .dm-o-note { transform: translate(0, 106px); }
.dm-op-mash .dm-o-note { transform: translate(0, 80px); }
.dm-op-circle .dm-o-note { transform: translate(0, 60px); }
.dm-op-spread .dm-o-note { transform: translate(0, 70px); }

.dm-op.is-play .dm-o-note, .dm-op.is-play .dm-o-finger, .dm-op.is-play .dm-o-burst, .dm-op.is-play .dm-o-shot,
.dm-op.is-play .dm-o-trail, .dm-op.is-play .dm-o-count, .dm-op.is-play .dm-o-spin, .dm-op.is-play .dm-o-trace,
.dm-op.is-play .dm-o-big, .dm-op.is-play .dm-o-bullets { animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: linear; }
.dm-op.is-play .dm-o-burst, .dm-op.is-play .dm-o-shot, .dm-op.is-play .dm-o-count, .dm-op.is-play .dm-o-big { animation-timing-function: var(--ease-out); }

.dm-op-tap.is-play .dm-o-note { animation-name: dm-tap-note; }
.dm-op-tap.is-play .dm-o-finger { animation-name: dm-tap-finger; animation-timing-function: var(--ease-out); }
.dm-op-tap.is-play .dm-o-burst { animation-name: dm-burst-50; }
.dm-op-tap.is-play .dm-o-shot { animation-name: dm-shot-50; }
@keyframes dm-tap-note { 0% { transform: translate(0, 34px); opacity: 0; } 6% { opacity: 1; } 50% { transform: translate(0, 118px); opacity: 1; } 51%, 100% { transform: translate(0, 118px); opacity: 0; } }
@keyframes dm-tap-finger { 0%, 42% { transform: translate(0, -10px); } 50% { transform: translate(0, 2px); } 60%, 100% { transform: translate(0, -10px); } }
@keyframes dm-burst-50 { 0%, 49% { transform: scale(.6); opacity: 0; } 51% { transform: scale(.9); opacity: 1; } 66%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes dm-shot-50 { 0%, 50% { stroke-dashoffset: 120; opacity: 0; } 52% { opacity: 1; } 62% { stroke-dashoffset: 0; opacity: 1; } 72%, 100% { stroke-dashoffset: -120; opacity: 0; } }

.dm-op-hold.is-play .dm-o-note { animation-name: dm-hold-note; }
.dm-op-hold.is-play .dm-o-finger { animation-name: dm-hold-finger; }
.dm-op-hold.is-play .dm-o-burst { animation-name: dm-hold-burst; }
@keyframes dm-hold-note { 0% { transform: translate(0, 30px); } 30% { transform: translate(0, 118px); } 72% { transform: translate(0, 196px); } 100% { transform: translate(0, 196px); } }
@keyframes dm-hold-finger { 0%, 24% { transform: translate(0, -10px); } 30%, 72% { transform: translate(0, 2px); } 80%, 100% { transform: translate(0, -10px); } }
@keyframes dm-hold-burst { 0%, 29% { transform: scale(.8); opacity: 0; } 32%, 70% { transform: scale(1.15); opacity: .9; } 76%, 100% { transform: scale(1.8); opacity: 0; } }

.dm-op-flick.is-play .dm-o-note { animation-name: dm-flick-note; }
.dm-op-flick.is-play .dm-o-finger { animation-name: dm-flick-finger; animation-timing-function: var(--ease-out); }
.dm-op-flick.is-play .dm-o-trail { animation-name: dm-flick-trail; animation-timing-function: var(--ease-out); }
@keyframes dm-flick-note { 0% { transform: translate(0, 34px); opacity: 0; } 6% { opacity: 1; } 48% { transform: translate(0, 112px); opacity: 1; } 60% { transform: translate(0, 20px); opacity: 0; } 100% { transform: translate(0, 20px); opacity: 0; } }
@keyframes dm-flick-finger { 0%, 40% { transform: translate(0, -10px); opacity: 1; } 47% { transform: translate(0, 2px); } 60% { transform: translate(0, -38px); opacity: .9; } 74%, 100% { transform: translate(0, -10px); opacity: 1; } }
@keyframes dm-flick-trail { 0%, 48% { opacity: 0; } 52% { opacity: .9; } 66%, 100% { opacity: 0; } }

.dm-op-slide.is-play .dm-o-note { animation-name: dm-slide-note; }
.dm-op-slide.is-play .dm-o-finger { animation-name: dm-slide-finger; }
@keyframes dm-slide-note { 0% { transform: translate(0, 106px); } 100% { transform: translate(0, 238px); } }
@keyframes dm-slide-finger { 0%, 8% { transform: translate(-50px, -10px); } 12% { transform: translate(-50px, 2px); } 30% { transform: translate(-50px, 2px); } 70% { transform: translate(0, 2px); } 90% { transform: translate(0, 2px); } 96%, 100% { transform: translate(0, -10px); } }

.dm-op-mash.is-play .dm-o-note { animation-name: dm-mash-note; }
.dm-op-mash.is-play .dm-o-finger { animation-name: dm-mash-finger; }
.dm-op-mash.is-play .dm-o-burst { animation-name: dm-mash-burst; }
.dm-op-mash.is-play .dm-o-count { animation-name: dm-mash-count; }
@keyframes dm-mash-note { 0% { transform: translate(0, 60px); } 100% { transform: translate(0, 250px); } }
@keyframes dm-mash-finger {
  0%, 24% { transform: translate(0, -10px); }
  27% { transform: translate(0, 2px); } 31% { transform: translate(0, -8px); } 35% { transform: translate(0, 2px); } 39% { transform: translate(0, -8px); }
  43% { transform: translate(0, 2px); } 47% { transform: translate(0, -8px); } 51% { transform: translate(0, 2px); } 55% { transform: translate(0, -8px); }
  59% { transform: translate(0, 2px); } 63% { transform: translate(0, -8px); } 67% { transform: translate(0, 2px); } 71%, 100% { transform: translate(0, -10px); }
}
@keyframes dm-mash-burst { 0%, 25% { transform: scale(.8); opacity: 0; } 28%, 68% { transform: scale(1.2); opacity: .9; } 74%, 100% { transform: scale(1.8); opacity: 0; } }
@keyframes dm-mash-count { 0%, 66% { transform: translateY(4px); opacity: 0; } 70%, 88% { transform: translateY(0); opacity: 1; } 96%, 100% { transform: translateY(-4px); opacity: 0; } }

.dm-op-circle.is-play .dm-o-note { animation-name: dm-circle-note; }
.dm-op-circle.is-play .dm-o-spin { animation-name: dm-circle-spin; animation-timing-function: var(--ease-in-out); }
.dm-op-circle.is-play .dm-o-trace { animation-name: dm-circle-trace; animation-timing-function: var(--ease-in-out); }
.dm-op-circle.is-play .dm-o-big { animation-name: dm-circle-big; }
@keyframes dm-circle-note { 0% { transform: translate(0, 34px); opacity: 0; } 6% { opacity: 1; } 34% { transform: translate(0, 118px); opacity: 1; } 40%, 100% { transform: translate(0, 118px); opacity: 0; } }
@keyframes dm-circle-spin { 0%, 34% { transform: rotate(0deg); } 74% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } }
@keyframes dm-circle-trace { 0%, 34% { stroke-dashoffset: 214; opacity: .9; } 74% { stroke-dashoffset: 0; opacity: .9; } 86%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes dm-circle-big { 0%, 74% { transform: translateY(0) scale(.6); opacity: 0; } 78% { transform: translateY(-10px) scale(1); opacity: 1; } 96%, 100% { transform: translateY(-96px) scale(.7); opacity: 0; } }

.dm-op-spread.is-play .dm-o-note { animation-name: dm-spread-note; }
.dm-op-spread.is-play .dm-o-finger-a { animation-name: dm-spread-a; animation-timing-function: var(--ease-out); }
.dm-op-spread.is-play .dm-o-finger-b { animation-name: dm-spread-b; animation-timing-function: var(--ease-out); }
.dm-op-spread.is-play .dm-o-bullets { animation-name: dm-spread-bullets; }
@keyframes dm-spread-note { 0% { transform: translate(0, 30px); opacity: 0; } 6% { opacity: 1; } 46% { transform: translate(0, 118px); opacity: 1; } 54%, 100% { transform: translate(0, 118px) scaleX(1.06); opacity: 0; } }
@keyframes dm-spread-a { 0%, 40% { transform: translate(0, -10px); } 46% { transform: translate(0, 2px); } 60% { transform: translate(-56px, 2px); } 76%, 100% { transform: translate(0, -10px); } }
@keyframes dm-spread-b { 0%, 40% { transform: translate(0, -10px); } 46% { transform: translate(0, 2px); } 60% { transform: translate(56px, 2px); } 76%, 100% { transform: translate(0, -10px); } }
@keyframes dm-spread-bullets { 0%, 46% { opacity: 1; transform: translateY(0); } 58% { opacity: 0; transform: translateY(-14px); } 90% { opacity: 0; transform: translateY(0); } 100% { opacity: 1; transform: translateY(0); } }

.dm-op-tap .dm-o-finger, .dm-op-flick .dm-o-finger, .dm-op-mash .dm-o-finger { transform: translate(0, -10px); }
.dm-op-hold .dm-o-finger { transform: translate(0, -10px); }
.dm-op-slide .dm-o-finger { transform: translate(-50px, -10px); }
.dm-op-spread .dm-o-finger { transform: translate(0, -10px); }

html.js:not(.dm-still) .dm-stages.is-on .dm-beat { animation: dm-beat calc(60s / var(--bpm)) var(--ease-out) infinite; }
@keyframes dm-beat { 0% { transform: scale(1.5); opacity: 1; } 40%, 100% { transform: scale(1); opacity: .45; } }

html.js:not(.dm-still) [data-dm-reveal] { opacity: 0; transform: translateY(16px); }
html.js:not(.dm-still) [data-dm-reveal].is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: var(--dm-delay, 0ms); }

@media (prefers-reduced-motion: reduce) {
  .dm-op .dm-o-note { opacity: 1; }
  .dm-op-tap .dm-o-note { transform: translate(0, 112px); }
  .dm-op-tap .dm-o-finger { transform: translate(0, 0); }
  .dm-op-hold .dm-o-note { transform: translate(0, 140px); }
  .dm-op-hold .dm-o-finger { transform: translate(0, 2px); }
  .dm-op-flick .dm-o-note { transform: translate(0, 108px); }
  .dm-op-flick .dm-o-trail { opacity: .8; }
  .dm-op-slide .dm-o-note { transform: translate(0, 172px); }
  .dm-op-slide .dm-o-finger { transform: translate(-26px, 2px); }
  .dm-op-mash .dm-o-note { transform: translate(0, 150px); }
  .dm-op-mash .dm-o-count { opacity: 1; }
  .dm-op-circle .dm-o-note { transform: translate(0, 118px); }
  .dm-op-circle .dm-o-trace { stroke-dashoffset: 40; }
  .dm-op-circle .dm-o-spin { transform: rotate(280deg); }
  .dm-op-spread .dm-o-note { transform: translate(0, 118px); }
  .dm-op-spread .dm-o-finger-a { transform: translate(-40px, 2px); }
  .dm-op-spread .dm-o-finger-b { transform: translate(40px, 2px); }
  .dm-b-note { transform: translate(194px, 300px); opacity: 1; }
  .dm-b-bullet { transform: translate(176px, 108px); opacity: 1; }
}