/* 烧心杯 UI · 内页组件样式：页面布局 / 标题条 / 切角面板 / 勋章与领奖台 / 选手墙 / 排行榜 / 晋级流程 */

/* ---------- 内页布局 ---------- */
.sx-page { max-width: 1100px; margin: 0 auto; padding: calc(var(--sx-topbar-h) + 32px) 20px 80px; display: flex; flex-direction: column; gap: 64px; }
.sx-section { position: relative; display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 600px) { .sx-page { padding: calc(var(--sx-topbar-h) + 20px) 14px 56px; gap: 44px; } .sx-section { gap: 20px; } }

/* ---------- 标题条：横条从中间展开，文字随后淡入 ---------- */
.sx-title { position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 18px; margin: 0; padding: 8px 0; min-height: 52px; text-align: center; }
.sx-title__bar { position: absolute; left: 50%; top: 8px; height: 44px; width: min(460px, 92%); transform: translateX(-50%) scaleX(0); transform-origin: center;
  background: linear-gradient(90deg, transparent, var(--sx-surface-2) 22%, var(--sx-surface-2) 78%, transparent); transition: transform var(--sx-t-slow) var(--sx-ease); }
.sx-title__text { position: relative; font-size: clamp(22px, 3.2vw, 30px); font-weight: 900; letter-spacing: .12em; line-height: 44px; background: var(--sx-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transform: translateY(6px); transition: opacity var(--sx-t-slow) var(--sx-ease) 120ms, transform var(--sx-t-slow) var(--sx-ease) 120ms; }
.sx-title__dia { position: relative; width: 11px; height: 11px; color: var(--sx-gold-2); opacity: 0; transition: opacity var(--sx-t) var(--sx-ease) 260ms; }
.sx-title__en { flex-basis: 100%; position: relative; margin-top: 4px; font-family: var(--sx-font-num); font-size: 12px; letter-spacing: .32em; color: var(--sx-text-3); opacity: 0; transition: opacity var(--sx-t-slow) var(--sx-ease) 300ms; }
.sx-title.is-in .sx-title__bar { transform: translateX(-50%) scaleX(1); }
.sx-title.is-in .sx-title__text { opacity: 1; transform: none; }
.sx-title.is-in .sx-title__dia, .sx-title.is-in .sx-title__en { opacity: 1; }

/* ---------- 切角金边面板：背景用 clip-path 切角，描边由 JS 生成的 SVG 绘制保证连续 ---------- */
.sx-panel { --sx-panel-cut: 22px; --c: var(--sx-panel-cut); position: relative; padding: 36px clamp(16px, 4vw, 48px); isolation: isolate;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sx-surface-2) 82%, transparent), color-mix(in srgb, var(--sx-bg-2) 88%, transparent));
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.sx-panel__frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; overflow: visible; }
.sx-panel__edge { fill: none; stroke: var(--sx-gold-3); stroke-width: 1.5; }
.sx-panel__deco { fill: none; stroke: var(--sx-gold-2); stroke-width: 2; stroke-linecap: square; }
.sx-panel__deco--2 { stroke-opacity: .55; stroke-width: 1.5; }
.sx-panel__deco--3 { stroke-opacity: .25; stroke-width: 1; }
.sx-panel--gold .sx-panel__edge { stroke: var(--sx-gold-2); stroke-width: 2; filter: drop-shadow(0 0 4px var(--sx-gold-3)); }
.sx-panel--gold .sx-panel__deco { stroke: var(--sx-gold-1); }
.sx-panel--flat .sx-panel__deco { display: none; }
.sx-panel--flat .sx-panel__edge { stroke: var(--sx-line-strong); }
@media (max-width: 600px) { .sx-panel { --sx-panel-cut: 16px; padding: 24px 12px; } }

/* ---------- 奖金勋章：SVG 主体 + HTML 文字叠加，字号用容器单位随勋章宽度缩放 ---------- */
.sx-medal { position: relative; width: var(--sx-medal-w, 200px); aspect-ratio: 200 / 384; container-type: inline-size; user-select: none;
  transition: transform var(--sx-t-slow) var(--sx-ease), filter var(--sx-t-slow) var(--sx-ease); filter: drop-shadow(0 14px 24px color-mix(in srgb, var(--sx-bg) 75%, transparent)); }
