:root .sig--des-spot { display: grid; place-items: center; padding: clamp(16px, 3vw, 40px); container-type: inline-size; }
:root .sig--des-spot .sp, :root .sig--des-spot.sp { width: 100%; max-width: 1040px; display: grid; gap: clamp(12px, 2vw, 20px); }
:root .sig--des-spot .sp__top, :root .sig--des-spot.sp__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
:root .sig--des-spot .sp__tc, :root .sig--des-spot.sp__tc { font: 700 clamp(22px, 4cqw, 34px)/1 var(--f-display); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
:root .sig--des-spot .sp__tc small, :root .sig--des-spot.sp__tc small { font-size: .55em; color: var(--ink-3); font-weight: 600; }
:root .sig--des-spot .sp__name, :root .sig--des-spot.sp__name { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); color: var(--ink-2); font: 500 13px/1 var(--f-display); }
:root .sig--des-spot .sp__ok, :root .sig--des-spot.sp__ok { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(107, 227, 164, .14); border: 1px solid rgba(107, 227, 164, .45); color: #b9f5d5; font: 600 13px/1 var(--f-display); opacity: 0; }
:root .sig--des-spot .sp__ok svg, :root .sig--des-spot.sp__ok svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
:root .sig--des-spot .sp__script, :root .sig--des-spot.sp__script { display: flex; align-items: baseline; gap: 12px; min-height: 2.6em; padding: 12px 16px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
:root .sig--des-spot .sp__who, :root .sig--des-spot.sp__who { flex: none; min-width: 6.5em; font: 600 11px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--v-text); }
:root .sig--des-spot .sp__line, :root .sig--des-spot.sp__line { font: 600 clamp(15px, 2.4cqw, 21px)/1.3 var(--f-display); color: #fff; letter-spacing: -.015em; }
:root .sig--des-spot .sp__daw, :root .sig--des-spot.sp__daw { --lc: clamp(78px, 15cqw, 124px); position: relative; display: grid; grid-template-columns: var(--lc) minmax(0, 1fr); grid-auto-rows: auto; gap: 8px 10px; align-items: center; }
:root .sig--des-spot .sp__ruler, :root .sig--des-spot.sp__ruler { position: relative; height: 26px; border-bottom: 1px solid var(--line-2); }
:root .sig--des-spot .sp__ruler i, :root .sig--des-spot.sp__ruler i { position: absolute; bottom: 0; width: 1px; height: 5px; background: rgba(255, 255, 255, .25); }
:root .sig--des-spot .sp__ruler i.b, :root .sig--des-spot.sp__ruler i.b { height: 10px; background: rgba(255, 255, 255, .5); }
:root .sig--des-spot .sp__ruler em, :root .sig--des-spot.sp__ruler em { position: absolute; top: 0; transform: translateX(-50%); font: 500 10px/1 var(--f-body); font-style: normal; color: var(--ink-3); }
:root .sig--des-spot .sp__ruler em:last-of-type, :root .sig--des-spot.sp__ruler em:last-of-type { transform: translateX(-100%); }
:root .sig--des-spot .sp__ruler em:first-of-type, :root .sig--des-spot.sp__ruler em:first-of-type { transform: none; }
:root .sig--des-spot .sp__lb, :root .sig--des-spot.sp__lb { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font: 500 clamp(11px, 1.8cqw, 13px)/1 var(--f-display); white-space: nowrap; }
:root .sig--des-spot .sp__lb svg, :root .sig--des-spot.sp__lb svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--lilac); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root .sig--des-spot .sp__lane, :root .sig--des-spot.sp__lane { position: relative; height: clamp(34px, 6cqw, 48px); border-radius: 10px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px calc(100% / 6)), rgba(255, 255, 255, .03); }
:root .sig--des-spot .sp__clip, :root .sig--des-spot.sp__clip { position: absolute; top: 3px; bottom: 3px; border-radius: 8px; overflow: hidden; display: flex; align-items: flex-end; transition: box-shadow .3s, filter .3s; }
:root .sig--des-spot .sp__clip svg, :root .sig--des-spot.sp__clip svg { position: absolute; inset: 4px 6px 4px; width: calc(100% - 12px); height: calc(100% - 8px); }
:root .sig--des-spot .sp__clip span, :root .sig--des-spot.sp__clip span { position: relative; z-index: 1; margin: 0 0 4px 8px; padding: 2px 6px; border-radius: 4px; background: rgba(10, 4, 16, .55); color: #fff; font: 600 10px/1.2 var(--f-display); white-space: nowrap; }
:root .sig--des-spot .sp__clip--v, :root .sig--des-spot.sp__clip--v { background: rgba(161, 0, 255, .38); border: 1px solid rgba(201, 140, 255, .6); }
:root .sig--des-spot .sp__clip--v path, :root .sig--des-spot.sp__clip--v path, :root .sig--des-spot .sp__clip--s path, :root .sig--des-spot.sp__clip--s path, :root .sig--des-spot .sp__clip--j path, :root .sig--des-spot.sp__clip--j path { fill: none; stroke: var(--lilac); stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: .85; }
:root .sig--des-spot .sp__clip--s, :root .sig--des-spot.sp__clip--s { background: rgba(255, 170, 60, .22); border: 1px solid rgba(255, 190, 110, .55); }
:root .sig--des-spot .sp__clip--s path, :root .sig--des-spot.sp__clip--s path { stroke: #ffd29a; }
:root .sig--des-spot .sp__clip--j, :root .sig--des-spot.sp__clip--j { background: rgba(107, 227, 164, .2); border: 1px solid rgba(107, 227, 164, .55); }
:root .sig--des-spot .sp__clip--j path, :root .sig--des-spot.sp__clip--j path { stroke: #b9f5d5; }
:root .sig--des-spot .sp__clip--m, :root .sig--des-spot.sp__clip--m { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16); }
:root .sig--des-spot .sp__clip--m svg, :root .sig--des-spot.sp__clip--m svg { inset: 0; width: 100%; height: 100%; }
:root .sig--des-spot .sp__envf, :root .sig--des-spot.sp__envf { fill: rgba(227, 184, 255, .14); }
:root .sig--des-spot .sp__envl, :root .sig--des-spot.sp__envl { fill: none; stroke: var(--lilac); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
:root .sig--des-spot .sp__clip.on, :root .sig--des-spot.sp__clip.on { box-shadow: 0 0 0 2px #fff; filter: brightness(1.25); }
:root .sig--des-spot .sp__phw, :root .sig--des-spot.sp__phw { position: absolute; top: 0; bottom: 0; left: calc(var(--lc) + 10px); right: 0; pointer-events: none; z-index: 3; }
:root .sig--des-spot .sp__ph, :root .sig--des-spot.sp__ph { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, .8); opacity: 0; transition: opacity .3s; }
:root .sig--des-spot .sp__ph::before, :root .sig--des-spot.sp__ph::before { content: ""; position: absolute; top: -2px; left: -5px; width: 12px; height: 10px; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); }
:root .sig--des-spot .sp.is-play .sp__ph, :root .sig--des-spot.sp.is-play .sp__ph { opacity: 1; }
:root .sig--des-spot .sp.is-done .sp__ok, :root .sig--des-spot.sp.is-done .sp__ok { opacity: 1; }
@container (max-width: 520px){:root .sig--des-spot .sp__daw, :root .sig--des-spot.sp__daw { --lc: 26px; }
:root .sig--des-spot .sp__lb, :root .sig--des-spot.sp__lb { font-size: 0; gap: 0; }
:root .sig--des-spot .sp__clip span, :root .sig--des-spot.sp__clip span { display: none; }
:root .sig--des-spot .sp__ok, :root .sig--des-spot.sp__ok { margin-left: 0; }

}