@font-face { font-family: "Shippori Mincho B1"; font-weight: 800; font-display: swap;
  src: url("../fonts/shippori-mincho-b1-800.woff2") format("woff2"); unicode-range: U+0-10FFFF; }

html.svc-dm {
  --k-bg: #0B0918;
  --k-bg-alt: #120E28;
  --k-surface: #17123A;
  --k-ink: #F2F0FF;
  --k-ink-mid: #D2CEF0;
  --k-ink-sub: #ADA8D8;
  --k-line: rgba(176, 166, 255, .2);
  --k-line-strong: rgba(232, 196, 106, .55);
  --k-accent: #E8C46A;
  --k-accent-ink: #1E1503;
  --k-accent-soft: rgba(232, 196, 106, .14);
  --k-sub: #FF4D6D;
  --k-sub-soft: rgba(255, 77, 109, .16);
  --k-rs: 6px;
  --k-rm: 14px;
  --k-rl: 26px;
  --k-shadow-s: 0 1px 2px rgba(0, 0, 0, .45), 0 14px 26px -16px rgba(0, 0, 0, .8);
  --k-shadow-m: 0 2px 6px rgba(0, 0, 0, .45), 0 36px 64px -30px rgba(0, 0, 0, .9);
  --k-font-head: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --k-font-body: "Zen Kaku Gothic New", var(--k-gothic);
  --k-font-en: "Zen Kaku Gothic New", var(--k-gothic);
  --k-head-w: 800;
  --k-head-ls: .06em;
  --k-body-ls: .04em;
  --k-lh: 1.9;
  --k-border-w: 1px;
  --dm-tap: #7FE7FF;
  --dm-hold: #FFD166;
  --dm-flick: #FF6BD6;
  --dm-slide: #6DFF9E;
  --dm-mash: #FF9248;
  --dm-circle: #FFF3A0;
  --dm-spread: #FFFFFF;
  --dm-bullet: #FF4D6D;
  --dm-line: #E9E4FF;
  --dm-panel: rgba(22, 17, 54, .78);
  --dm-gold-line: rgba(232, 196, 106, .42);
  color-scheme: dark;
  background: var(--k-bg);
}
html.svc-dm body { color: var(--k-ink); background: var(--k-bg); }

.dm-main { overflow-x: clip; background: var(--k-bg); }
.dm-wrap { width: min(100% - 2 * var(--k-gutter), var(--k-max)); margin-inline: auto; }
.dm-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.dm-hero {
  --ph-w: clamp(250px, calc((100svh - var(--head-h) - 120px) / 2.07), 330px);
  --ph-b: calc(var(--ph-w) * .04);
  --ph-sh: calc((var(--ph-w) - 2 * var(--ph-b)) * 2.1625);
  --line-y: calc(var(--ph-b) + var(--ph-sh) * .37);
  position: relative; z-index: 1; isolation: isolate; overflow: clip;
  padding: var(--k-sp-4) 0 var(--k-sp-5);
  background:
    radial-gradient(70% 60% at 74% 8%, rgba(126, 24, 64, .55) 0, rgba(126, 24, 64, 0) 70%),
    radial-gradient(60% 50% at 50% 42%, rgba(84, 56, 186, .35) 0, rgba(84, 56, 186, 0) 70%),
    linear-gradient(180deg, #1C1340 0, #120D2C 55%, #0B0918 100%);
}
.dm-city {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: -3; height: clamp(180px, 30vw, 360px);
  background: url("danmaku-mania/city.svg") center bottom / cover no-repeat; opacity: .8;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 45%); mask-image: linear-gradient(180deg, transparent 0, #000 45%);
}
.dm-boss {
  position: absolute; z-index: -2; top: 0; right: min(-2%, calc(50% - 800px)); width: auto; height: min(100%, 900px);
  opacity: .94; filter: saturate(1.08) drop-shadow(0 0 46px rgba(255, 77, 109, .4));
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 96%); mask-image: linear-gradient(180deg, #000 62%, transparent 96%);
  pointer-events: none; will-change: transform;
}
.dm-sky { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

.dm-hero-in {
  position: relative; z-index: 1;
  width: min(100% - 2 * var(--k-gutter), 1320px); margin-inline: auto;
  display: grid; column-gap: clamp(28px, 3.6vw, 60px);
  grid-template-columns: minmax(0, 1fr) var(--ph-w) minmax(0, 1fr);
  grid-template-rows: var(--line-y) auto;
}
.dm-head { grid-column: 1; grid-row: 1; align-self: end; display: grid; gap: var(--k-sp-1); padding-bottom: var(--k-sp-3); }
.dm-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 700; font-size: var(--k-fs-sm); letter-spacing: .12em; color: var(--k-ink-mid); }
.dm-wk {
  padding: 3px 10px 4px; font-weight: 900; font-size: var(--k-fs-xs); letter-spacing: .14em; color: #1E1503;
  background: linear-gradient(180deg, #FBE3A0, #D9AD4F); border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 0 18px rgba(232, 196, 106, .35);
}
.dm-logo { margin: 0; line-height: 0; }
.dm-logo img { display: block; width: min(100%, 520px); height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55)) drop-shadow(0 0 30px rgba(255, 77, 109, .18)); }