.sx-medal__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sx-medal__rank { font-family: var(--sx-font-num); font-size: 22px; }
.sx-medal__label { position: absolute; left: 0; right: 0; top: 33.3%; transform: translateY(-50%); text-align: center; font-size: 19cqw; font-weight: 900; line-height: 1; letter-spacing: .02em;
  background: var(--sx-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 var(--sx-bg)); }
.sx-medal__label--long { font-size: 14cqw; }
.sx-medal__plate { position: absolute; left: 10%; right: 10%; top: 63%; text-align: center; line-height: 1.1; }
.sx-medal__cap { font-size: 8.5cqw; font-weight: 800; color: var(--sx-text); letter-spacing: .06em; opacity: .92; }
.sx-medal__amount { margin-top: 2.5cqw; white-space: nowrap; filter: drop-shadow(0 2px 2px var(--sx-bg)); }
.sx-medal__amount .sx-num { font-size: 20cqw; line-height: 1; background: var(--sx-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sx-medal__amount i { font-style: normal; font-weight: 800; font-size: 7.5cqw; margin-left: 1cqw; color: var(--sx-text); }
.sx-medal--silver .sx-medal__amount .sx-num, .sx-medal--steel .sx-medal__amount .sx-num { background: var(--sx-grad-silver); -webkit-background-clip: text; background-clip: text; }
.sx-medal--bronze .sx-medal__amount .sx-num { background: var(--sx-grad-bronze); -webkit-background-clip: text; background-clip: text; }
.sx-medal__sheen { transform: translateX(0); transition: transform 0s; }
.sx-medal:hover { transform: translateY(-8px); filter: drop-shadow(0 22px 30px color-mix(in srgb, var(--sx-bg) 85%, transparent)) brightness(1.06); }
.sx-medal:hover .sx-medal__sheen { transform: translateX(330px); transition: transform 900ms var(--sx-ease); }

/* ---------- 领奖台：视觉顺序 2-1-3-4，冠军居中抬高 ---------- */
.sx-podium { position: relative; padding: 24px 0 8px; overflow: hidden; }
.sx-podium__list { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: clamp(12px, 3vw, 40px); padding-top: 40px; }
.sx-podium__item { opacity: 0; transform: translateY(24px); transition: opacity var(--sx-t-slow) var(--sx-ease), transform var(--sx-t-slow) var(--sx-ease); }
.sx-podium.is-in .sx-podium__item { opacity: 1; transform: none; }
.sx-podium__item--r1 { order: 2; --sx-medal-w: 236px; margin-bottom: 48px; transition-delay: 0ms; }
.sx-podium__item--r2 { order: 1; --sx-medal-w: 200px; transition-delay: 120ms; }
.sx-podium__item--r3 { order: 3; --sx-medal-w: 200px; transition-delay: 200ms; }
.sx-podium__item--r4 { order: 4; --sx-medal-w: 168px; transition-delay: 280ms; }
.sx-ghost-text { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); font-family: var(--sx-font-num); font-size: clamp(72px, 13.6vw, 184px); line-height: 1; letter-spacing: .04em;
  color: var(--sx-text); opacity: .05; white-space: nowrap; pointer-events: none; }
.sx-podium__coins { position: absolute; inset: 0; pointer-events: none; }
.sx-podium__coin { position: absolute; opacity: .15; animation: sx-coin-float 7s ease-in-out infinite; }
.sx-podium__coin svg { display: block; animation: sx-coin-spin 4.5s linear infinite; }
@keyframes sx-coin-float { 0%, 100% { transform: translateY(0) rotate(-12deg); } 50% { transform: translateY(-16px) rotate(10deg); } }
@keyframes sx-coin-spin { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.25); } }
@media (max-width: 900px) and (min-width: 601px) {
  .sx-podium__item--r1 { --sx-medal-w: 200px; } .sx-podium__item--r2, .sx-podium__item--r3 { --sx-medal-w: 170px; } .sx-podium__item--r4 { --sx-medal-w: 146px; }
}
/* 手机：冠军独占一行，其余两两一行 */
@media (max-width: 600px) {
  .sx-podium__list { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; gap: 28px 12px; padding-top: 16px; }
  .sx-podium__item--r1 { grid-column: 1 / -1; order: 0; margin: 0; --sx-medal-w: min(210px, 56vw); }
  .sx-podium__item--r2 { order: 1; } .sx-podium__item--r3 { order: 2; } .sx-podium__item--r4 { order: 3; grid-column: 1 / -1; }
  .sx-podium__item--r2, .sx-podium__item--r3 { --sx-medal-w: min(160px, 42vw); } .sx-podium__item--r4 { --sx-medal-w: min(140px, 38vw); }
  .sx-ghost-text { top: 18%; }
}

