a.thumb { display: block; }
.thumb > .play-btn { pointer-events: none; }
.clip-card .thumb .overlay-chip .i { --i-size: 12px; }
.clip-card .actions .btn { flex: 1; }
.clip-card .actions .icon-btn { flex: none; }
.clip-card.is-failed .thumb > img { filter: grayscale(.6) brightness(.5); }

.mrow-list { display: flex; flex-direction: column; gap: 6px; container: mxlist / inline-size; }
.mrow-l2 { display: contents; }
.mrow { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 156px 164px 76px 190px; grid-template-areas: "thumb id score stats rank state"; column-gap: 12px; align-items: center; min-height: 84px; padding: 12px 16px; background: var(--s2); border: 1px solid var(--bd-2); border-radius: var(--r-lg); transition: border-color 140ms ease, background-color 140ms ease, opacity 150ms ease, transform 160ms var(--ease-out); }
.mrow-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.mrow-link:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .mrow:not(.is-sk):hover { border-color: var(--bd-4); background: color-mix(in srgb, var(--s3) 55%, var(--s2)); }
  .mrow:not(.is-sk):hover .mrow-map { color: #FFFFFF; }
}
.mrow:not(.is-sk):active { transform: scale(0.99); }
.mrow.is-selected { border-color: var(--acc); box-shadow: inset 0 0 0 0.5px var(--acc); }
.mrow.is-selected .mrow-map { color: var(--acc); }
.mrow.is-new { animation: mx-arrive 150ms var(--ease-out) both; }
@keyframes mx-arrive { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.mrow-thumb { grid-area: thumb; position: relative; width: 56px; height: 56px; border-radius: var(--r-md); background: var(--s3); box-shadow: inset 0 0 0 1px var(--bd-2); overflow: hidden; }
.mrow-thumb > img.bg { left: 0; top: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.mrow-thumb > img { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; object-fit: contain; }

.mrow-id { grid-area: id; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.mrow-map { font-size: 17px; line-height: 22px; font-weight: 750; letter-spacing: -0.005em; color: var(--tx-1); transition: color 140ms ease; }
.mrow-when { font-size: 12px; line-height: 16px; color: var(--tx-3); white-space: nowrap; }
.mrow-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 1px; max-width: 100%; }
.mrow-tags .chip { height: 18px; padding: 0 6px; font-size: 11px; gap: 4px; }
.mrow-tags .chip .i { --i-size: 12px; }
.mx-mode { color: var(--tx-2); }
.mx-rtag { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 5px; margin-top: -1px; font-size: 11px; line-height: 14px; font-weight: 550; color: var(--tx-2); white-space: nowrap; cursor: help; }
.mx-rtag .i { color: var(--tx-3); }
.mrow-score { grid-area: score; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.mrow-sc { display: flex; align-items: center; gap: 8px; }
.sc { display: grid; grid-template-columns: 26px 12px 26px; align-items: center; width: 64px; font-size: 20px; line-height: 24px; font-weight: 650; letter-spacing: -0.02em; color: var(--tx-1); }
.sc b { font-weight: inherit; }
.sc b:first-child { text-align: right; }
.sc i { font-style: normal; text-align: center; color: var(--tx-3); font-weight: 500; transform: translateY(-1px); }
.mx-ot { height: 20px; padding: 0 6px; font-size: 11px; letter-spacing: .02em; color: var(--tx-1); background: var(--s4); border-color: var(--bd-4); }
.mrow-rs { display: flex; align-items: center; gap: 1px; min-height: 12px; }
.mrow-rs .roundstrip.sm { --cell: 4px; --gap: 1px; }
.mrow-rs .roundstrip.sm .rs-cell { height: 12px; border-radius: 1px; }
.mrow-rs .roundstrip .rs-sep { margin: 0 2px; background: var(--bd-4); }
.mx-rs-miss { display: inline-flex; gap: 1px; margin-left: 0; }
.mx-rs-miss i { width: 4px; height: 12px; border-radius: 1px; box-shadow: inset 0 0 0 1px var(--bd-4); }
.mrow.is-left .rs-cell:is([data-round="19"], [data-round="20"], [data-round="21"], [data-round="22"]) { opacity: .28; }
.mrow-rs.is-none { font-size: 13px; line-height: 12px; }

.mx-miss { position: relative; z-index: 2; color: var(--tx-3); cursor: help; }
.mrow-stats { grid-area: stats; display: grid; grid-template-columns: 66px 44px 42px; column-gap: 6px; }
.mrow-stats .st { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mrow-stats .k { font-size: 11px; line-height: 14px; font-weight: 500; color: var(--tx-3); white-space: nowrap; }
.mrow-stats .v { font-size: 13.5px; line-height: 18px; font-weight: 600; color: var(--tx-1); white-space: nowrap; }
.mrow-stats .v i { font-style: normal; color: var(--tx-3); font-weight: 500; padding: 0 0.5px; }
.mrow-stats .v.mx-miss { color: var(--tx-3); font-weight: 500; }
.mrow-stats .v.rating-hi { color: var(--ok); font-weight: 700; }
.mrow-stats .v.rating-lo { color: var(--bad); font-weight: 650; }

.mrow-rank { grid-area: rank; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.mrow-rank .delta { font-size: 12px; }
.mrow-rank .rk { font-size: 11px; line-height: 14px; font-weight: 500; color: var(--tx-3); }
.mx-elo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--tx-1); }
.mx-elo .lvl { width: 20px; height: 20px; font-size: 11px; border-width: 1.5px; }

.mrow-state { grid-area: state; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 7px; min-width: 0; text-align: right; }
.mx-st { flex: none; white-space: nowrap; }
.mx-st .i { flex: none; }
.mx-spin { width: 12px; height: 12px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; }
.mrow-sub { display: flex; justify-content: flex-end; gap: 3px; flex-wrap: nowrap; max-width: 100%; }
.mrow-sub.is-kinds { flex-wrap: nowrap; row-gap: 4px; min-width: 0; }
.mx-kind { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 5px 0 4px; border-radius: 4px; font-size: 11px; font-weight: 600; color: var(--tx-2); background: var(--s3); border: 1px solid var(--bd-2); white-space: nowrap; }
.mx-kind .i { --i-size: 12px; color: var(--tx-3); }
.mx-kind.is-pending, .mx-kind.is-more { position: relative; z-index: 2; cursor: help; }
.mx-kind.is-pending { background: transparent; border-style: dashed; border-color: var(--bd-4); color: var(--tx-3); }
.mx-kind.is-more { background: transparent; border-color: transparent; color: var(--tx-3); padding: 0 2px; }
.mx-act { position: relative; z-index: 2; gap: 3px; padding: 0 6px 0 9px; }
.mx-act .i { color: var(--tx-3); }
.mrow-sub.is-meta { font-variant-numeric: tabular-nums; }
.mrow-chev { grid-area: chev; display: none; color: var(--tx-3); }
.mrow-act { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--tx-2); }
.mrow.is-unparsed .mrow-score .sc { color: var(--tx-3); }
.chip .spinner { width: 12px; height: 12px; border-width: 1.5px; }

.mrow.is-sk { pointer-events: none; }
.mrow.is-sk .sk, aside .sk { background: var(--s4); }
.sk-code { display: inline-block; flex: none; white-space: nowrap; width: max-content; padding: 0 2px; border-radius: 4px; font-size: 12px; line-height: 16px; color: transparent; }
.mrow.is-sk .mrow-score .sk-code { font-size: 18px; line-height: 22px; }
.mx-sk { display: flex; flex-direction: column; gap: 6px; container: mxlist / inline-size; }
@container mxlist (max-width: 799px) {
  .mrow { grid-template-columns: 44px minmax(0, 1fr) 156px 112px 76px 190px; column-gap: 12px; padding: 12px; }
  .mrow-thumb { width: 44px; height: 40px; }
  .mrow-stats { grid-template-columns: 66px 42px; }
  .mrow-stats .st-adr { display: none; }
}
@container mxlist (max-width: 739px) {
  .mrow { grid-template-columns: 40px minmax(0, 1fr) auto 12px; grid-template-areas: "thumb id status chev" "l2 l2 l2 chev"; column-gap: 8px; row-gap: 7px; min-height: 0; padding: 9px 8px 10px 10px; align-items: center; }
  .mrow-thumb { width: 40px; height: 34px; align-self: center; }
  .mrow-thumb > img { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
  .mrow-id { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 1px; }
  .mrow-map { flex-basis: 100%; line-height: 19px; }
  .mrow-tags { margin-top: 0; }
  .mrow-tags .chip { height: 17px; padding: 0 5px; font-size: 11px; }
  .mrow-state { display: contents; }
  .mx-st { grid-area: status; justify-self: end; align-self: center; white-space: normal; height: auto; min-height: 22px; max-width: 150px; padding-block: 3px; line-height: 14px; text-align: left; }
  .mrow-sub { display: none; }
  .mrow-l2 { grid-area: l2; display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 6px; min-width: 0; min-height: 22px; }
  .mrow-score { display: contents; }
  .mrow-sc { order: 1; flex: none; gap: 6px; }
  .mrow-sc .result { width: 20px; height: 20px; }
  .mrow-rs { order: 1; flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .mrow-rs .roundstrip.sm { --cell: 3px; --gap: 1px; }
  .mrow-rs .roundstrip .rs-sep { margin: 0 2px; }
  .mx-rs-miss i { width: 3px; }
  .mx-rtag { order: 3; flex-basis: 100%; margin-top: 0; }
  .mrow-stats { order: 4; flex: 1 1 100%; display: flex; align-items: center; gap: 14px; }
  .mrow-stats .st { flex-direction: row; align-items: baseline; gap: 5px; }
  .mrow-stats .st-adr { display: flex; }
  .mrow-rank { order: 2; flex: none; margin-left: auto; flex-direction: row-reverse; align-items: center; gap: 6px; }
  .mrow-rank .rk { display: none; }
  .mrow-chev { display: flex; align-self: center; }
  .mrow.is-sk .mrow-state { display: flex; grid-area: status; }
  .mrow.is-sk .mrow-id { flex-direction: column; align-items: flex-start; gap: 7px; }
  .mrow.is-sk .mrow-score { display: flex; order: 1; flex: 1 1 auto; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; }
  .mrow.is-sk .mrow-score .sk-code { font-size: 16px; line-height: 20px; }
  .mrow.is-sk .mrow-score > .sk:not(.sk-code) { flex: 0 1 auto; min-width: 0; max-width: 88px; }
  .mrow.is-sk .mrow-rank > :last-child { display: none; }
}
@container mxlist (max-width: 339px) {
  .mrow-stats .st-adr { display: none; }
}
@container mxlist (max-width: 459px) {
  .mrow-l2 { gap: 8px; }
  .mx-unit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sc { font-size: 20px; line-height: 24px; grid-template-columns: 24px 10px 24px; width: 60px; }
  .mrow-stats .st .k { font-size: 11px; }
}
.rs-cell.is-away { opacity: .28; }

.kit-section { display: flex; flex-direction: column; gap: var(--sp-4); scroll-margin-top: calc(var(--topbar-h) + var(--sp-4)); }
.kit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); }
.kit-swatch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.kit-kinds { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.heat-grid { display: grid; grid-template-columns: 110px repeat(var(--heat-cols), minmax(0, 1fr)); gap: 3px; font-size: 12px; }
.heat-col { color: var(--tx-3); text-align: center; font-size: 11px; padding-bottom: 4px; }
.heat-row { color: var(--tx-2); display: flex; align-items: center; }
.heat-cell { height: 30px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 11.5px; background: color-mix(in srgb, var(--acc) var(--heat), var(--s1)); color: var(--tx-1); }
.heat-cell.is-hot { color: var(--tx-inv); }

.upsell-dlg .modal-head { align-items: flex-start; }
.upsell-dlg .modal-head p { margin-top: 8px; font-size: 13.5px; line-height: 1.55; max-width: 46ch; }
.upsell-dlg .modal-foot .btn[hidden] { display: none; }
@media (max-width: 480px) { .upsell-dlg .modal-foot { flex-direction: column-reverse; align-items: stretch; } .upsell-dlg .modal-foot .btn { width: 100%; justify-content: center; } }


.roundstrip[data-interactive]:not(.is-overflow) { touch-action: pan-y; }
.rs-peek { position: fixed; z-index: 60; top: 0; left: 0; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--r-pill); background: var(--s3); border: 1px solid var(--bd-4); box-shadow: var(--shadow-pop); font-size: 13px; color: var(--tx-2); white-space: nowrap; pointer-events: none; }
.rs-peek.is-below { transform: translate(-50%, 0); }
.rs-peek[hidden] { display: none; }
.rs-peek b { color: var(--tx-1); font-weight: 650; }

.inapp { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r-md); background: var(--s2); border: 1px solid var(--bd-2); }
.inapp[hidden] { display: none; }
.inapp .hd { display: flex; gap: 12px; align-items: flex-start; }
.inapp .ic { width: 36px; height: 36px; flex: none; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--tg) 14%, var(--s2)); color: var(--tg); }
.inapp .ic.is-faceit { background: color-mix(in srgb, var(--faceit) 14%, var(--s2)); color: var(--faceit); }
.inapp .ic.is-download, .inapp .ic.is-pay { background: var(--s3); color: var(--tx-2); }
.inapp p { font-size: 13.5px; line-height: 19px; color: var(--tx-1); }
.inapp .ctx { font-size: 12px; color: var(--tx-3); margin-top: 3px; }
.inapp .row-2 { flex-wrap: wrap; }
.inapp .row-2 .btn { flex: 1 1 150px; }