.dm-phone { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: relative; margin: 0; }
.dm-phone::after {
  content: ""; position: absolute; z-index: -1; inset: 10% -40%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(155, 107, 255, .35), rgba(155, 107, 255, 0));
}
.dm-phone-body {
  position: relative; padding: var(--ph-b); border-radius: calc(var(--ph-w) * .15);
  background: linear-gradient(145deg, #3A3460 0, #0B0A14 18%, #06050C 70%, #2A2548 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(232, 196, 106, .55), inset 0 0 0 4px #05040A,
    0 30px 60px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06), 0 0 60px rgba(155, 107, 255, .28);
}
.dm-phone-video {
  display: block; width: 100%; height: auto; aspect-ratio: 540 / 1168; object-fit: cover;
  clip-path: inset(0 round calc(var(--ph-w) * .115)); background: #0B0918;
}
.dm-phone-cam {
  position: absolute; z-index: 1; top: calc(var(--ph-b) + 7px); left: 50%; width: 26%; height: calc(var(--ph-w) * .055);
  transform: translateX(-50%); border-radius: 99px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .05);
}
.dm-phone-cap { margin-top: 10px; text-align: center; font-size: var(--k-fs-xs); color: var(--k-ink-sub); letter-spacing: .06em; }

.dm-copy { grid-column: 1; grid-row: 2; align-self: start; display: grid; gap: var(--k-sp-3); padding-top: var(--k-sp-4); position: relative; }
.dm-copy::before {
  content: ""; position: absolute; z-index: -1; inset: -10% -18% -14% -30%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(11, 9, 24, .78), rgba(11, 9, 24, 0));
}
.dm-tagline {
  font-family: var(--k-font-head); font-weight: 800; font-size: var(--k-fs-h2); line-height: 1.5; letter-spacing: .08em; color: #FFFFFF;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .4), 0 0 24px rgba(155, 107, 255, .45);
}
.dm-lead { font-size: var(--k-fs-lead); line-height: 1.95; color: var(--k-ink-mid); max-width: 30em; }
.dm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dm-chips li {
  padding: 5px 12px 6px; font-weight: 700; font-size: var(--k-fs-xs); letter-spacing: .06em; color: var(--k-ink);
  border: 1px solid var(--dm-gold-line); border-radius: 4px; background: rgba(11, 9, 24, .6);
}

.dm-boss-cap {
  grid-column: 3; grid-row: 1; align-self: start; justify-self: end; display: grid; justify-items: end; gap: 2px; margin-top: var(--k-sp-2);
  text-align: right; text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}