/* ---------- 奖杯：位图 + 光芒 + 轮廓扫光 ---------- */
.sx-trophy { --sx-trophy-h: 280px; position: relative; display: inline-flex; justify-content: center; height: var(--sx-trophy-h); aspect-ratio: 320 / 760; isolation: isolate; }
.sx-trophy__body { position: relative; z-index: 2; display: block; height: 100%; transition: transform var(--sx-t-slow) var(--sx-ease-back), filter var(--sx-t-slow); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .6)); }
.sx-trophy__body img { display: block; height: 100%; width: auto; user-select: none; }
/* 扫光只落在奖杯本体上：用奖杯图做遮罩 */
.sx-trophy__sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 247, 220, .85) 50%, transparent 62%) no-repeat; background-size: 250% 100%; background-position: 150% 0;
  -webkit-mask: var(--sx-trophy-src) center / 100% 100% no-repeat; mask: var(--sx-trophy-src) center / 100% 100% no-repeat;
  animation: sx-trophy-sheen 5.5s var(--sx-ease) infinite 1.2s; }
.sx-trophy__glow { position: absolute; z-index: 1; left: 50%; top: 34%; width: 230%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sx-beam) 38%, transparent), color-mix(in srgb, var(--sx-gold-3) 14%, transparent) 55%, transparent);
  transition: opacity var(--sx-t-slow); opacity: .75; }
.sx-trophy__rays { display: none; }
.sx-trophy--rays .sx-trophy__rays { display: block; position: absolute; z-index: 0; left: 50%; top: 34%; width: 340%; aspect-ratio: 1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--sx-beam) 22%, transparent) 0deg 5deg, transparent 5deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 72%); mask: radial-gradient(closest-side, #000 18%, transparent 72%);
  transform: translate(-50%, -50%); animation: sx-trophy-spin 40s linear infinite; opacity: .7; transition: opacity var(--sx-t-slow); }
.sx-trophy--float .sx-trophy__body { animation: sx-trophy-float 4.8s ease-in-out infinite; }
.sx-trophy:hover .sx-trophy__body { transform: translateY(-6px) scale(1.04); filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .6)) brightness(1.08); }
.sx-trophy:hover .sx-trophy__glow, .sx-trophy:hover .sx-trophy__rays { opacity: 1; }
.sx-trophy:hover .sx-trophy__sheen { animation: sx-trophy-sheen 900ms var(--sx-ease) 1; }
@keyframes sx-trophy-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes sx-trophy-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes sx-trophy-sheen { 0% { background-position: 150% 0; } 22%, 100% { background-position: -50% 0; } }

/* 领奖台上的奖杯：站在冠军勋章上方，底座压在皇冠后面 */
.sx-podium__item--r1 { display: flex; flex-direction: column; align-items: center; }
.sx-podium__trophy { position: relative; z-index: 0; margin-bottom: -18px; opacity: 0; transform: translateY(30px) scale(.9); transition: opacity 700ms var(--sx-ease), transform 900ms var(--sx-ease-back); transition-delay: 380ms; }
.sx-podium__trophy + .sx-medal { position: relative; z-index: 1; }
.sx-podium.is-in .sx-podium__trophy { opacity: 1; transform: none; }
@media (max-width: 900px) { .sx-podium__trophy .sx-trophy { --sx-trophy-h: 230px; } }
@media (max-width: 600px) { .sx-podium__trophy .sx-trophy { --sx-trophy-h: min(210px, 52vw); } }

/* ---------- 选手墙 ---------- */
.sx-wall { display: flex; flex-direction: column; gap: 24px; }
.sx-wall__bar { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.sx-wall__filter { min-height: 40px; min-width: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--sx-line-strong); background: transparent; color: var(--sx-text-2); font: inherit; font-size: 14px; cursor: pointer;
  transition: background var(--sx-t) var(--sx-ease), color var(--sx-t) var(--sx-ease), transform var(--sx-t-fast) var(--sx-ease), filter var(--sx-t-fast); }