.modal-foot > .auth-row { flex: 1 1 100%; }
@container app (max-width: 760px) {
  .modal-foot > .auth-row.is-equal > .btn { flex: none; width: 100%; }
}

.bell-pop-note { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--tx-2); font-size: 13.5px; line-height: 20px; }
.bell-pop-note p { margin: 0; }
.bell-pop-count { margin-right: var(--sp-1); }

.cmdk-note { display: flex; align-items: center; gap: var(--sp-3); flex: none; padding: 10px var(--sp-4); border-bottom: 1px solid var(--bd-2); background: var(--warn-sub); color: var(--tx-1); font-size: 13px; line-height: 1.4; }
.cmdk-note[hidden] { display: none; }
.cmdk-note > .i { flex: none; color: var(--warn); }
.cmdk-note > span { flex: 1; min-width: 0; }

.hist-job { flex-wrap: wrap; }
.hist-job .grow { flex: 1 1 220px; min-width: 0; }
.hist-job .btn { flex: none; }
.hist-wrap { display: contents; }
.hist-card { container: hist / inline-size; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); border-color: color-mix(in srgb, var(--info) 35%, var(--bd-2)); }
.hist-card[hidden] { display: none; }
.hist-card-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.hist-card-ico { flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--info-sub); color: var(--info); }
.hist-card-intro { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hist-card-title { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--tx-1); }
.hist-card-lead { font-size: 13px; line-height: 19px; color: var(--tx-2); max-width: 72ch; }
.hist-card-x { flex: none; margin: -4px -6px 0 0; }
.hist-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.hist-step { display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; padding: var(--sp-3); border-radius: var(--r-md); background: var(--s1); border: 1px solid var(--bd-1); }
.hist-step-n { flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: var(--info-sub); border: 1px solid color-mix(in srgb, var(--info) 40%, transparent); color: var(--info); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.hist-step-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.hist-step-t { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--tx-1); }
.hist-path { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.hist-path > .i { --i-size: 14px; color: var(--tx-3); }
.hist-crumb { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-sm); background: var(--s3); border: 1px solid var(--bd-3); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.hist-ru { font-size: 12px; line-height: 17px; color: var(--tx-3); }
.hist-ru span { color: var(--tx-2); font-weight: 550; }
.hist-ml { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hist-ml li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: 6px; background: var(--s2); border: 1px solid var(--bd-1); font-size: 12px; font-weight: 550; }
.hist-ml img { width: 16px; height: 16px; object-fit: contain; }
.hist-ml li.is-pick { font-weight: 650; border-color: color-mix(in srgb, var(--info) 55%, transparent); background: color-mix(in srgb, var(--info) 12%, var(--s2)); }
.hist-dim { display: block; width: 36px; height: 6px; border-radius: var(--r-pill); background: var(--bd-3); }
.hist-pick { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--r-pill); background: var(--info-sub); color: var(--info); font-size: 11px; font-weight: 600; white-space: nowrap; }
.hist-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); height: 44px; padding: 0 8px 0 12px; border-radius: var(--r-md); background: var(--s2); border: 1px solid var(--bd-1); }
.hist-bar .hist-dim { width: 64px; }
.hist-tools { display: inline-flex; align-items: center; gap: 6px; }
.hist-tool { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--s3); border: 1px solid var(--bd-3); color: var(--tx-2); }
.hist-tool.is-pick { color: var(--info); border-color: var(--info); background: color-mix(in srgb, var(--info) 14%, var(--s3)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 22%, transparent); }
.hist-form .field { gap: 8px; }
.hist-input { flex: 1 1 260px; min-width: 0; }
.hist-alt { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: 12.5px; line-height: 18px; color: var(--tx-3); }
.hist-alt .i { margin-top: 1px; }
.hist-alt .link { font-weight: 600; }
@container app (max-width: 760px) {
  .hist-card { padding: var(--sp-4); }
}
@container hist (max-width: 759px) {
  .hist-steps { grid-template-columns: minmax(0, 1fr); }
  .hist-form .btn { flex: 1 1 100%; }
}