.dm-boss-cap span { font-weight: 700; font-size: var(--k-fs-xs); letter-spacing: .16em; color: #FF8FA4; }
.dm-boss-cap b { font-family: var(--k-font-head); font-weight: 800; font-size: var(--k-fs-h3); letter-spacing: .1em; color: #FFFFFF; }
.dm-go { grid-column: 3; grid-row: 2; align-self: end; justify-self: end; margin-bottom: calc(var(--ph-b) + 30px); }
.dm-go-play {
  display: grid; justify-items: center; gap: 2px; min-width: 240px; min-height: 60px; padding: 10px 26px 12px;
  text-decoration: none; color: #2A1B02; touch-action: manipulation;
  background: linear-gradient(180deg, #FFF0BE 0, #F2CF77 40%, #CC9B3E 100%);
  border: 1px solid #6B4A12; border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 3px rgba(255, 240, 190, .25), 0 0 0 1px rgba(0, 0, 0, .5), 0 10px 28px -8px rgba(232, 196, 106, .55);
  transition: transform .14s var(--ease-out), box-shadow .14s var(--ease-out);
}
.dm-go-play:active { transform: translateY(2px); }
.dm-go-main { font-family: var(--k-font-head); font-weight: 800; font-size: 22px; letter-spacing: .14em; }
.dm-go-sub { font-weight: 700; font-size: var(--k-fs-xs); letter-spacing: .06em; color: #5A3D0C; }
.dm-go-pc {
  display: none; align-items: center; gap: var(--k-sp-2); padding: 12px 16px 12px 12px;
  border: 1px solid var(--dm-gold-line); border-radius: 10px; background: rgba(11, 9, 24, .82);
  box-shadow: var(--k-shadow-s);
}
.dm-go-qr { width: 96px; height: 96px; border-radius: 4px; background: #FFFFFF; }
.dm-go-text { display: grid; gap: 4px; font-size: var(--k-fs-xs); color: var(--k-ink-sub); line-height: 1.6; }
.dm-go-text b { font-size: var(--k-fs-sm); color: var(--k-ink); }
@media (hover: hover) and (pointer: fine) {
  .dm-go-play { display: none; }
  .dm-go-pc { display: flex; }
}

.dm-go-play:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 3px; }

@media (max-width: 1179px) {
  .dm-hero {
    --ph-w: clamp(190px, min(36vw, calc((100svh - var(--head-h) - 300px) / 2.07)), 300px);
    padding-top: var(--k-sp-3);
  }
  .dm-boss {
    top: calc(var(--k-sp-6) + 20px); height: min(82svh, 680px); right: -14%; opacity: .9;
    -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 94%), linear-gradient(90deg, transparent 0, #000 26%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 58%, transparent 94%), linear-gradient(90deg, transparent 0, #000 26%);
    mask-composite: intersect;
  }
  .dm-hero-in {
    grid-template-columns: minmax(0, 1fr) var(--ph-w) minmax(0, 1fr);
    grid-template-rows: auto var(--line-y) auto auto auto;
    column-gap: clamp(12px, 3vw, 36px);
  }
  .dm-head { grid-column: 1 / -1; grid-row: 1; justify-items: center; text-align: center; padding-bottom: var(--k-sp-2); }
  .dm-kicker { justify-content: center; }
  .dm-logo img { width: min(70vw, 460px); }
  .dm-phone { grid-column: 2; grid-row: 2 / span 2; }
  .dm-copy { display: contents; }
  .dm-copy::before { display: none; }
  .dm-tagline {
    grid-column: 1; grid-row: 3; justify-self: end; align-self: start; margin-top: var(--k-sp-3);
    writing-mode: vertical-rl; font-size: clamp(20px, 4.4vw, 34px); line-height: 1.5; letter-spacing: .1em;
  }
  .dm-tagline .nb { display: block; }
  .dm-lead { grid-column: 1 / -1; grid-row: 5; justify-self: center; text-align: center; margin-top: var(--k-sp-3); max-width: 34em; }
  .dm-chips { grid-column: 1 / -1; grid-row: 6; justify-content: center; margin-top: var(--k-sp-2); }
  .dm-boss-cap { grid-column: 3; grid-row: 3; align-self: end; margin: 0 0 var(--k-sp-4); }
  .dm-go { grid-column: 1 / -1; grid-row: 4; justify-self: center; align-self: start; margin: var(--k-sp-3) 0 0; }
}
@media (max-width: 599px) {
  .dm-hero { --ph-w: clamp(150px, min(46vw, calc((100svh - var(--head-h) - 270px) / 2.07)), 220px); padding-top: var(--k-sp-2); padding-bottom: var(--k-sp-5); }
  .dm-hero-in { grid-template-rows: auto var(--line-y) auto auto auto auto auto; }
  .dm-logo img { width: min(60vw, 230px); }
  .dm-kicker { font-size: var(--k-fs-xs); gap: 8px; }
  .dm-phone-cap { margin: 6px -70px 0; font-size: var(--k-fs-2xs); }
  .dm-go { margin-top: var(--k-sp-2); }
  .dm-go-play { min-width: min(78vw, 300px); }
  .dm-boss { top: calc(var(--k-sp-6) + 10px); right: -30%; height: min(64svh, 460px); }
  .dm-boss-cap { display: none; }
  .dm-tagline {
    grid-column: 1 / -1; grid-row: 5; justify-self: center; margin-top: var(--k-sp-4);
    writing-mode: horizontal-tb; font-size: var(--k-fs-h2); letter-spacing: .06em; text-align: center;
  }
  .dm-tagline .nb { display: inline; }
  .dm-lead { grid-row: 6; margin-top: var(--k-sp-2); text-align: left; }
  .dm-chips { grid-row: 7; }
}

.dm-sec { position: relative; padding-block: var(--k-sec-y); }
.dm-sec::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(233, 228, 255, 0), rgba(233, 228, 255, .45) 50%, rgba(233, 228, 255, 0));
}
.dm-sec-head { display: grid; gap: var(--k-sp-2); margin-bottom: var(--k-sp-5); max-width: 48em; }
.dm-h2 {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--k-font-head); font-weight: 800; font-size: var(--k-fs-h2); line-height: 1.5; letter-spacing: .08em; color: #FFFFFF;
  text-shadow: 0 2px 18px rgba(11, 9, 24, .9);
}
.dm-h2::before { content: ""; width: 12px; height: 12px; transform: rotate(45deg); background: var(--k-accent); box-shadow: 0 0 12px rgba(232, 196, 106, .7); flex: none; }
.dm-h2::after { content: ""; flex: 1 1 0; max-width: 120px; height: 1px; background: linear-gradient(90deg, var(--k-accent), rgba(232, 196, 106, 0)); }
.dm-sec-lead { color: var(--k-ink-mid); line-height: 1.95; text-shadow: 0 1px 12px rgba(11, 9, 24, .95); }

.dm-scene {
  position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: min(100%, 1000px);
  object-fit: cover; object-position: 50% 40%; opacity: .66; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 50%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 50%, transparent 100%);
}
.dm-modes .dm-scene { object-position: 50% 18%; }
.dm-shots-sec .dm-scene { object-position: 28% 50%; }
.dm-scene-cap {
  position: absolute; z-index: 1; top: var(--k-sp-3); right: var(--k-gutter); display: flex; align-items: baseline; gap: 10px;
  font-family: var(--k-font-head); font-weight: 800; font-size: var(--k-fs-sm); letter-spacing: .16em; color: rgba(233, 228, 255, .78);
  text-shadow: 0 1px 10px rgba(11, 9, 24, .9);
}
.dm-scene-cap span { font-size: var(--k-fs-xs); color: var(--k-accent); }