.sx-wall__filter:hover { color: var(--sx-text); border-color: var(--sx-gold-2); }
.sx-wall__filter:active { transform: scale(.96); filter: brightness(1.15); }
.sx-wall__filter[aria-pressed="true"] { background: var(--sx-grad-gold); color: var(--sx-on-gold); border-color: transparent; font-weight: 700; }
.sx-wall__filter .sx-num { margin-left: 4px; }
.sx-wall__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 24px 12px; }
.sx-wall__group + .sx-wall__group { margin-top: 8px; }
.sx-wall__team { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--sx-line); font-size: 16px; color: var(--sx-gold-2); }
.sx-wall__team small { font-size: 12px; color: var(--sx-text-3); }
.sx-wall__empty { text-align: center; color: var(--sx-text-3); padding: 32px 0; margin: 0; }
.sx-wall__item { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; color: var(--sx-text); text-decoration: none; border-radius: var(--sx-r); padding: 4px 0;
  transition: transform var(--sx-t) var(--sx-ease-back), filter var(--sx-t-fast); }
a.sx-wall__item:hover { transform: translateY(-4px); }
a.sx-wall__item:hover .sx-wall__ring { filter: drop-shadow(0 0 6px var(--sx-gold-3)); }
a.sx-wall__item:active { transform: scale(.96); filter: brightness(1.15); }
.sx-wall__item.is-disabled { cursor: not-allowed; filter: grayscale(.85); opacity: .55; }
.sx-wall__avatar { position: relative; width: 100%; max-width: 104px; aspect-ratio: 1; border-radius: 50%; }
.sx-wall__avatar img, .sx-wall__avatar b { position: absolute; inset: 8%; width: 84%; height: 84%; border-radius: 50%; object-fit: cover; background: var(--sx-surface-3); }
.sx-wall__avatar b { display: grid; place-items: center; font-size: clamp(16px, 3vw, 28px); color: var(--sx-gold-2); font-weight: 800; }
.sx-wall__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: filter var(--sx-t); }
.sx-wall__item.is-live .sx-wall__avatar::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 2px var(--sx-cyan), 0 0 16px var(--sx-cyan); animation: sx-breathe 2.2s ease-in-out infinite; }
.sx-wall__tag { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); padding: 0 8px; border-radius: 999px; background: var(--sx-cyan); color: var(--sx-bg); font-size: 11px; font-weight: 800; line-height: 18px; white-space: nowrap; }
.sx-wall__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
@keyframes sx-breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (max-width: 900px) { .sx-wall__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sx-wall__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 8px; } .sx-wall__name { font-size: 12px; } .sx-wall__tag { font-size: 10px; padding: 0 5px; line-height: 16px; } }

/* ---------- 排行榜：行式列表，FLIP 由 JS 设置 transform ---------- */
.sx-rank { display: flex; flex-direction: column; gap: 8px; }
.sx-rank__row { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 84px; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; border-radius: var(--sx-r);
  background: var(--sx-surface); border: 1px solid var(--sx-line); transition: transform var(--sx-t-slow) var(--sx-ease), border-color var(--sx-t), background var(--sx-t); }