dialog.modal.offer-dlg { width: min(640px, calc(100vw - 32px)); overflow: hidden; }
.offer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.offer-head { padding: var(--sp-5) var(--sp-5) var(--sp-3); }
.offer-head h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.offer-head p { margin-top: 6px; font-size: 13.5px; line-height: 1.55; max-width: 52ch; }
.offer-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; padding: 4px var(--sp-5) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sp-5); scrollbar-width: none; overscroll-behavior-x: contain; }
.offer-track::-webkit-scrollbar { display: none; }
.offer-card { scroll-snap-align: center; display: flex; flex-direction: column; min-width: 0; padding: 16px; border: 1px solid var(--bd-3); border-radius: var(--r-lg); background: var(--s3); cursor: pointer; transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out), transform 160ms var(--ease-out); }
.offer-card:active { transform: scale(.98); }
.offer-card:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.offer-card.is-picked { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 7%, var(--s3)); box-shadow: inset 0 0 0 1px var(--acc); }
.offer-top { display: flex; flex-direction: column; gap: 2px; }
.offer-name { font-size: 16px; font-weight: 700; }
.offer-aud { font-size: 12.5px; color: var(--tx-3); }
.offer-price { margin: 12px 0 14px; font-size: 13px; color: var(--tx-2); }
.offer-price .num { font-size: 26px; font-weight: 750; letter-spacing: -0.01em; color: var(--tx-1); }
.offer-feats { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.45; color: var(--tx-2); }
.offer-feats li { display: flex; align-items: flex-start; gap: 8px; }
.offer-feats .i { flex: none; margin-top: 1px; color: var(--acc); }
.offer-dots { display: none; justify-content: center; gap: 6px; padding-top: 12px; }
.offer-dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--bd-4); transition: width 200ms var(--ease-out), background-color 200ms var(--ease-out); }
.offer-dots span.is-on { width: 18px; background: var(--acc); }
.offer-foot { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: var(--sp-4) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--bd-1); }
.offer-buy { width: 100%; justify-content: center; }
.offer-note { margin: 0; text-align: center; color: var(--tx-2); }
.offer-free { align-self: center; padding: 8px 12px; border: 0; border-radius: var(--r-sm); background: none; font-size: 12.5px; color: var(--tx-3); }
@media (hover: hover) and (pointer: fine) { .offer-free:hover { color: var(--tx-2); } .offer-card:not(.is-picked):hover { border-color: var(--bd-4); } }
@media (max-width: 600px) {
  .offer-head { padding-top: var(--sp-4); }
  .offer-head h2 { font-size: 18px; }
  .offer-track { grid-auto-columns: 70%; }
  .offer-price { margin: 8px 0 10px; }
  .offer-price .num { font-size: 22px; }
  .offer-dots { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .offer-card, .offer-dots span { transition: none; } }

.mrow-word { font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.mrow-word.is-win { color: var(--ok); }
.mrow-word.is-loss { color: var(--bad); }
.mrow-word.is-tie { color: var(--tx-2); }
.mrow-sc { flex-wrap: wrap; row-gap: 2px; }
.mrow-sc .sc { font-weight: 800; }
@container mxlist (max-width: 739px) {
  .mrow { grid-template-columns: 48px minmax(0, 1fr) auto 12px; column-gap: 12px; }
  .mrow-rs, .mrow-rank, .mrow-state .chip--ok.mx-st { display: none; }
  .mrow-thumb { width: 48px; height: 48px; }
  .mrow-thumb > img.bg { margin: 0; }
  .mrow-map { font-size: 16px; }
}

.dh-list li .i { color: var(--tx-3); flex: none; }
.dh-list li b { color: var(--tx-1); font-weight: 600; }
.demo-why { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 13px; font-weight: 500; color: var(--tx-2); background: none; border: 0; padding: 8px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.demo-why:hover { color: var(--tx-1); }