.dm-rule { background: linear-gradient(180deg, #0B0918 0, #100C26 100%); }
.dm-rule-body { display: grid; gap: var(--k-sp-5); grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: center; }
.dm-board { margin: 0; padding: 10px; border-radius: 22px; background: linear-gradient(160deg, rgba(232, 196, 106, .55), rgba(232, 196, 106, .08) 40%, rgba(155, 107, 255, .3)); box-shadow: var(--k-shadow-m); }
.dm-board-svg { display: block; width: 100%; height: auto; border-radius: 16px; }
.dm-steps { display: grid; gap: var(--k-sp-3); counter-reset: dm-step; }
.dm-step {
  position: relative; display: grid; gap: 4px; padding: var(--k-sp-3) var(--k-sp-3) var(--k-sp-3) 76px;
  border: 1px solid var(--k-line); border-radius: var(--k-rm); background: var(--dm-panel);
  counter-increment: dm-step;
}
.dm-step::before {
  content: counter(dm-step); position: absolute; left: 20px; top: 50%; width: 38px; height: 38px; margin-top: -19px;
  display: grid; place-items: center; font-family: var(--k-font-head); font-weight: 800; font-size: 19px; color: #1E1503;
  background: linear-gradient(180deg, #FBE3A0, #C9983F); border-radius: 50%; box-shadow: 0 0 0 3px rgba(11, 9, 24, .9), 0 0 0 4px var(--dm-gold-line);
}
.dm-step b { font-family: var(--k-font-head); font-weight: 800; font-size: var(--k-fs-h3); letter-spacing: .05em; color: #FFFFFF; }
.dm-step > span { color: var(--k-ink-mid); font-size: var(--k-fs-sm); line-height: 1.85; }
@media (max-width: 819px) {
  .dm-rule-body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .dm-board { width: min(100%, 340px); }
  .dm-steps { width: 100%; }
}
@media (max-width: 479px) {
  .dm-step { padding-left: 64px; }
  .dm-step::before { left: 14px; width: 34px; height: 34px; margin-top: -17px; font-size: 17px; }
}

.dm-ops { background: radial-gradient(80% 60% at 50% 0, rgba(84, 56, 186, .22), rgba(84, 56, 186, 0)), #0D0A22; }
.dm-op-grid { display: grid; gap: var(--k-sp-3); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dm-op {
  --op: var(--dm-tap);
  display: grid; align-content: start; gap: 6px; padding: 12px 12px var(--k-sp-3);
  border: 1px solid var(--k-line); border-radius: var(--k-rm); background: var(--dm-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.dm-op-hold { --op: var(--dm-hold); }
.dm-op-flick { --op: var(--dm-flick); }
.dm-op-slide { --op: var(--dm-slide); }
.dm-op-mash { --op: var(--dm-mash); }
.dm-op-circle { --op: var(--dm-circle); }
.dm-op-spread { --op: var(--dm-spread); }
.dm-op-practice {
  align-content: center; gap: 10px; padding: var(--k-sp-3);
  border-color: rgba(232, 196, 106, .5); background: linear-gradient(180deg, rgba(48, 38, 104, .6), rgba(22, 17, 54, .88));
}
.dm-op-practice .dm-op-name { flex-wrap: wrap; gap: 4px 12px; }
.dm-op-practice .dm-op-name small { font-family: var(--k-font-body); font-weight: 700; font-size: var(--k-fs-xs); letter-spacing: .08em; color: var(--k-accent); }
.dm-op-gems { display: flex; gap: 7px; }
.dm-op-gems i { width: 11px; height: 11px; transform: rotate(45deg); background: var(--dm-tap); box-shadow: 0 0 8px currentColor; color: var(--dm-tap); }
.dm-op-gems i:nth-child(2) { background: var(--dm-hold); color: var(--dm-hold); }
.dm-op-gems i:nth-child(3) { background: var(--dm-flick); color: var(--dm-flick); }
.dm-op-gems i:nth-child(4) { background: var(--dm-slide); color: var(--dm-slide); }
.dm-op-gems i:nth-child(5) { background: var(--dm-mash); color: var(--dm-mash); }
.dm-op-gems i:nth-child(6) { background: var(--dm-circle); color: var(--dm-circle); }
.dm-op-gems i:nth-child(7) { background: var(--dm-spread); color: var(--dm-spread); }
.dm-op-demo { display: block; width: 100%; height: auto; border-radius: 10px; margin-bottom: 6px; }
.dm-op-name { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-family: var(--k-font-head); font-weight: 800; font-size: var(--k-fs-h3); letter-spacing: .05em; color: #FFFFFF; }
.dm-op-mark { width: 10px; height: 10px; flex: none; transform: rotate(45deg); background: var(--op); box-shadow: 0 0 10px var(--op); }
.dm-op-what { font-weight: 700; font-size: var(--k-fs-xs); letter-spacing: .12em; color: var(--op); }
.dm-op-how { font-size: var(--k-fs-sm); line-height: 1.8; color: var(--k-ink-mid); }
@media (max-width: 1023px) { .dm-op-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) {
  .dm-op-grid { gap: 10px; }
  .dm-op { padding: 8px 8px 14px; }
  .dm-op-name { font-size: var(--k-fs-h4); gap: 6px; }
  .dm-op-how { font-size: var(--k-fs-xs); line-height: 1.75; }
}

.dm-stages { background: linear-gradient(180deg, #0D0A22, #0B0918); }
.dm-stages-body { display: grid; gap: var(--k-sp-4) var(--k-sp-5); grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: start; }
.dm-setlist { grid-column: 1; grid-row: 1 / span 2; display: grid; gap: 8px; }
.dm-st, .dm-ura-list li {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center; column-gap: var(--k-sp-3);
  grid-template-columns: 3.6em minmax(0, 1fr) minmax(0, 11em) 7.4em;
  padding: 16px 18px; border: 1px solid rgba(233, 228, 255, .14); border-radius: 6px; background: rgba(11, 9, 24, .6);
  text-shadow: 0 1px 8px rgba(11, 9, 24, .95);
}
.dm-st-scene {
  position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25) 0, rgba(0, 0, 0, .7) 38%, #000 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25) 0, rgba(0, 0, 0, .7) 38%, #000 100%);
}
.dm-st.is-known { border-color: rgba(255, 77, 109, .55); }
.dm-st-facts { display: grid; justify-items: end; gap: 2px; }
.dm-st-bpm, .dm-st-life { white-space: nowrap; }
.dm-st-life { font-size: var(--k-fs-2xs); font-weight: 700; letter-spacing: .06em; color: var(--k-ink-mid); font-variant-numeric: tabular-nums; }
.dm-st-note { grid-column: 1; font-size: var(--k-fs-xs); line-height: 1.8; color: var(--k-ink-sub); }
.dm-st-no { font-family: var(--k-font-head); font-weight: 800; font-size: var(--k-fs-sm); letter-spacing: .08em; color: var(--k-accent); }
.dm-st-name { font-family: var(--k-font-head); font-weight: 800; font-size: var(--k-fs-h3); letter-spacing: .06em; color: #FFFFFF; }
.dm-st-boss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--k-fs-sm); color: var(--k-ink-sub); letter-spacing: .06em; }
.dm-st-boss em {
  font-style: normal; padding: 1px 6px 2px; font-weight: 700; font-size: var(--k-fs-2xs); letter-spacing: .08em;
  color: #FFD3DC; border: 1px solid rgba(255, 77, 109, .6); border-radius: 3px; background: rgba(255, 77, 109, .14);
}
.dm-st.is-known .dm-st-boss { color: #FF8FA4; font-weight: 700; }
.dm-st-bpm { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-weight: 900; font-size: var(--k-fs-sm); letter-spacing: .08em; color: var(--k-ink); font-variant-numeric: tabular-nums; }
.dm-beat { width: 9px; height: 9px; border-radius: 50%; background: var(--dm-flick); box-shadow: 0 0 10px var(--dm-flick); flex: none; }
.dm-st-140 { --bpm: 140; } .dm-st-145 { --bpm: 145; } .dm-st-150 { --bpm: 150; } .dm-st-154 { --bpm: 154; }
.dm-st-158 { --bpm: 158; } .dm-st-162 { --bpm: 162; } .dm-st-166 { --bpm: 166; } .dm-st-170 { --bpm: 170; } .dm-st-175 { --bpm: 175; }
.dm-ura { grid-column: 2; grid-row: 2; padding: var(--k-sp-3); border: 1px solid rgba(155, 107, 255, .45); border-radius: var(--k-rm); background: linear-gradient(180deg, rgba(60, 30, 120, .45), rgba(22, 17, 54, .85)); }
.dm-ura-h { font-family: var(--k-font-head); font-weight: 800; font-size: var(--k-fs-h3); letter-spacing: .12em; color: #D9C9FF; }
.dm-ura-text { margin: 6px 0 10px; font-size: var(--k-fs-sm); color: var(--k-ink-mid); line-height: 1.8; }
.dm-ura-list { display: grid; gap: 6px; }
.dm-ura-list li { grid-template-columns: 3.8em minmax(0, 1fr); row-gap: 2px; padding: 12px 14px; }
.dm-ura-list .dm-st-no { grid-row: 1 / span 2; align-self: start; padding-top: 3px; }
.dm-ura-list .dm-st-facts { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }
.dm-ura-list .dm-st-name { font-size: var(--k-fs-h4); }
.dm-ura-list .dm-beat { background: #B48CFF; box-shadow: 0 0 10px #B48CFF; }
.dm-first {
  grid-column: 2; grid-row: 1; margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--k-sp-2); align-items: center;
  padding: var(--k-sp-2); border: 1px solid rgba(255, 77, 109, .5); border-radius: var(--k-rm);
  background: linear-gradient(135deg, rgba(126, 24, 64, .55), rgba(22, 17, 54, .9) 70%);
}
.dm-first-face { width: 96px; height: auto; border-radius: 10px; background: radial-gradient(circle at 50% 40%, rgba(255, 77, 109, .35), rgba(255, 77, 109, 0) 70%); }
.dm-first figcaption { display: grid; gap: 2px; }
.dm-first-k { font-weight: 700; font-size: var(--k-fs-xs); letter-spacing: .14em; color: #FF8FA4; }
.dm-first-name { font-family: var(--k-font-head); font-weight: 800; font-size: var(--k-fs-h3); letter-spacing: .06em; color: #FFFFFF; }
.dm-first-line { margin-top: 6px; font-size: var(--k-fs-xs); line-height: 1.7; color: var(--k-ink-mid); quotes: none; }
@media (max-width: 1179px) {
  .dm-stages-body { grid-template-columns: minmax(0, 1fr); }
  .dm-setlist, .dm-ura, .dm-first, .dm-st-note { grid-column: 1; grid-row: auto; }
  .dm-first { order: -1; }
}
@media (max-width: 759px) {
  .dm-st { grid-template-columns: 3.2em minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 2px; padding: 12px 14px; }
  .dm-st .dm-st-no { grid-row: 1 / span 2; align-self: start; padding-top: 3px; }
  .dm-st .dm-st-name { grid-column: 2; grid-row: 1; }
  .dm-st .dm-st-facts { grid-column: 3; grid-row: 1 / span 2; }
  .dm-st .dm-st-boss { grid-column: 2; grid-row: 2; font-size: var(--k-fs-xs); }
}
@media (max-width: 379px) {
  .dm-st { grid-template-rows: auto auto auto; }
  .dm-st .dm-st-no { grid-row: 1 / span 3; }
  .dm-st .dm-st-name, .dm-st .dm-st-boss { grid-column: 2 / span 2; }
  .dm-st .dm-st-facts { grid-column: 2 / span 2; grid-row: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-top: 2px; }
}

.dm-modes { background: radial-gradient(70% 50% at 100% 100%, rgba(126, 24, 64, .22), rgba(126, 24, 64, 0)), #0B0918; }
.dm-modes-body { display: grid; gap: var(--k-sp-4) var(--k-sp-5); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
.dm-diff { display: grid; gap: var(--k-sp-3); }
.dm-table-wrap { overflow-x: auto; border: 1px solid var(--dm-gold-line); border-radius: var(--k-rm); background: var(--dm-panel); }
.dm-table-wrap:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 3px; }
.dm-table { width: 100%; border-collapse: collapse; font-size: var(--k-fs-sm); }
.dm-table td, .dm-table thead th { white-space: nowrap; }
.dm-table caption { padding: var(--k-sp-2) var(--k-sp-3) 0; text-align: left; font-weight: 700; color: var(--k-ink-mid); }
.dm-table th, .dm-table td { padding: 12px 14px; border-bottom: 1px solid var(--k-line); text-align: center; }
.dm-table tbody tr:last-child th, .dm-table tbody tr:last-child td { border-bottom: 0; }
.dm-table tbody th { text-align: left; font-weight: 700; color: var(--k-ink-mid); line-height: 1.6; }
.dm-table tbody th small { display: block; font-size: var(--k-fs-2xs); color: var(--k-ink-sub); font-weight: 400; }
.dm-table td { font-weight: 900; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.dm-table thead th { font-weight: 900; letter-spacing: .1em; font-size: var(--k-fs-sm); border-bottom: 1px solid var(--dm-gold-line); }
.dm-d-easy { color: var(--dm-slide); } .dm-d-normal { color: var(--dm-tap); } .dm-d-hard { color: #FF7C93; }
.dm-diff-same { font-size: var(--k-fs-sm); color: var(--k-ink-mid); line-height: 1.8; }
.dm-stars { display: flex; align-items: center; gap: var(--k-sp-2); font-size: var(--k-fs-sm); color: var(--k-ink-mid); line-height: 1.8; }
.dm-stars-row { display: flex; gap: 4px; flex: none; }
.dm-stars-row svg { width: 22px; height: 22px; fill: #3A3470; }
.dm-stars-row svg.is-lit { fill: #FFD166; filter: drop-shadow(0 0 6px rgba(255, 209, 102, .7)); }
.dm-mode-list { display: grid; gap: var(--k-sp-2); }
.dm-mode {
  position: relative; padding: 14px var(--k-sp-3) 16px;
  border: 1px solid rgba(232, 196, 106, .34); border-radius: 6px;
  background: linear-gradient(180deg, rgba(40, 32, 84, .82), rgba(18, 14, 42, .9));
  box-shadow: inset 0 1px 0 rgba(255, 240, 190, .1), inset 0 0 0 3px rgba(11, 9, 24, .5);
}
.dm-mode h3 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  font-family: var(--k-font-head); font-weight: 800; font-size: var(--k-fs-h3); letter-spacing: .08em; color: #FFFFFF;
}
.dm-mode h3 small { font-family: var(--k-font-body); font-weight: 700; font-size: var(--k-fs-xs); letter-spacing: .06em; color: var(--k-accent); }
.dm-mode p { margin-top: 6px; font-size: var(--k-fs-sm); line-height: 1.85; color: var(--k-ink-mid); }
.dm-mode p.dm-mode-note { font-size: var(--k-fs-xs); color: var(--k-ink-sub); }
.dm-mode-main {
  border-color: #8C6524;
  background: linear-gradient(180deg, #FFF0BE 0, #F2CF77 45%, #CC9B3E 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 12px 28px -14px rgba(232, 196, 106, .55);
}
.dm-mode-main h3 { color: #2A1B02; }
.dm-mode-main h3 small { color: #6B4A12; }
.dm-mode-main p { color: #3D2A06; }
.dm-mode-main p.dm-mode-note { color: #5A3D0C; }
.dm-secret { margin-top: var(--k-sp-4); text-align: center; font-family: var(--k-font-head); font-weight: 800; font-size: var(--k-fs-lead); letter-spacing: .08em; color: #D9C9FF; text-shadow: 0 0 18px rgba(155, 107, 255, .6); }
@media (max-width: 899px) { .dm-modes-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px) {
  .dm-table th, .dm-table td { padding: 10px 8px; }
  .dm-table tbody th { font-size: var(--k-fs-xs); }
  .dm-table td { font-size: var(--k-fs-xs); }
  .dm-table thead th { font-size: var(--k-fs-xs); letter-spacing: .04em; }
}
@media (max-width: 379px) {
  .dm-table th, .dm-table td { padding: 10px 4px; }
  .dm-table tbody th { padding-left: 6px; }
  .dm-table thead th { letter-spacing: 0; }
}

.dm-shots-sec { background: linear-gradient(180deg, #0B0918, #120D2C); }
.dm-shots { display: grid; gap: var(--k-sp-3); grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dm-shots figure { margin: 0; }
.dm-shot {
  padding: 6px; border-radius: 22px; border: 0;
  background: linear-gradient(145deg, #3A3460 0, #0B0A14 20%, #06050C 70%, #2A2548 100%);
  box-shadow: inset 0 0 0 1px rgba(232, 196, 106, .45), var(--k-shadow-m);
}
.dm-shot img { border-radius: 16px; }
.dm-shots figcaption { margin-top: var(--k-sp-1); text-align: center; font-size: var(--k-fs-xs); color: var(--k-ink-sub); letter-spacing: .04em; }
.dm-shot:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 4px; }
@media (max-width: 899px) {
  .dm-shots {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(42vw, 210px);
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--k-sp-2);
    margin-inline: calc(-1 * var(--k-gutter)); padding-inline: var(--k-gutter); scroll-padding-inline: var(--k-gutter);
  }
  .dm-shots li { scroll-snap-align: start; }
}

.dm-try { padding-bottom: var(--k-sp-5); background: radial-gradient(60% 70% at 50% 30%, rgba(126, 24, 64, .4), rgba(126, 24, 64, 0)), linear-gradient(180deg, #120D2C 0, #0B0918 100%); }
.dm-try-stage {
  position: relative; display: grid; gap: var(--k-sp-4); grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  padding: var(--k-sp-5); border: 1px solid var(--dm-gold-line); border-radius: var(--k-rl);
  background: linear-gradient(160deg, rgba(48, 38, 104, .6), rgba(14, 11, 34, .92) 60%);
  box-shadow: var(--k-shadow-m), inset 0 1px 0 rgba(255, 255, 255, .06);
  margin-bottom: var(--k-sp-5);
}
.dm-cta { gap: var(--k-sp-2); }
.dm-cta h2 { font-family: var(--k-font-head); font-weight: 800; font-size: var(--k-fs-h2); letter-spacing: .06em; color: #FFFFFF; }
.dm-cta-text { color: var(--k-ink-mid); line-height: 1.9; max-width: 32em; }
.dm-btn {
  min-height: 56px; padding: 0 28px; font-family: var(--k-font-head); font-weight: 800; font-size: var(--k-fs-lead); letter-spacing: .1em; color: #2A1B02;
  background: linear-gradient(180deg, #FFF0BE 0, #F2CF77 40%, #CC9B3E 100%); border-color: #6B4A12;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 3px 0 #5A3D0C, 0 12px 26px -10px rgba(232, 196, 106, .6);
}
.dm-btn:focus-visible, .dm-cta-pc:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .dm-btn:hover { background: linear-gradient(180deg, #FFF6D6 0, #F6D88A 40%, #D6A64A 100%); }
  .dm-go-play:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 3px rgba(255, 240, 190, .25), 0 0 0 1px rgba(0, 0, 0, .5), 0 14px 34px -8px rgba(232, 196, 106, .75); }
  .dm-cta-pc { transition: color .16s ease; }
  .dm-cta-pc:hover { color: #FFFFFF; }
}
.dm-cta-url { font-size: var(--k-fs-xs); color: var(--k-ink-sub); letter-spacing: .04em; overflow-wrap: anywhere; }
.dm-cta-pc { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; font-weight: 700; font-size: var(--k-fs-sm); color: var(--k-accent); text-underline-offset: 4px; }
.dm-ticket {
  margin: 0; display: grid; justify-items: center; gap: var(--k-sp-2); padding: var(--k-sp-3) var(--k-sp-3) var(--k-sp-2);
  border-radius: 14px; background: linear-gradient(180deg, #FBF6E6, #EFE3C1); color: #2A1B02; text-align: center;
  box-shadow: 0 0 0 1px #6B4A12, 0 0 0 5px rgba(232, 196, 106, .28), 0 24px 40px -18px rgba(0, 0, 0, .8);
}
.dm-ticket-qr { width: 200px; height: 200px; }
.dm-ticket figcaption { display: grid; gap: 2px; font-size: var(--k-fs-xs); color: #5A3D0C; }
.dm-ticket figcaption b { font-size: var(--k-fs-sm); color: #2A1B02; }
@media (hover: none), (pointer: coarse) {
  .dm-ticket, .dm-cta-pc { display: none; }
  .dm-try-stage { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .dm-try-stage { grid-template-columns: minmax(0, 1fr); padding: var(--k-sp-4) var(--k-sp-3); }
  .dm-ticket { justify-self: start; }
  .dm-btn { width: 100%; justify-content: center; }
}
@media (max-width: 379px) {
  .dm-btn { padding: 0 14px; letter-spacing: .04em; white-space: nowrap; }
}
.dm-nav a { background: rgba(22, 17, 54, .78); }
.dm-try { padding-bottom: var(--k-sp-3); }

.dm-sec .dm-wrap { position: relative; z-index: 1; }
.dm-rain { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
html.svc-dm .site-foot.is-sub { margin-top: 0; }

.dm-floor {
  --col-w: clamp(150px, 17vw, 250px);
  position: relative; z-index: 2; height: clamp(200px, 21vw, 290px);
  margin: 0 var(--k-gutter); pointer-events: none;
}
.dm-floor-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.dm-floor-note {
  position: absolute; left: var(--k-sp-3); top: 0; display: grid; gap: 2px; max-width: 26em;
  font-size: var(--k-fs-xs); line-height: 1.7; color: var(--k-ink-sub); letter-spacing: .04em;
}
.dm-floor-note b { font-family: var(--k-font-head); font-weight: 800; font-size: var(--k-fs-sm); letter-spacing: .12em; color: var(--k-accent); }
.dm-bin { position: absolute; right: var(--k-sp-3); bottom: 0; width: calc(var(--col-w) * .66); height: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); }
.dm-bin-plate { font-family: var(--k-font-body); font-weight: 900; font-size: 11px; letter-spacing: .2em; fill: #3A2606; }
.dm-collector { position: absolute; left: 0; bottom: 0; width: var(--col-w); transform-origin: 50% 100%; will-change: transform; }
.dm-col-bot { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .5)); }
@media (max-width: 599px) {
  .dm-floor { --col-w: 132px; height: 200px; }
  .dm-floor-note { left: 4px; right: 4px; }
}