.sx-rank__row:hover { background: var(--sx-surface-2); border-color: var(--sx-line-strong); }
.sx-rank__row.is-q { border-color: color-mix(in srgb, var(--sx-cyan) 35%, transparent); }
.sx-rank__row.is-q::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--sx-cyan); }
.sx-rank__row.is-pending { opacity: .62; }
.sx-rank.is-in .sx-rank__row.is-enter { animation: sx-rank-in var(--sx-t-slow) var(--sx-ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.sx-rank:not(.is-in) .sx-rank__row.is-enter { opacity: 0; }
.sx-rank__row.is-flash { animation: sx-rank-flash 1.2s var(--sx-ease); }
@keyframes sx-rank-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes sx-rank-flash { 0% { background: color-mix(in srgb, var(--sx-gold-2) 40%, var(--sx-surface)); border-color: var(--sx-gold-1); box-shadow: var(--sx-glow-gold); } 100% { background: var(--sx-surface); } }
.sx-rank__pos { display: flex; justify-content: center; }
.sx-rank__chip { display: grid; place-items: center; width: 34px; height: 34px; font-size: 18px; color: var(--sx-on-gold); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.sx-rank__chip--gold { background: var(--sx-grad-gold); }
.sx-rank__chip--silver { background: var(--sx-grad-silver); }
.sx-rank__chip--bronze { background: var(--sx-grad-bronze); }
.sx-rank__no { font-size: 20px; color: var(--sx-text-2); }
.sx-rank__team { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.sx-rank__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 16px; }
.sx-rank__grp { flex: none; font-size: 12px; color: var(--sx-text-3); padding: 0 6px; border: 1px solid var(--sx-line); border-radius: 4px; line-height: 18px; }
.sx-rank__res { font-size: 13px; color: var(--sx-text-2); white-space: nowrap; text-align: right; }
.sx-rank__res b { font-size: 18px; margin-left: 4px; color: var(--sx-text); }
.sx-rank__res.is-clear, .sx-rank__res.is-clear b { color: var(--sx-cyan); }
.sx-rank__badge { display: flex; justify-content: flex-end; }
@media (max-width: 600px) {
  .sx-rank__row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 10px; padding: 8px 12px; }
  .sx-rank__pos { grid-row: 1 / 3; }
  .sx-rank__team { grid-column: 2; flex-wrap: wrap; gap: 2px 8px; }
  .sx-rank__res { grid-column: 2; grid-row: 2; text-align: left; }
  .sx-rank__badge { grid-column: 3; grid-row: 1 / 3; }
  .sx-rank__chip { width: 30px; height: 30px; font-size: 16px; }
}

/* ---------- 晋级流程：三栏，复活赛栏下移，让初赛连线从其上方空白处穿过 ---------- */
.sx-flow { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(32px, 7vw, 96px); align-items: start; }
.sx-flow__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sx-flow__path { fill: none; stroke: var(--sx-gold-2); stroke-width: 1.5; stroke-dasharray: 6 6; animation: sx-flow-dash 1.2s linear infinite; }
.sx-flow__path.is-tbd { stroke: var(--sx-line-strong); }
.sx-flow__dot { fill: var(--sx-gold-2); }
@keyframes sx-flow-dash { to { stroke-dashoffset: -24; } }
.sx-flow__col { position: relative; z-index: 1; padding: 16px; border-radius: var(--sx-r); background: var(--sx-surface); border: 1px solid var(--sx-line); }
.sx-flow__col--rep { margin-top: 150px; }
.sx-flow__col--final { border-color: var(--sx-line-strong); box-shadow: var(--sx-glow-gold); }
.sx-flow__h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 12px; font-size: 18px; font-weight: 800; color: var(--sx-gold-1); }
.sx-flow__h small { font-size: 12px; font-weight: 400; color: var(--sx-text-3); }
.sx-flow__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sx-flow__seat { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: var(--sx-r-sm); background: var(--sx-surface-2); border: 1px solid var(--sx-line); }
.sx-flow__seat:not(.is-tbd) { border-color: color-mix(in srgb, var(--sx-cyan) 40%, transparent); }
.sx-flow__pl { font-size: 12px; color: var(--sx-text-3); white-space: nowrap; }
.sx-flow__tn { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-flow__seat.is-tbd .sx-flow__tn { color: var(--sx-text-3); font-weight: 400; }
.sx-flow__note { margin: 12px 0 0; font-size: 12px; color: var(--sx-text-3); }
.sx-flow__note::after { content: " →"; }
.sx-flow__col--final .sx-flow__seat:nth-child(3) { margin-top: 72px; }
@media (max-width: 720px) {
  .sx-flow { grid-template-columns: 1fr; gap: 36px; }
  .sx-flow__lines { display: none; }
  .sx-flow__col--rep { margin-top: 0; }
  .sx-flow__col--final .sx-flow__seat:nth-child(3) { margin-top: 0; }
  .sx-flow__col + .sx-flow__col::before { content: ""; position: absolute; left: 50%; top: -36px; height: 36px; border-left: 2px dashed var(--sx-gold-3); animation: sx-flow-v 1.2s linear infinite; }
  .sx-flow__note::after { content: " ↓"; }
}
@keyframes sx-flow-v { 50% { opacity: .35; } }