/* GENERATED from design/proposals/storefront-player-mock/index.html by scratchpad/port_css.py (2026-10-20).
   The mock's CSS rooted under .mk with every class renamed mk-<name>, and its hard-coded dark colors turned into palette tokens (--bg, --panel, --ink, --muted, --accent, --accent-ink) so any theme works. Edit the mock + re-run, or add overrides in mk-bridge.css. */

/* ==== main ==== */
.mk { --bg: #0d0d0d; --panel: #171717; --panel-2: #1f1f1f; --line: #303030; --ink: #f4f4f4; --muted: #a6a6a6; --accent: #e42024; --accent-ink: #ffffff; --font: "Instrument Sans", Arial, sans-serif; color-scheme: dark; }
.mk, .mk * { box-sizing: border-box; }
.mk { height: 100%; }
.mk { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.4; padding-bottom: 96px; -webkit-font-smoothing: antialiased; }
.mk button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.mk button:focus-visible, .mk input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mk svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mk svg.mk-fill { fill: currentColor; stroke: none; }
.mk .mk-mockbar { background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 600; text-align: center; padding: 8px 16px; letter-spacing: 0.02em; }
.mk .mk-hdr { height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: clamp(16px, 4vw, 56px); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 98%, var(--ink)); }
.mk .mk-hdr nav { display: flex; gap: 8px; }
.mk .mk-hdr nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 14px; border-radius: 8px; min-height: 44px; display: flex; align-items: center; }
.mk .mk-hdr nav a:hover { background: var(--panel-2); }
.mk .mk-brand { text-align: center; line-height: 1; }
.mk .mk-brand b { display: block; color: var(--accent); font-size: 30px; font-weight: 700; letter-spacing: -0.07em; }
.mk .mk-brand small { display: block; font-size: 12px; letter-spacing: 0.2em; color: var(--muted); margin-top: 4px; font-weight: 600; }
.mk .mk-tools { display: flex; justify-content: flex-end; gap: 2px; }
.mk .mk-tools button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; position: relative; }
.mk .mk-tools button:hover { background: var(--panel-2); }
.mk .mk-badge { position: absolute; top: 4px; right: 3px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; }
.mk .mk-band { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); isolation: isolate; }
.mk .mk-band-bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(46px) saturate(1.2); opacity: 0.42; z-index: -2; transition: background-image 0.4s; }
.mk .mk-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent), var(--bg)); z-index: -1; }
.mk .mk-band-in { max-width: 1200px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 40px); display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 28px; align-items: center; }
.mk .mk-cover { width: 100%; aspect-ratio: 1; border-radius: 12px; object-fit: cover; display: block; background: var(--panel); box-shadow: 0 12px 40px rgba(0,0,0,0.5); }
.mk .mk-eyebrow { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.mk .mk-band h1 { margin: 0; font-size: clamp(30px, 4.6vw, 52px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; text-wrap: balance; }
.mk .mk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; color: var(--muted); font-size: 14px; font-weight: 500; }
.mk .mk-meta .mk-sep { color: var(--line); }
.mk .mk-chip { display: inline-flex; align-items: center; height: 26px; padding-inline: 10px; border-radius: 13px; background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); font-size: 12px; font-weight: 600; }
.mk .mk-wf-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 18px; }
.mk .mk-t { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 38px; }
.mk .mk-t.mk-end { text-align: right; }
.mk .mk-wf { display: flex; align-items: center; gap: 1px; cursor: pointer; touch-action: none; user-select: none; }
.mk .mk-wf i { flex: 1 1 0; min-width: 0; background: color-mix(in srgb, var(--ink) 28%, transparent); border-radius: 2px; transition: background 0.08s; }
.mk .mk-wf i.mk-on { background: var(--accent); }
.mk .mk-wf.mk-big { height: 56px; }
.mk .mk-wf.mk-mini { height: 34px; }
.mk .mk-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.mk .mk-play { width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: color-mix(in srgb, var(--bg) 97.5%, var(--ink)); display: grid; place-items: center; }
.mk .mk-play:hover { background: #fff; transform: scale(1.04); }
.mk .mk-play svg { width: 24px; height: 24px; }
.mk .mk-buy { height: 48px; padding-inline: 22px; border-radius: 24px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.mk .mk-buy:hover { filter: brightness(1.1); }
.mk .mk-ghost { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.mk .mk-ghost:hover { background: var(--panel-2); }
.mk .mk-ghost.mk-on { color: var(--accent); border-color: var(--accent); }
.mk .mk-ghost.mk-on svg { fill: currentColor; }
.mk .mk-catalog { max-width: 1200px; margin: 28px auto 0; padding-inline: clamp(16px, 4vw, 40px); }
.mk .mk-tools-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.mk .mk-tabs { display: flex; gap: 6px; }
.mk .mk-tabs button { padding: 10px 14px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--muted); min-height: 44px; }
.mk .mk-tabs button[aria-pressed="true"] { color: var(--ink); background: var(--panel-2); }
.mk .mk-count { color: var(--muted); font-size: 14px; }
.mk .mk-list { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.mk .mk-head, .mk .mk-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 64px 56px 92px 76px 132px; gap: 12px; align-items: center; padding-inline: 16px; }
.mk .mk-head { height: 40px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
.mk .mk-row { min-height: 68px; border-bottom: 1px solid var(--line); cursor: pointer; }
.mk .mk-row:last-child { border-bottom: 0; }
.mk .mk-row[hidden] { display: none; }
.mk .mk-row:hover { background: var(--panel-2); }
.mk .mk-row.mk-active { background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
.mk .mk-row .mk-thumb { position: relative; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; }
.mk .mk-row .mk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk .mk-row .mk-thumb .mk-pp { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.55); opacity: 0; color: #fff; }
.mk .mk-row .mk-name { font-weight: 600; font-size: 16px; min-width: 0; }
.mk .mk-row .mk-name span { display: block; white-space: nowrap; overflow: hidden; }
.mk .mk-row .mk-chips { display: flex; gap: 6px; margin-top: 4px; }
.mk .mk-row .mk-sub { display: none; color: var(--muted); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; }
.mk .mk-row .mk-chips .mk-chip { height: 22px; font-size: 12px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.mk .mk-row .mk-num { color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.mk .mk-row .mk-num.mk-dim { color: var(--muted); }
.mk .mk-row .mk-acts { display: flex; gap: 0; }
.mk .mk-row .mk-acts button { width: 36px; height: 40px; display: grid; place-items: center; color: var(--muted); }
.mk .mk-row .mk-acts button svg { width: 18px; height: 18px; }
.mk .mk-row .mk-acts button:hover { color: var(--ink); }
.mk .mk-row .mk-acts button.mk-on { color: var(--accent); }
.mk .mk-row .mk-acts button.mk-on svg { fill: currentColor; }
.mk .mk-row .mk-price { height: 40px; border-radius: 20px; border: 1px solid var(--line); font-weight: 700; font-size: 14px; background: color-mix(in srgb, var(--bg) 98.5%, var(--ink)); width: 100%; }
.mk .mk-row .mk-price:hover { border-color: var(--ink); }
.mk .mk-row.mk-active .mk-price { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.mk .mk-more { display: flex; justify-content: center; margin: 22px 0 8px; }
.mk .mk-more button { height: 44px; padding-inline: 22px; border-radius: 22px; border: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.mk .mk-more button:hover { background: var(--panel-2); }
.mk .mk-widget { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.mk .mk-widget .mk-list { border: 0; border-radius: 0; background: transparent; }
.mk .mk-w-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 0; border-bottom: 1px solid var(--line); }
.mk .mk-w-top .mk-tabs button { border-radius: 0; background: none !important; border-bottom: 2px solid transparent; padding-inline: 12px; }
.mk .mk-w-top .mk-tabs button[aria-pressed="true"] { border-bottom-color: var(--accent); }
.mk .mk-search { display: flex; align-items: center; gap: 10px; height: 48px; margin: 14px 16px 0; padding-inline: 14px; border-radius: 24px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); }
.mk .mk-search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--ink); font: inherit; font-size: 15px; outline: none; height: 100%; }
.mk .mk-search:focus-within { border-color: var(--ink); }
.mk .mk-filters { display: flex; gap: 8px; padding: 12px 16px 0; overflow-x: auto; scrollbar-width: none; }
.mk .mk-filters::-webkit-scrollbar { display: none; }
.mk .mk-fbtn { flex: none; height: 40px; padding-inline: 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel-2); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.mk .mk-fbtn svg { width: 16px; height: 16px; }
.mk .mk-fbtn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.mk .mk-fbtn[aria-pressed="true"] svg { fill: currentColor; }
.mk .mk-stags { display: flex; align-items: center; gap: 4px; padding: 6px 16px 10px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin-top: 6px; }
.mk .mk-stags::-webkit-scrollbar { display: none; }
.mk .mk-stags span { flex: none; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-right: 6px; }
.mk .mk-stags button { flex: none; height: 36px; padding-inline: 10px; font-size: 14px; font-weight: 600; color: var(--ink); border-radius: 18px; }
.mk .mk-stags button:hover, .mk .mk-stags button[aria-pressed="true"] { color: var(--accent); }
.mk .mk-empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.mk .mk-bundle { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); flex-wrap: wrap; }
.mk .mk-bundle b { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.mk .mk-bundle .mk-bd { color: var(--muted); font-size: 14px; flex: 1; min-width: 200px; }
.mk .mk-bundle .mk-bt { font-size: 13px; font-weight: 700; }
.mk .mk-bundle .mk-vr { width: 1px; align-self: stretch; background: var(--line); }
.mk .mk-bar { position: fixed; left: 0; right: 0; bottom: 0; height: 84px; background: color-mix(in srgb, var(--bg) 98.5%, var(--ink)); border-top: 1px solid var(--line); z-index: 30; padding-bottom: env(safe-area-inset-bottom, 0px); }
.mk .mk-prog { position: absolute; left: 0; right: 0; top: -1px; height: 4px; background: color-mix(in srgb, var(--ink) 14%, transparent); cursor: pointer; }
.mk .mk-prog::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: var(--accent); }
.mk .mk-prog::after { content: ""; position: absolute; left: -8px; right: -8px; top: -10px; bottom: -10px; }
.mk .mk-bar-in { height: 100%; display: grid; grid-template-columns: minmax(220px, 1.1fr) auto minmax(180px, 1.6fr) auto; gap: 20px; align-items: center; padding-inline: clamp(12px, 2vw, 28px); }
.mk .mk-now { display: flex; align-items: center; gap: 12px; min-width: 0; text-align: left; }
.mk .mk-now img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: none; }
.mk .mk-now .mk-tt { min-width: 0; }
.mk .mk-now .mk-tt b { display: block; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.mk .mk-now .mk-tt #barMeta { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.mk .mk-ctrls { display: flex; align-items: center; gap: 2px; }
.mk .mk-ctrls button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); }
.mk .mk-ctrls button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.mk .mk-ctrls .mk-mode { color: var(--muted); }
.mk .mk-ctrls .mk-mode[aria-pressed="true"] { color: var(--accent); }
.mk .mk-ctrls .mk-main { width: 52px; height: 52px; background: var(--ink); color: color-mix(in srgb, var(--bg) 97.5%, var(--ink)); margin-inline: 4px; }
.mk .mk-ctrls .mk-main:hover { background: #fff; }
.mk .mk-mid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; min-width: 0; }
.mk .mk-right { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.mk .mk-right button.mk-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); }
.mk .mk-right button.mk-ic:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.mk .mk-right button.mk-ic.mk-on { color: var(--accent); }
.mk .mk-right button.mk-ic.mk-on svg.mk-heart { fill: currentColor; }
.mk .mk-vol { display: flex; align-items: center; gap: 6px; }
.mk .mk-vol input { width: 84px; accent-color: var(--accent); }
.mk .mk-bar .mk-buy { height: 44px; margin-left: 6px; }
.mk .mk-queue { position: fixed; right: clamp(12px, 2vw, 28px); bottom: 96px; width: min(360px, calc(100vw - 24px)); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); z-index: 40; overflow: hidden; }
.mk .mk-queue h3 { margin: 0; padding: 14px 16px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.mk .mk-queue button { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 8px 16px; text-align: left; min-height: 56px; }
.mk .mk-queue button:hover { background: var(--panel-2); }
.mk .mk-queue img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
.mk .mk-queue b { display: block; font-size: 14px; }
.mk .mk-queue small { color: var(--muted); font-size: 13px; }
.mk .mk-queue .mk-tm { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.mk .mk-sheet { position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 98.5%, var(--ink)); z-index: 60; display: none; flex-direction: column; padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px)); gap: 16px; overflow-y: auto; }
.mk .mk-sheet.mk-open { display: flex; }
.mk .mk-sheet .mk-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.mk .mk-sheet .mk-top button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.mk .mk-sheet .mk-cover { max-width: 340px; margin-inline: auto; }
.mk .mk-sheet h2 { margin: 0; font-size: 28px; letter-spacing: -0.03em; text-align: center; }
.mk .mk-sheet .mk-meta { justify-content: center; }
.mk .mk-sheet .mk-ctrls { justify-content: center; }
.mk .mk-sheet .mk-wf-row { margin-top: 4px; }
.mk .mk-sheet .mk-buy { justify-content: center; width: 100%; }
@media (min-width: 781px) {
.mk .mk-wf.mk-big { gap: 2px; }
}
@media (max-width: 1100px) {
.mk .mk-head, .mk .mk-row { grid-template-columns: 56px minmax(0, 1fr) 56px 88px 128px; }
.mk .mk-head .mk-hk, .mk .mk-row .mk-hk, .mk .mk-head .mk-ht, .mk .mk-row .mk-ht { display: none; }
.mk .mk-bar-in { grid-template-columns: minmax(180px, 1fr) auto minmax(120px, 1fr) auto; }
.mk .mk-vol input { display: none; }
}
@media (max-width: 780px) {
.mk .mk-hdr { grid-template-columns: auto 1fr auto; height: 64px; }
.mk .mk-hdr nav { display: none; }
.mk .mk-brand { text-align: left; }
.mk .mk-band-in { display: block; padding-block: 20px; }
.mk .mk-band .mk-cover { float: left; width: 104px; margin: 0 16px 8px 0; }
.mk .mk-band-in > div { overflow: visible; }
.mk .mk-band .mk-wf-row { clear: both; }
.mk .mk-band h1 { font-size: 28px; }
.mk .mk-wf-row, .mk .mk-cta .mk-ghost {  }
.mk .mk-head { display: none; }
.mk .mk-catalog { padding-inline: 8px; }
.mk .mk-row { grid-template-columns: 44px minmax(0, 1fr) auto 72px; gap: 6px; min-height: 64px; padding-inline: 10px; }
.mk .mk-row .mk-hb, .mk .mk-row .mk-ht, .mk .mk-row .mk-hk, .mk .mk-row .mk-chips { display: none; }
.mk .mk-row .mk-sub { display: block; }
.mk .mk-row .mk-name { font-size: 15px; }
.mk .mk-row .mk-name span { white-space: nowrap; }
.mk .mk-row .mk-sub { font-size: 12px; }
.mk .mk-row .mk-thumb { width: 44px; height: 44px; }
.mk .mk-row .mk-acts button { width: 28px; }
.mk .mk-row .mk-price { font-size: 13px; }
.mk .mk-search { margin-inline: 12px; }
.mk .mk-filters, .mk .mk-stags { padding-inline: 12px; }
.mk .mk-w-top { padding-inline: 4px; }
.mk .mk-bundle { padding: 14px 16px; gap: 10px; }
.mk .mk-bundle .mk-vr { display: none; }
.mk .mk-bar { height: 76px; }
.mk .mk-bar-in { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.mk .mk-bar .mk-ctrls #shuf, .mk .mk-mid, .mk .mk-vol, .mk .mk-right button.mk-ic, .mk .mk-right button.mk-qbtn { display: none; }
.mk .mk-brand small { display: none; }
.mk .mk-brand b { font-size: 28px; }
.mk .mk-fr { display: none; }
.mk .mk-tools button { width: 40px; }
.mk .mk-hdr { padding-inline: 12px; }
.mk .mk-row .mk-price { padding-inline: 0; }
.mk .mk-bar .mk-buy { padding-inline: 14px; height: 44px; font-size: 14px; }
.mk .mk-now img { width: 48px; height: 48px; }
.mk .mk-queue { bottom: 88px; }
.mk { padding-bottom: 88px; }
}
.mk .mk-shrow { display: flex; justify-content: center; gap: 12px; }
.mk .mk-shrow button { height: 40px; padding-inline: 16px; border-radius: 20px; border: 1px solid var(--line); display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.mk .mk-shrow button svg { width: 16px; height: 16px; }
.mk .mk-shrow button.mk-on { color: var(--accent); border-color: var(--accent); }
.mk .mk-shrow button.mk-on svg.mk-heart { fill: currentColor; }
@media (prefers-reduced-motion: reduce) {
.mk, .mk * { transition: none !important; }
}
.mk .mk-hdr { height: 56px; }
.mk .mk-brand b { font-size: 24px; }
.mk .mk-brand small { font-size: 12px; margin-top: 2px; letter-spacing: 0.16em; }
.mk .mk-hdr nav a { font-size: 12px; min-height: 40px; padding: 10px 12px; }
.mk .mk-tools button { width: 40px; height: 40px; }
.mk .mk-tools svg { width: 18px; height: 18px; }
.mk .mk-band-in { grid-template-columns: 148px minmax(0, 1fr); gap: 22px; padding-block: 18px; max-width: 1100px; }
.mk .mk-cover { border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
.mk .mk-eyebrow { font-size: 12px; margin-bottom: 4px; letter-spacing: 0.12em; }
.mk .mk-band h1 { font-size: clamp(24px, 3vw, 36px); }
.mk .mk-meta { font-size: 13px; margin-top: 6px; gap: 4px 10px; }
.mk .mk-chip { height: 22px; font-size: 12px; padding-inline: 9px; }
.mk .mk-wf-row { margin-top: 12px; gap: 10px; }
.mk .mk-wf.mk-big { height: 40px; }
.mk .mk-wf.mk-mini { height: 28px; }
.mk .mk-t { font-size: 12px; min-width: 32px; }
.mk .mk-cta { margin-top: 12px; gap: 10px; }
.mk .mk-play { width: 44px; height: 44px; }
.mk .mk-play svg { width: 20px; height: 20px; }
.mk .mk-buy { height: 40px; padding-inline: 18px; font-size: 14px; }
.mk .mk-ghost { width: 40px; height: 40px; }
.mk .mk-catalog { max-width: 1100px; margin-top: 14px; }
.mk .mk-widget { border: 0; background: none; border-radius: 0; overflow: visible; }
.mk .mk-search { height: 40px; margin: 0; padding-inline: 12px; border-radius: 20px; gap: 8px; }
.mk .mk-search svg { width: 16px; height: 16px; }
.mk .mk-search input { font-size: 14px; }
.mk .mk-filters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 8px 0 0; overflow: visible; }
.mk .mk-fbtn { height: 32px; padding: 0 6px; font-size: 13px; justify-content: center; border-radius: 16px; }
.mk .mk-fbtn svg { width: 14px; height: 14px; }
.mk .mk-stags { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 2px; padding: 6px 0 6px; margin-top: 2px; overflow: hidden; border-bottom: 1px solid var(--line); }
.mk .mk-stags span { font-size: 12px; letter-spacing: 0.06em; margin-right: 4px; }
.mk .mk-stags button { height: 28px; padding-inline: 7px; font-size: 12px; }
.mk .mk-badge[hidden] { display: none; }
.mk .mk-widget .mk-list { border-top: 0; }
.mk .mk-head, .mk .mk-row { grid-template-columns: 44px minmax(0, 1fr) 56px 48px 84px 68px 104px; gap: 10px; padding-inline: 4px; }
.mk .mk-head { height: 30px; font-size: 12px; letter-spacing: 0.08em; }
.mk .mk-row { min-height: 52px; }
.mk .mk-row .mk-thumb { width: 40px; height: 40px; border-radius: 6px; }
.mk .mk-row .mk-name { font-size: 14px; }
.mk .mk-row .mk-chips { margin-top: 2px; }
.mk .mk-row .mk-chips .mk-chip { height: 18px; font-size: 12px; padding-inline: 8px; }
.mk .mk-row .mk-num { font-size: 13px; }
.mk .mk-row .mk-acts button { width: 32px; height: 36px; }
.mk .mk-row .mk-acts button svg { width: 16px; height: 16px; }
.mk .mk-row .mk-price { height: 32px; font-size: 13px; }
.mk .mk-bundle { margin-top: 12px; padding: 10px 14px; gap: 12px; }
.mk .mk-bundle b, .mk .mk-bundle .mk-bt { font-size: 12px; }
.mk .mk-bundle .mk-bd { font-size: 13px; }
.mk .mk-more { margin: 14px 0 4px; }
.mk .mk-more button { height: 36px; font-size: 13px; padding-inline: 18px; }
.mk .mk-bar { height: 68px; }
.mk .mk-bar-in { gap: 16px; }
.mk .mk-now img { width: 44px; height: 44px; border-radius: 6px; }
.mk .mk-now .mk-tt b { font-size: 14px; }
.mk .mk-now .mk-tt #barMeta { font-size: 12px; }
.mk .mk-ctrls button { width: 38px; height: 38px; }
.mk .mk-ctrls .mk-main { width: 44px; height: 44px; }
.mk .mk-ctrls svg, .mk .mk-right button.mk-ic svg { width: 18px; height: 18px; }
.mk .mk-right button.mk-ic { width: 38px; height: 38px; }
.mk .mk-bar .mk-buy { height: 38px; font-size: 13px; padding-inline: 16px; }
.mk { padding-bottom: 80px; font-size: 14px; }
@media (min-width: 781px) {
.mk .mk-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.mk .mk-fbtn { padding-inline: 16px; min-width: 64px; }
}
@media (max-width: 1100px) {
.mk .mk-head, .mk .mk-row { grid-template-columns: 44px minmax(0, 1fr) 44px 68px 104px; }
}
@media (max-width: 780px) {
.mk .mk-hdr { height: 52px; }
.mk .mk-brand b { font-size: 24px; }
.mk .mk-band-in { display: block; padding-block: 14px; }
.mk .mk-band .mk-cover { width: 84px; margin: 0 14px 6px 0; }
.mk .mk-band h1 { font-size: 24px; }
.mk .mk-band .mk-wf-row { margin-top: 8px; }
.mk .mk-band .mk-wf.mk-big { height: 32px; }
.mk .mk-cta { margin-top: 10px; }
.mk .mk-catalog { padding-inline: 12px; margin-top: 10px; }
.mk .mk-row { grid-template-columns: 36px minmax(0, 1fr) auto 66px; gap: 6px; min-height: 52px; padding-inline: 2px; }
.mk .mk-row .mk-thumb { width: 36px; height: 36px; }
.mk .mk-row .mk-name { font-size: 14px; }
.mk .mk-row .mk-sub { font-size: 12px; margin-top: 0; }
.mk .mk-row .mk-acts button { width: 26px; height: 36px; }
.mk .mk-row .mk-acts button svg { width: 16px; height: 16px; }
.mk .mk-row .mk-price { height: 30px; font-size: 12px; }
.mk .mk-search { margin-inline: 0; }
.mk .mk-filters, .mk .mk-stags { padding-inline: 0; }
.mk .mk-bar { height: 60px; }
.mk .mk-bar-in { gap: 4px; padding-inline: 8px; }
.mk .mk-now img { width: 36px; height: 36px; }
.mk .mk-ctrls .mk-main { width: 40px; height: 40px; }
.mk .mk-bar .mk-buy { height: 36px; padding-inline: 10px; margin-left: 2px; font-size: 13px; }
.mk .mk-bar .mk-ctrls button { width: 32px; height: 40px; }
.mk .mk-bar .mk-ctrls .mk-mode svg, .mk .mk-bar .mk-ctrls .mk-skip svg { width: 17px; height: 17px; }
.mk .mk-bar .mk-ctrls .mk-main { width: 40px; height: 40px; margin-inline: 2px; }
.mk .mk-bar .mk-now { gap: 8px; min-width: 0; }
.mk .mk-bar .mk-now .mk-tt b { font-size: 13px; white-space: normal; line-height: 1.15; }
.mk .mk-bar .mk-now .mk-tt #barMeta { display: none; }
.mk .mk-queue { bottom: 68px; }
.mk { padding-bottom: 68px; }
}
.mk .mk-btnp, .mk .mk-row .mk-price, .mk .mk-bar .mk-buy { height: 30px; padding-inline: 14px; border-radius: 15px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.mk .mk-row .mk-price { width: 64px; padding-inline: 0; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 98.5%, var(--ink)); color: var(--ink); }
.mk .mk-row.mk-active .mk-price, .mk .mk-bar .mk-buy { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.mk .mk-row { position: relative; }
.mk .mk-row:hover { background: none; }
.mk .mk-row.mk-active { background: color-mix(in srgb, var(--bg) 96%, var(--ink)); }
.mk .mk-row .mk-name { transition: transform 0.18s ease; }
@media (hover: hover) {
.mk .mk-row:hover .mk-name { transform: translateX(4px); }
}
.mk .mk-rp { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); }
.mk .mk-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.mk .mk-eq i { width: 3px; background: #fff; border-radius: 1px; animation: eq 0.9s ease-in-out infinite; height: 40%; }
.mk .mk-eq i:nth-child(2) { animation-delay: -0.3s; }
.mk .mk-eq i:nth-child(3) { animation-delay: -0.6s; }
@keyframes eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) {
.mk .mk-eq i { animation: none; height: 70%; }
}
.mk .mk-bar { left: 50%; right: auto; transform: translateX(-50%); width: min(1544px, calc(100% - 48px)); bottom: 12px; height: 68px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: 0 12px 40px rgba(0,0,0,0.55); }
.mk .mk-prog { display: none; }
.mk .mk-bar-in { grid-template-columns: minmax(210px, 280px) auto minmax(0, 1fr) auto; gap: 18px; padding-inline: 14px; }
.mk .mk-now .mk-tt #barMeta { line-height: 1.25; }
.mk .mk-ctrls { gap: 6px; }
.mk .mk-ctrls button { width: 32px; height: 32px; border-radius: 8px; background: #232323; color: var(--ink); }
.mk .mk-ctrls button:hover { background: #2c2c2c; }
.mk .mk-ctrls .mk-main { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; margin-inline: 2px; box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--accent); }
.mk .mk-ctrls .mk-main:hover { background: var(--accent); filter: brightness(1.12); }
.mk .mk-ctrls .mk-mode { color: var(--muted); }
.mk .mk-ctrls .mk-mode[aria-pressed="true"] { color: var(--accent); }
.mk .mk-mid .mk-t { display: none; }
.mk .mk-mid { grid-template-columns: minmax(0, 1fr); }
.mk .mk-wf.mk-mini { height: 30px; gap: 1px; }
.mk .mk-vol, .mk .mk-right button.mk-qbtn, .mk .mk-right #barHeart { display: none; }
.mk .mk-right { gap: 10px; }
.mk .mk-right button.mk-cartb { width: 34px; height: 34px; color: var(--ink); }
.mk { padding-bottom: 96px; }
.mk .mk-sheet .mk-ctrls button { background: none; }
.mk .mk-sheet .mk-ctrls .mk-main { background: var(--ink); color: color-mix(in srgb, var(--bg) 97.5%, var(--ink)); box-shadow: none; }
.mk .mk-queue { bottom: 92px; }
@media (max-width: 780px) {
.mk .mk-bar { left: 8px; right: 8px; width: auto; transform: none; bottom: 8px; height: 56px; border-radius: 16px; }
.mk .mk-bar-in { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; padding-inline: 10px; }
.mk .mk-bar .mk-now { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent); mask-image: linear-gradient(90deg, #000 72%, transparent); }
.mk .mk-bar .mk-now .mk-tt b { white-space: nowrap; font-size: 13px; }
.mk .mk-bar .mk-now .mk-tt #barMeta { display: none; }
.mk .mk-now img { width: 36px; height: 36px; }
.mk .mk-bar .mk-ctrls { display: flex; justify-self: center; gap: 4px; }
.mk .mk-bar .mk-ctrls #shuf { display: none; }
.mk .mk-bar .mk-ctrls button { width: 30px; height: 30px; display: grid; }
.mk .mk-bar .mk-ctrls .mk-main { width: 38px; height: 38px; }
.mk .mk-bar .mk-ctrls .mk-mode svg, .mk .mk-bar .mk-ctrls .mk-skip svg { width: 16px; height: 16px; }
.mk .mk-mid, .mk .mk-right button.mk-ic, .mk .mk-right button.mk-cartb { display: none; }
.mk .mk-right { justify-self: end; }
.mk .mk-bar .mk-buy { margin-left: 0; height: 30px; padding-inline: 12px; }
.mk .mk-prog { display: block; top: auto; bottom: 0; left: 16px; right: 16px; height: 2px; border-radius: 2px; }
.mk .mk-queue { bottom: 72px; }
.mk { padding-bottom: 76px; }
.mk .mk-row { grid-template-columns: 36px minmax(0, 1fr) auto 56px; }
.mk .mk-row .mk-price { width: 56px; }
}
.mk .mk-ctrls button { background: none; border-radius: 50%; }
.mk .mk-ctrls button:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.mk .mk-ctrls .mk-main { background: var(--accent); box-shadow: none; }
.mk .mk-ctrls .mk-main:hover { background: var(--accent); filter: brightness(1.12); }
.mk .mk-ctrls .mk-mode, .mk .mk-ctrls .mk-skip { color: color-mix(in srgb, var(--ink) 80%, var(--bg)); }
.mk .mk-ctrls .mk-mode[aria-pressed="true"] { color: var(--accent); }
.mk .mk-btnp, .mk .mk-row .mk-price, .mk .mk-bar .mk-buy { height: 28px; padding: 0 12px; min-width: 76px; border-radius: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
.mk .mk-row .mk-price { width: auto; }
.mk .mk-row .mk-price, .mk .mk-bar .mk-buy { font-variant-numeric: tabular-nums; }
.mk .mk-bar .mk-now .mk-tt { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent); }
.mk .mk-bar .mk-now .mk-tt b { display: inline-block; will-change: transform; }
@media (max-width: 780px) {
.mk .mk-bar .mk-now { -webkit-mask-image: none; mask-image: none; }
.mk .mk-row { grid-template-columns: 36px minmax(0, 1fr) auto auto; }
.mk .mk-row .mk-price { width: auto; min-width: 70px; padding: 0 10px; }
.mk .mk-bar .mk-buy { min-width: 70px; padding: 0 10px; margin-left: 0; height: 28px; }
}
@media (max-width: 780px) {
.mk .mk-bar .mk-ctrls { gap: 2px; }
.mk .mk-bar .mk-ctrls button { width: 28px; height: 30px; }
.mk .mk-bar .mk-ctrls .mk-main { width: 36px; height: 36px; }
.mk .mk-now img { width: 34px; height: 34px; }
.mk .mk-bar .mk-now { gap: 8px; }
.mk .mk-bar-in { padding-inline: 8px; }
}
@media (max-width: 780px) {
.mk .mk-bar { left: 0; right: 0; bottom: 0; width: auto; transform: none; height: calc(60px + env(safe-area-inset-bottom, 0px)); border-radius: 0; border: 0; border-top: 1px solid var(--line); box-shadow: none; background: color-mix(in srgb, var(--bg) 98%, var(--ink)); }
.mk .mk-bar-in { height: 60px; padding-inline: 12px; }
.mk .mk-prog { display: block; top: -1px; bottom: auto; left: 0; right: 0; height: 2px; border-radius: 0; }
.mk .mk-queue { bottom: 68px; }
.mk { padding-bottom: 76px; }
}
.mk .mk-row { border-bottom: 0; min-height: 60px; }
.mk .mk-row .mk-name span { line-height: 1.25; }
.mk .mk-row .mk-chips { margin-top: 4px; }
.mk .mk-row .mk-sub { font-size: 11px; margin-top: 4px; letter-spacing: 0.01em; }
@media (max-width: 780px) {
.mk .mk-row { min-height: 60px; }
.mk .mk-row .mk-sub { font-size: 11px; margin-top: 4px; }
}
.mk .mk-row .mk-sub { display: none; gap: 10px; }
.mk .mk-row { border-bottom: 1px solid var(--line); }
.mk .mk-row:last-child { border-bottom: 0; }
.mk .mk-row.mk-active { border-bottom-color: transparent; }
@media (max-width: 780px) {
.mk .mk-row .mk-sub { display: flex; }
}
.mk .mk-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; }
.mk .mk-toolbar .mk-search { order: 1; flex: 0 0 220px; margin: 0; }
.mk .mk-toolbar .mk-stags { order: 2; flex: 0 1 auto; padding: 0; margin: 0; border: 0; overflow: visible; flex-wrap: wrap; }
.mk .mk-toolbar .mk-filters { order: 3; padding: 0; display: flex; gap: 6px; margin-left: auto; }
.mk .mk-toolbar .mk-fbtn { padding-inline: 12px; min-width: 0; }
.mk .mk-stags { border-bottom: 0; }
.mk .mk-widget .mk-list { margin-top: 14px; }
.mk .mk-head { border-bottom: 0; height: 28px; }
.mk .mk-head span:last-child { visibility: hidden; }
.mk .mk-row { border-bottom: 0; }
.mk .mk-row::after { content: ""; position: absolute; left: 56px; right: 4px; bottom: 0; height: 1px; background: var(--line); }
.mk .mk-row:last-child::after, .mk .mk-row.mk-active::after { display: none; }
@media (max-width: 780px) {
.mk .mk-toolbar { display: block; }
.mk .mk-toolbar .mk-search { flex: none; }
.mk .mk-toolbar .mk-filters { display: grid; margin: 0; padding: 8px 0 0; }
.mk .mk-toolbar .mk-stags { flex-wrap: nowrap; overflow: hidden; padding: 6px 0 4px; margin-top: 2px; }
.mk .mk-widget .mk-list { margin-top: 6px; }
.mk .mk-row::after { left: 50px; right: 2px; }
}
@media (min-width: 781px) {
.mk .mk-bar .mk-now .mk-tt { -webkit-mask-image: none; mask-image: none; }
}
.mk .mk-band, .mk .mk-xp { display: none; }
.mk .mk-row .mk-price, .mk .mk-bar .mk-buy { height: 32px; min-width: 76px; padding: 0 14px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; color: var(--ink); border: 1px solid rgba(247, 247, 247, 0.09); background-image: linear-gradient(var(--panel), var(--panel-2)); background-color: transparent; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 9%, transparent), 0 6px 12px -8px rgba(0, 0, 0, 0.45); }
.mk .mk-row .mk-price:hover { border-color: rgba(247, 247, 247, 0.22); }
.mk .mk-row.mk-active .mk-price, .mk .mk-bar .mk-buy { background-image: none; background-color: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: none; }
.mk .mk-bar .mk-buy:hover, .mk .mk-row.mk-active .mk-price:hover { filter: brightness(1.1); }
@media (max-width: 780px) {
.mk .mk-row .mk-price { min-width: 68px; padding: 0 10px; height: 30px; }
.mk .mk-bar .mk-buy { min-width: 68px; padding: 0 12px; height: 32px; }
}
.mk .mk-row .mk-price, .mk .mk-bar .mk-buy { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.mk .mk-row .mk-price svg, .mk .mk-bar .mk-buy svg { width: 16px; height: 16px; stroke-width: 1.9; }
@media (max-width: 780px) {
.mk .mk-row .mk-price, .mk .mk-bar .mk-buy { gap: 6px; }
.mk .mk-row .mk-price svg, .mk .mk-bar .mk-buy svg { width: 15px; height: 15px; }
}
.mk .mk-right button.mk-cartb { display: none; }
@media (min-width: 781px) {
.mk .mk-head, .mk .mk-row { grid-template-columns: 44px minmax(0, 1.5fr) 60px 52px 92px minmax(0, 1fr) 72px 120px !important; }
.mk .mk-head > span:nth-child(6), .mk .mk-row > .mk-acts { grid-column: 7; }
.mk .mk-head > span:nth-child(7), .mk .mk-row > .mk-price { grid-column: 8; }
.mk .mk-head .mk-ht, .mk .mk-row .mk-ht, .mk .mk-head .mk-hk, .mk .mk-row .mk-hk { display: block; }
}
@media (min-width: 781px) and (max-width: 840px) {
.mk .mk-head, .mk .mk-row { grid-template-columns: 44px minmax(0, 1.5fr) 60px 52px minmax(0, 1fr) 72px 120px !important; }
.mk .mk-head .mk-hk, .mk .mk-row .mk-hk { display: none; }
.mk .mk-head > span:nth-child(6), .mk .mk-row > .mk-acts { grid-column: 6; }
.mk .mk-head > span:nth-child(7), .mk .mk-row > .mk-price { grid-column: 7; }
}
@media (min-width: 781px) {
.mk .mk-head, .mk .mk-row { grid-template-columns: 44px minmax(0, 1.5fr) 84px 84px minmax(0, 1fr) 72px 120px !important; }
.mk .mk-head .mk-hk, .mk .mk-row .mk-hk { display: none !important; }
.mk .mk-head > span:nth-child(6), .mk .mk-row > .mk-acts { grid-column: 6; }
.mk .mk-head > span:nth-child(7), .mk .mk-row > .mk-price { grid-column: 7; }
.mk .mk-head .mk-ht, .mk .mk-head .mk-hb, .mk .mk-row .mk-ht, .mk .mk-row .mk-hb { display: block; text-align: center; }
}
.mk .mk-row .mk-price, .mk .mk-bar .mk-buy { min-width: 0 !important; width: fit-content; padding: 0 14px; }
.mk .mk-row .mk-price { justify-self: end; }
@media (min-width: 781px) {
.mk .mk-head, .mk .mk-row { grid-template-columns: 44px minmax(0, 1.5fr) 84px 84px minmax(0, 1fr) 72px 108px !important; }
}
@media (max-width: 780px) {
.mk .mk-row .mk-price { padding: 0 12px; }
.mk .mk-bar .mk-buy { padding: 0 14px; }
}
.mk .mk-buyset { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.mk .mk-buyset .mk-acts { display: flex; gap: 0; }
.mk .mk-buyset .mk-acts button { width: 30px; height: 36px; }
.mk .mk-row > .mk-acts, .mk .mk-row > .mk-price { grid-column: auto; }
@media (min-width: 781px) {
.mk .mk-head, .mk .mk-row { grid-template-columns: 44px minmax(0, 1.5fr) 84px 84px minmax(0, 1fr) 176px !important; }
.mk .mk-buyset { grid-column: 6; }
.mk .mk-head > span:nth-child(6) { grid-column: 6; }
.mk .mk-head > span:nth-child(7) { display: none; }
}
@media (max-width: 780px) {
.mk .mk-row { grid-template-columns: 36px minmax(0, 1fr) auto !important; }
.mk .mk-buyset { grid-column: 3; gap: 2px; }
.mk .mk-buyset .mk-acts button { width: 28px; }
}
.mk .mk-lic { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.mk .mk-lic[hidden] { display: none; }
.mk .mk-lic-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.66); }
.mk .mk-lic-card { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: color-mix(in srgb, var(--bg) 95%, var(--ink)); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,0.7); padding: 18px 20px 18px; display: grid; gap: 16px; }
.mk .mk-lic-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) 40px; gap: 12px; align-items: center; }
.mk .mk-lic-head img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; }
.mk .mk-lic-id h2 { margin: 0; font-size: 18px; line-height: 1.2; letter-spacing: -0.01em; }
.mk .mk-lic-id p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.mk .mk-lic-x { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); }
.mk .mk-lic-x:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.mk .mk-lic-pick { display: grid; gap: 16px; }
.mk .mk-lic-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mk .mk-tier { position: relative; display: grid; gap: 2px; justify-items: start; text-align: left; padding: 12px 12px 11px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 98%, var(--ink)); min-height: 64px; }
.mk .mk-tier b { font-size: 14px; font-weight: 700; }
.mk .mk-tier span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mk .mk-tier:hover { border-color: color-mix(in srgb, var(--ink) 28%, transparent); }
.mk .mk-tier[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--bg)); box-shadow: 0 0 0 1px var(--accent) inset; }
.mk .mk-tier[aria-checked="true"] span { color: var(--ink); }
.mk .mk-tier em { position: absolute; top: -9px; left: 10px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); padding: 2px 7px; border-radius: 999px; }
.mk .mk-lic-detail { display: grid; gap: 10px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 98%, var(--ink)); border: 1px solid var(--line); }
.mk .mk-lic-detail h3 { margin: 0; font-size: 17px; }
.mk .mk-lic-detail p { margin: 0; color: var(--muted); font-size: 14px; }
.mk .mk-lic-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 2px 0 0; }
.mk .mk-lic-stats div { display: grid; gap: 1px; }
.mk .mk-lic-stats dt { font-size: 12px; color: var(--muted); }
.mk .mk-lic-stats dd { margin: 0; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk .mk-lic-files { display: flex; flex-wrap: wrap; gap: 6px; }
.mk .mk-lic-files span { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 8%, transparent); font-size: 12px; font-weight: 600; }
.mk .mk-lic-files svg { width: 12px; height: 12px; stroke-width: 2.4; color: #4cc38a; }
.mk .mk-lic-detail .mk-lic-terms { font-size: 13px; padding-top: 10px; border-top: 1px solid var(--line); }
.mk .mk-lic-foot { display: grid; gap: 10px; }
.mk .mk-lic-deal { margin: 0; font-size: 13px; color: var(--ink); text-align: center; }
.mk .mk-lic-deal b { color: var(--accent); }
.mk .mk-lic-add { height: 52px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 16px; width: 100%; }
.mk .mk-lic-add:hover { filter: brightness(1.1); }
.mk .mk-lic-sub { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.mk .mk-lic-link { color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 8px 0; }
.mk .mk-lic-ghost { height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); font-weight: 700; font-size: 14px; background-image: linear-gradient(var(--panel), var(--panel-2)); }
.mk .mk-lic-done { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 6px 0 2px; }
.mk .mk-lic-done[hidden], .mk .mk-lic-pick[hidden] { display: none; }
.mk .mk-lic-check { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(76,195,138,0.16); color: #4cc38a; }
.mk .mk-lic-check svg { width: 26px; height: 26px; stroke-width: 2.6; }
.mk .mk-lic-done h3 { margin: 0; font-size: 20px; }
.mk .mk-lic-line { margin: 0; color: var(--muted); font-size: 14px; }
.mk .mk-lic-line b { color: var(--ink); }
.mk .mk-lic-meter { width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 98%, var(--ink)); border: 1px solid var(--line); display: grid; gap: 8px; }
.mk .mk-lic-meter-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.mk .mk-lic-meter-top span { color: var(--muted); }
.mk .mk-lic-bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.mk .mk-lic-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.3s ease; }
.mk .mk-lic-done .mk-lic-sub { width: 100%; justify-content: center; gap: 18px; }
@media (max-width: 780px) {
.mk .mk-lic { place-items: end center; padding: 0; }
.mk .mk-lic-card { width: 100%; max-height: 92dvh; border-radius: 18px 18px 0 0; border-bottom: 0; padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
.mk .mk-lic-tiers { gap: 6px; }
.mk .mk-tier { padding: 10px 8px 9px; min-height: 58px; }
.mk .mk-tier b { font-size: 13px; }
.mk .mk-lic-stats dd { font-size: 14px; }
.mk .mk-lic-sub span { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
.mk .mk-lic-bar i { transition: none; }
}
.mk .mk-lic-card:focus { outline: none; }
.mk .mk-lic-id p { display: flex; gap: 10px; }
.mk .mk-lic-detail .mk-lic-terms { display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.mk .mk-lic-terms u { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.mk .mk-mockbar { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.mk .mk-mock-sw { display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.22); border-radius: 999px; padding: 2px; }
.mk .mk-mock-sw i { font-style: normal; font-size: 12px; padding: 0 8px; opacity: 0.9; }
.mk .mk-mock-sw button { min-width: 28px; height: 24px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; }
.mk .mk-mock-sw button[aria-pressed="true"] { background: #fff; color: color-mix(in srgb, var(--accent) 82%, black); }
.mk .mk-lic-tiers[data-n="5"], .mk .mk-lic-tiers[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk .mk-lic-foot { position: sticky; bottom: -18px; background: linear-gradient(color-mix(in srgb, var(--panel) 0%, transparent), color-mix(in srgb, var(--bg) 95%, var(--ink)) 16px); padding-top: 14px; margin-bottom: -18px; padding-bottom: 18px; z-index: 2; }
@media (max-width: 780px) {
.mk .mk-lic-foot { bottom: calc(-16px - env(safe-area-inset-bottom, 0px)); margin-bottom: calc(-16px - env(safe-area-inset-bottom, 0px)); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.mk .mk-lic-card { gap: 12px; }
.mk .mk-lic-pick { gap: 12px; }
.mk .mk-lic-detail { padding: 12px 14px; gap: 8px; }
.mk .mk-lic-tiers[data-n="5"] .mk-tier, .mk .mk-lic-tiers[data-n="6"] .mk-tier { min-height: 54px; padding: 9px 10px 8px; }
}
.mk .mk-lic-card { width: min(760px, 100%); }
.mk .mk-lic-pick { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); grid-template-areas: "list panel" "list foot"; gap: 14px 20px; align-items: start; }
.mk .mk-lp-list { grid-area: list; display: grid; gap: 8px; align-content: start; }
.mk .mk-lp-panel { grid-area: panel; display: grid; gap: 10px; padding: 16px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 98%, var(--ink)); border: 1px solid var(--line); align-content: start; }
.mk .mk-lp-panel h3 { margin: 0; font-size: 17px; }
.mk .mk-lp-panel p, .mk .mk-lp-inline p { margin: 0; color: var(--muted); font-size: 14px; }
.mk .mk-lic-pick .mk-lic-foot { grid-area: foot; position: static; background: none; margin: 0; padding: 0; }
.mk .mk-lp-item { border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 98%, var(--ink)); overflow: hidden; }
.mk .mk-lp-item.mk-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--bg)); box-shadow: 0 0 0 1px var(--accent) inset; }
.mk .mk-lp-row { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; min-height: 56px; }
.mk .mk-lp-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.mk .mk-lp-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ink) 35%, transparent); display: grid; place-items: center; }
.mk .mk-lp-item.mk-on .mk-lp-radio { border-color: var(--accent); }
.mk .mk-lp-item.mk-on .mk-lp-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.mk .mk-lp-main { display: grid; gap: 2px; min-width: 0; }
.mk .mk-lp-main b { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk .mk-lp-main em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); padding: 2px 7px; border-radius: 999px; }
.mk .mk-lp-main small { font-size: 13px; color: var(--muted); }
.mk .mk-lp-price { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk .mk-lp-inline { display: grid; gap: 10px; padding: 2px 14px 14px 48px; }
.mk .mk-lic-trust { margin: 0; text-align: center; color: var(--muted); font-size: 12px; }
.mk .mk-lic-pick .mk-lic-foot { display: grid; gap: 10px; }
.mk .mk-lic-detail, .mk .mk-lic-tiers { display: none; }
@media (max-width: 780px) {
.mk .mk-lic-card { width: 100%; }
.mk .mk-lic-pick { grid-template-columns: 1fr; grid-template-areas: "list" "foot"; gap: 12px; }
.mk .mk-lp-panel { display: none; }
.mk .mk-lp-row { padding: 10px 12px; min-height: 54px; gap: 10px; }
.mk .mk-lp-inline { padding: 0 12px 12px 44px; }
.mk .mk-lic-pick .mk-lic-foot { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom, 0px)); margin: 0 -14px calc(-16px - env(safe-area-inset-bottom, 0px)); padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(color-mix(in srgb, var(--panel) 0%, transparent), color-mix(in srgb, var(--bg) 95%, var(--ink)) 14px); z-index: 2; }
}
.mk .mk-lp-row { min-height: 52px; }
.mk .mk-lic-pick { grid-template-rows: auto 1fr; }
.mk .mk-lic-pick .mk-lic-foot { align-self: end; }
.mk .mk-lp-panel .mk-lic-terms, .mk .mk-lp-inline .mk-lic-terms { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.mk .mk-lic-terms u { white-space: nowrap; }
@media (max-width: 780px) {
.mk .mk-lp-row { min-height: 48px; padding: 8px 12px; }
.mk .mk-lic-pick { grid-template-rows: none; }
}
.mk .mk-d-desc { margin: 0; color: var(--muted); font-size: 14px; }
.mk .mk-d-sec { display: grid; gap: 8px; }
.mk .mk-d-sec h4 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.mk .mk-d-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--ink) 3%, transparent); }
.mk .mk-d-tiles > div { display: grid; gap: 2px; padding: 10px 12px; border-left: 1px solid var(--line); }
.mk .mk-d-tiles > div:first-child { border-left: 0; }
.mk .mk-d-tiles b { font-size: 17px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.mk .mk-d-tiles span { font-size: 12px; color: var(--muted); }
.mk .mk-d-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; }
.mk .mk-d-grid > div { display: grid; gap: 1px; min-width: 0; }
.mk .mk-d-grid .mk-wide { grid-column: 1 / -1; }
.mk .mk-d-grid dt { font-size: 12px; color: var(--muted); }
.mk .mk-d-grid dd { margin: 0; font-size: 14px; font-weight: 600; }
.mk .mk-d-full { justify-self: start; padding: 4px 0 0; }
.mk .mk-lp-panel { gap: 14px; }
.mk .mk-lp-inline { gap: 14px; }
@media (max-width: 780px) {
.mk .mk-d-tiles b { font-size: 15px; }
.mk .mk-d-tiles > div { padding: 8px 8px; }
.mk .mk-d-tiles span { font-size: 11px; }
}
.mk .mk-lp-row:focus-visible { outline: 2px solid color-mix(in srgb, var(--ink) 80%, transparent); outline-offset: -4px; border-radius: 12px; }
.mk .mk-lic-card { width: min(720px, 100%); gap: 18px; background: radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--panel) 0%, transparent) 60%), color-mix(in srgb, var(--bg) 95%, var(--ink)); }
.mk .mk-lx-wrap { display: grid; gap: 18px; min-width: 0; }
.mk .mk-lx-wrap[hidden] { display: none; }
.mk .mk-lx-hero { display: grid; gap: 6px; }
.mk .mk-lx-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mk .mk-lx-intent { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.mk .mk-lx-name { font-size: 12px; font-weight: 600; color: var(--muted); padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.mk .mk-lx-pop { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); padding: 3px 8px; border-radius: 999px; }
.mk .mk-lx-price { font-size: clamp(40px, 7vw, 56px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.mk .mk-lx-price.mk-offer { font-size: clamp(30px, 5.5vw, 40px); }
.mk .mk-lx-delta { margin: 0; color: var(--muted); font-size: 14px; min-height: 20px; }
.mk .mk-lx-track { position: relative; padding-top: 2px; }
.mk .mk-lx-rail { position: absolute; left: calc(50% / var(--n, 4)); right: calc(50% / var(--n, 4)); top: 19px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 14%, transparent); overflow: hidden; }
.mk .mk-lx-rail i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, black), var(--accent)); transition: width 0.28s cubic-bezier(.2,.8,.2,1); }
.mk .mk-lx-stops { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.mk .mk-lx-stop { display: grid; justify-items: center; gap: 8px; padding: 8px 2px 4px; min-height: 64px; color: var(--muted); }
.mk .mk-lx-dot { width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--bg) 95%, var(--ink)); border: 3px solid color-mix(in srgb, var(--ink) 28%, transparent); transition: all 0.2s ease; }
.mk .mk-lx-stop.mk-past .mk-lx-dot { border-color: var(--accent); background: var(--accent); width: 14px; height: 14px; margin: 3px; }
.mk .mk-lx-stop.mk-on .mk-lx-dot { width: 26px; height: 26px; margin: -3px; border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 38%, color-mix(in srgb, var(--bg) 95%, var(--ink)) 42%); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
.mk .mk-lx-lab { font-size: 12px; font-weight: 600; text-align: center; }
.mk .mk-lx-stop.mk-on .mk-lx-lab { color: var(--ink); font-weight: 700; }
.mk .mk-lx-stop:hover .mk-lx-dot { border-color: color-mix(in srgb, var(--ink) 60%, transparent); }
.mk .mk-lx-stop:focus-visible { outline: 2px solid color-mix(in srgb, var(--ink) 80%, transparent); outline-offset: 2px; border-radius: 10px; }
.mk .mk-lx-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; padding: 16px 18px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid var(--line); }
.mk .mk-lx-col { display: grid; gap: 10px; align-content: start; }
.mk .mk-lx-col h4 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.mk .mk-lx-col h4 + .mk-d-grid, .mk .mk-lx-col .mk-lx-files + h4 { margin-top: 4px; }
.mk .mk-lx-meters { display: grid; gap: 14px; }
.mk .mk-lx-m > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mk .mk-lx-m span { font-size: 13px; color: var(--muted); }
.mk .mk-lx-m b { font-size: 16px; font-variant-numeric: tabular-nums; }
.mk .mk-lx-m i { display: block; margin-top: 6px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.mk .mk-lx-m u { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, black), var(--accent)); transition: width 0.3s cubic-bezier(.2,.8,.2,1); }
.mk .mk-lx-m.mk-inf u { background: repeating-linear-gradient(135deg, var(--accent) 0 8px, color-mix(in srgb, var(--accent) 82%, black) 8px 16px); }
.mk .mk-lx-files span { transition: opacity 0.2s; }
.mk .mk-lx-files span.mk-no { opacity: 0.38; }
.mk .mk-lx-files span.mk-no svg { color: var(--muted); }
.mk .mk-lx-wrap .mk-lic-foot { position: static; background: none; margin: 0; padding: 0; }
@media (max-width: 780px) {
.mk .mk-lic-card { gap: 14px; }
.mk .mk-lx-wrap { gap: 14px; }
.mk .mk-lx-body { grid-template-columns: 1fr; gap: 16px; padding: 14px; }
.mk .mk-lx-stop { min-height: 58px; }
.mk .mk-lx-lab { font-size: 11.5px; }
.mk .mk-lx-wrap .mk-lic-foot { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom, 0px)); margin: 0 -14px calc(-16px - env(safe-area-inset-bottom, 0px)); padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(color-mix(in srgb, var(--panel) 0%, transparent), color-mix(in srgb, var(--bg) 95%, var(--ink)) 14px); z-index: 2; }
}
@media (prefers-reduced-motion: reduce) {
.mk .mk-lx-rail i, .mk .mk-lx-m u, .mk .mk-lx-dot { transition: none; }
}
@media (max-width: 780px) {
.mk .mk-lx-meters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mk .mk-lx-m > div { flex-direction: column-reverse; align-items: flex-start; gap: 0; }
.mk .mk-lx-m b { font-size: 15px; }
.mk .mk-lx-m span { font-size: 11.5px; }
.mk .mk-lx-price { font-size: 42px; }
.mk .mk-lx-delta { font-size: 13px; }
.mk .mk-lx-lab { white-space: nowrap; }
}
.mk .mk-lx-hero { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.mk .mk-lx-top { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.mk .mk-lx-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk .mk-lx-price { font-size: clamp(32px, 5vw, 40px); white-space: nowrap; text-align: right; }
.mk .mk-lx-price.mk-offer { font-size: 24px; }
.mk .mk-lx-delta { display: none; }
.mk .mk-d-grid .mk-vt { display: flex; align-items: flex-end; }
.mk .mk-d-grid .mk-vt .mk-lic-link { padding: 0 0 2px; font-size: 14px; }
.mk .mk-lx-wrap .mk-lic-foot { text-align: center; gap: 8px; justify-items: center; }
.mk .mk-lx-wrap .mk-lic-foot .mk-lic-add { justify-self: stretch; }
.mk .mk-lic-offer { padding: 2px 0; }
.mk .mk-lic-trust { font-size: 12px; }
@media (max-width: 780px) {
.mk .mk-lx-price { font-size: 30px; }
.mk .mk-lx-wrap { gap: 12px; }
.mk .mk-lx-hero { gap: 10px; }
.mk .mk-lx-body { padding: 12px 14px; gap: 14px; }
.mk .mk-lx-col { gap: 8px; }
.mk .mk-lx-meters { gap: 8px; }
.mk .mk-lx-stop { min-height: 54px; }
.mk .mk-lx-wrap .mk-lic-foot { gap: 6px; }
.mk .mk-lic-add { height: 48px; font-size: 15px; }
}
.mk .mk-lic-card { width: min(560px, 100%); }
.mk .mk-lic-head { grid-template-columns: 48px minmax(0, 1fr) 48px; }
.mk .mk-lic-id { text-align: center; }
.mk .mk-lic-id h2 { font-size: 18px; }
.mk .mk-lic-id p { justify-content: center; }
.mk .mk-lx-hero { display: grid; justify-items: center; text-align: center; gap: 6px; }
.mk .mk-lx-top { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.mk .mk-lx-tags { display: inline-flex; align-items: center; gap: 8px; }
.mk .mk-lx-price { font-size: 38px; text-align: center; letter-spacing: -0.02em; }
.mk .mk-lx-price.mk-offer { font-size: 26px; }
.mk .mk-lx-body { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 16px 18px; text-align: center; }
.mk .mk-lx-col { justify-items: center; text-align: center; gap: 10px; }
.mk .mk-lx-col h4 { text-align: center; }
.mk .mk-lx-meters { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mk .mk-lx-m > div { flex-direction: column-reverse; align-items: center; gap: 0; }
.mk .mk-lx-m b { font-size: 20px; }
.mk .mk-lx-m span { font-size: 12px; }
.mk .mk-lx-files { justify-content: center; }
.mk .mk-d-grid { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; text-align: center; }
.mk .mk-d-grid > div { justify-items: center; }
.mk .mk-d-grid .mk-wide { grid-column: auto; }
.mk .mk-d-grid .mk-vt { justify-content: center; align-items: flex-end; }
.mk .mk-lx-col h4 + .mk-d-grid, .mk .mk-lx-col .mk-lx-files + h4 { margin-top: 6px; }
@media (max-width: 780px) {
.mk .mk-lic-card { width: 100%; }
.mk .mk-lx-price { font-size: 34px; }
.mk .mk-lx-body { padding: 12px 12px; gap: 12px; }
.mk .mk-lx-m b { font-size: 16px; }
.mk .mk-d-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
}
.mk .mk-lx-hero { grid-template-columns: minmax(0, 1fr); justify-content: center; }
.mk .mk-lx-top, .mk .mk-lx-price { justify-self: center; }
.mk .mk-lic-card { width: min(720px, 100%); }
.mk .mk-lic-head { grid-template-columns: 48px minmax(0, 1fr) 40px; }
.mk .mk-lic-id { text-align: left; }
.mk .mk-lic-id p { justify-content: flex-start; }
.mk .mk-lx-intent { display: none; }
.mk .mk-lx-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: left; }
.mk .mk-lx-top { display: flex; justify-content: flex-start; }
.mk .mk-lx-tags { display: inline-flex; align-items: center; gap: 10px; }
.mk .mk-lx-name { font-size: 24px; font-weight: 700; color: var(--ink); background: none; padding: 0; letter-spacing: -0.01em; }
.mk .mk-lx-price { font-size: 34px; font-weight: 800; text-align: right; justify-self: auto; }
.mk .mk-lx-price.mk-offer { font-size: 24px; }
.mk .mk-lx-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; padding: 16px 18px; text-align: left; justify-items: stretch; }
.mk .mk-lx-col { justify-items: stretch; text-align: left; }
.mk .mk-lx-col h4 { text-align: left; }
.mk .mk-lx-meters { grid-template-columns: 1fr; gap: 14px; }
.mk .mk-lx-m > div { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 10px; }
.mk .mk-lx-m b { font-size: 16px; }
.mk .mk-lx-m span { font-size: 13px; }
.mk .mk-lx-files { justify-content: flex-start; }
.mk .mk-d-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; gap: 12px 16px; }
.mk .mk-d-grid > div { justify-items: start; }
.mk .mk-d-grid .mk-vt { justify-content: flex-start; align-items: flex-end; }
.mk .mk-lx-hero + .mk-lx-track { margin-top: 2px; }
@media (max-width: 780px) {
.mk .mk-lic-card { width: 100%; }
.mk .mk-lx-name { font-size: 22px; }
.mk .mk-lx-price { font-size: 30px; }
.mk .mk-lx-body { grid-template-columns: 1fr; gap: 12px; padding: 12px 14px; }
.mk .mk-lx-meters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mk .mk-lx-m > div { flex-direction: column-reverse; align-items: flex-start; gap: 0; }
.mk .mk-lx-m b { font-size: 16px; }
.mk .mk-lx-m span { font-size: 12px; }
}
@media (min-width: 781px) {
.mk .mk-lx-body { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.mk .mk-d-grid dd { white-space: nowrap; }
}
.mk .mk-lx-col .mk-lx-h-files { margin-top: 8px; }
@media (min-width: 781px) {
.mk .mk-lx-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}
.mk .mk-lx-hero { align-items: flex-start; }
.mk .mk-lx-top { flex: 1 1 auto; min-width: 0; }
.mk .mk-lx-tags { flex-wrap: wrap; row-gap: 6px; min-width: 0; }
.mk .mk-lx-name { overflow-wrap: anywhere; line-height: 1.15; }
.mk .mk-lx-name.mk-long { font-size: 19px; }
.mk .mk-lx-price { flex: none; padding-top: 2px; }
@media (max-width: 780px) {
.mk .mk-lx-name.mk-long { font-size: 17px; }
}
.mk .mk-mock-sw button { min-width: 40px; padding: 0 8px; }
.mk .mk-lx-sp { font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: -2px; }
.mk .mk-lx-stop.mk-on .mk-lx-sp { color: var(--ink); }
.mk .mk-lx-stop { min-height: 76px; }
.mk .mk-lx-deal { font-style: normal; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(76,195,138,0.5); color: #4cc38a; background: rgba(76,195,138,0.1); white-space: nowrap; }
.mk .mk-lic-meter[hidden] { display: none; }
@media (max-width: 780px) {
.mk .mk-lx-stop { min-height: 70px; }
}
.mk .mk-lic-track { display: grid; gap: 7px; align-content: center; min-height: 58px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid var(--line); }
.mk .mk-lt-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; min-height: 18px; }
.mk .mk-lt-top b { font-weight: 700; }
.mk .mk-lt-top span { color: var(--muted); text-align: right; }
.mk .mk-lt-bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.mk .mk-lt-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, black), var(--accent)); transition: width 0.3s ease; }
.mk .mk-lic-track.mk-done .mk-lt-bar i { background: #4cc38a; }
.mk .mk-lic-track.mk-done .mk-lt-top span { color: #4cc38a; }
.mk .mk-lic-track.mk-off .mk-lt-top b { color: var(--muted); font-weight: 600; }
.mk .mk-lic-done { align-content: center; }
.mk .mk-lic-track[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
.mk .mk-lt-bar i { transition: none; }
}
.mk .mk-lic-track { min-height: 84px; }
.mk .mk-lt-bar { position: relative; overflow: visible; }
.mk .mk-lt-bar i { position: relative; z-index: 1; }
.mk .mk-lt-bar u { position: absolute; inset: 0; text-decoration: none; }
.mk .mk-lt-bar u b { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -14px; border-radius: 50%; background: color-mix(in srgb, var(--bg) 95%, var(--ink)); border: 2px solid color-mix(in srgb, var(--ink) 35%, transparent); z-index: 2; }
.mk .mk-lt-bar u b.mk-on { background: #4cc38a; border-color: #4cc38a; }
.mk .mk-lt-bar { background: color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 3px; }
.mk .mk-lt-steps { display: grid; grid-template-columns: repeat(3, 1fr); font-size: 12px; color: var(--muted); min-height: 16px; }
.mk .mk-lt-steps span { text-align: right; }
.mk .mk-lt-steps span.mk-on { color: #4cc38a; font-weight: 700; }
.mk .mk-lt-steps .mk-ph { grid-column: 1 / -1; }
.mk .mk-lic-track.mk-done .mk-lt-bar i { background: #4cc38a; }
.mk .mk-lt-top span { text-align: right; }
@media (max-width: 780px) {
.mk .mk-lt-top { font-size: 12.5px; flex-wrap: nowrap; }
.mk .mk-lt-top b, .mk .mk-lt-top span { white-space: nowrap; }
}
.mk .mk-lic-track { min-height: 78px; padding: 10px 14px; gap: 8px; }
.mk .mk-lt-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mk .mk-lt-g { display: grid; gap: 4px; }
.mk .mk-lt-segs { display: flex; gap: 3px; }
.mk .mk-lt-segs i { flex: 1; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 14%, transparent); transition: background 0.2s; }
.mk .mk-lt-segs i.mk-f { background: var(--accent); }
.mk .mk-lt-g.mk-done .mk-lt-segs i { background: #4cc38a; }
.mk .mk-lt-g span { font-size: 12px; color: var(--muted); }
.mk .mk-lt-g.mk-done span { color: #4cc38a; font-weight: 700; }
.mk .mk-lt-none { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.mk .mk-lt-bar, .mk .mk-lt-steps { display: none; }
.mk .mk-lic-track.mk-done .mk-lt-top span { color: #4cc38a; }
.mk .mk-lic-foot .mk-lf-buy { display: grid; gap: 8px; justify-items: center; text-align: center; min-height: 118px; align-content: start; }
.mk .mk-lic-foot .mk-lf-buy[hidden] { display: none; }
.mk .mk-lf-row { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 44px; }
.mk .mk-lic-added { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.mk .mk-lic-added svg { width: 16px; height: 16px; color: #4cc38a; stroke-width: 2.6; flex: none; }
.mk .mk-lic-added b { color: var(--ink); }
.mk .mk-lic-foot .mk-lic-add { width: 100%; }
@media (prefers-reduced-motion: reduce) {
.mk .mk-lt-segs i { transition: none; }
}
.mk .mk-lic-foot .mk-lf-buy { min-height: 132px; }
.mk .mk-lf-row { min-height: 40px; }
.mk .mk-lic-foot .mk-lf-buy { justify-items: center; }
.mk .mk-lic-foot .mk-lf-buy .mk-lic-add { justify-self: stretch; width: 100%; }
.mk .mk-lic-add:focus:not(:focus-visible) { outline: none; }
.mk .mk-lic-foot { justify-items: stretch !important; }
.mk .mk-lic-foot .mk-lf-buy { width: 100%; }
.mk .mk-lt-groups { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.mk .mk-lt-p { display: grid; gap: 4px; }
.mk .mk-lt-p .mk-lt-segs { gap: 4px; }
.mk .mk-lt-p .mk-lt-segs i { height: 24px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; color: transparent; }
.mk .mk-lt-p .mk-lt-segs i.mk-f { background: var(--accent); }
.mk .mk-lt-p .mk-lt-segs i.mk-free { border: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent); background: transparent; color: var(--muted); font-size: 12px; }
.mk .mk-lt-p .mk-lt-segs i.mk-free.mk-open { border: 1px solid #4cc38a; background: rgba(76,195,138,0.18); color: #4cc38a; }
.mk .mk-lt-p span { font-size: 12px; color: var(--muted); }
.mk .mk-lt-p.mk-done span { color: #4cc38a; font-weight: 700; }
.mk .mk-lic-track { min-height: 92px; }
.mk .mk-lic-track { display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 0 2px; border: 0; background: none; border-radius: 0; }
.mk .mk-lic-track > b { font-size: 13px; font-weight: 700; white-space: nowrap; }
.mk .mk-lic-track > span { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; text-align: right; }
.mk .mk-lic-track.mk-done > span { color: #4cc38a; }
.mk .mk-lic-track.mk-off > b { color: var(--muted); font-weight: 600; }
.mk .mk-lt-pips { display: flex; align-items: center; gap: 5px; }
.mk .mk-lt-pips i { width: 16px; height: 16px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 14%, transparent); display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 800; color: #4cc38a; }
.mk .mk-lt-pips i.mk-f { background: var(--accent); }
.mk .mk-lt-pips i.mk-free { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--ink) 35%, transparent); }
.mk .mk-lt-pips i.mk-free.mk-open { border: 1.5px solid #4cc38a; background: rgba(76,195,138,0.2); }
.mk .mk-lt-pips em { font-style: normal; font-size: 12px; color: var(--muted); padding: 0 1px; }
.mk .mk-lt-top, .mk .mk-lt-groups, .mk .mk-lt-g, .mk .mk-lt-p { display: none; }
@media (max-width: 780px) {
.mk .mk-lic-track { gap: 8px; }
.mk .mk-lic-track > b, .mk .mk-lic-track > span { font-size: 12.5px; }
.mk .mk-lt-pips { gap: 4px; }
}
.mk .mk-row .mk-price.mk-incart, .mk .mk-bar .mk-buy.mk-incart { background-image: none; background-color: rgba(76,195,138,0.16); border-color: #4cc38a; color: #4cc38a; box-shadow: none; }
.mk .mk-row.mk-active .mk-price.mk-incart { background-color: rgba(76,195,138,0.16); border-color: #4cc38a; color: #4cc38a; }
.mk .mk-row .mk-price.mk-incart svg, .mk .mk-bar .mk-buy.mk-incart svg { stroke-width: 2.6; }
.mk .mk-row .mk-price.mk-incart, .mk .mk-bar .mk-buy.mk-incart, .mk .mk-row.mk-active .mk-price.mk-incart { background-image: linear-gradient(var(--panel), var(--panel-2)); background-color: transparent; border: 1px solid var(--accent); color: var(--ink); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 9%, transparent); }
.mk .mk-row .mk-price.mk-incart svg, .mk .mk-bar .mk-buy.mk-incart svg { color: var(--accent); stroke: var(--accent); stroke-width: 2.8; }
.mk .mk-row .mk-price.mk-incart, .mk .mk-bar .mk-buy.mk-incart, .mk .mk-row.mk-active .mk-price.mk-incart { background-image: linear-gradient(var(--panel), var(--panel-2)); background-color: transparent; border: 1px solid rgba(247,247,247,0.18); color: var(--muted); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent); }
.mk .mk-row .mk-price.mk-incart svg, .mk .mk-bar .mk-buy.mk-incart svg { color: var(--muted); stroke: var(--muted); stroke-width: 2.6; }
.mk .mk-cd { position: fixed; top: 96px; right: max(16px, calc((100vw - 1100px) / 2)); width: 360px; max-width: calc(100vw - 24px); z-index: 70; background: color-mix(in srgb, var(--bg) 95%, var(--ink)); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,0.65); padding: 16px; display: grid; gap: 12px; outline: none; }
.mk .mk-cd[hidden] { display: none; }
.mk .mk-cd-head { display: flex; justify-content: space-between; align-items: center; }
.mk .mk-cd-head h3 { margin: 0; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.mk .mk-cd-x { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); }
.mk .mk-cd-x:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.mk .mk-cd-x svg { width: 16px; height: 16px; }
.mk .mk-cd-list { display: grid; gap: 10px; max-height: 240px; overflow-y: auto; }
.mk .mk-cd-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 28px; gap: 10px; align-items: center; }
.mk .mk-cd-item img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.mk .mk-cd-meta { display: grid; min-width: 0; }
.mk .mk-cd-meta b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .mk-cd-meta span { font-size: 12px; color: var(--muted); }
.mk .mk-cd-price { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk .mk-cd-rm { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); }
.mk .mk-cd-rm:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.mk .mk-cd-rm svg { width: 14px; height: 14px; }
.mk .mk-cd-empty { margin: 0; color: var(--muted); font-size: 14px; }
.mk .mk-cd-track { padding: 10px 0 0; border-top: 1px solid var(--line); min-height: 44px; border-radius: 0; background: none; }
.mk .mk-cd-track[hidden] { display: none; }
.mk .mk-cd-track > b { font-size: 12.5px; }
.mk .mk-cd-track > span { font-size: 12.5px; }
.mk .mk-cd-sub { display: flex; justify-content: space-between; font-size: 14px; }
.mk .mk-cd-go { height: 46px; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.mk .mk-cd-go:disabled { opacity: 0.4; cursor: default; }
.mk .mk-cd-keep { justify-self: center; font-weight: 500; color: var(--muted); text-decoration: none; padding: 2px 0; }
.mk .mk-cd-keep:hover { color: var(--ink); }
@media (max-width: 780px) {
.mk .mk-cd { top: 60px; right: 8px; left: 8px; width: auto; max-width: none; }
}
.mk .mk-lic-track > b, .mk .mk-lic-track > span, .mk .mk-lic-track.mk-done > span { color: var(--ink); }
.mk .mk-lic-track.mk-off > b { color: color-mix(in srgb, var(--ink) 60%, transparent); }
.mk .mk-lt-pips i { color: var(--ink); }
.mk .mk-lt-pips i.mk-free.mk-open { border: 1.5px solid var(--ink); background: color-mix(in srgb, var(--ink) 16%, transparent); }
.mk .mk-row .mk-price.mk-incart, .mk .mk-bar .mk-buy.mk-incart, .mk .mk-row.mk-active .mk-price.mk-incart { color: var(--accent-ink); }
.mk .mk-row .mk-price.mk-incart svg, .mk .mk-bar .mk-buy.mk-incart svg { color: var(--accent-ink); stroke: var(--accent-ink); }
.mk .mk-cd-price.mk-free { display: flex; gap: 6px; align-items: baseline; font-weight: 800; }
.mk .mk-cd-price.mk-free s { color: var(--muted); font-weight: 500; }
.mk .mk-cd-saved { color: var(--muted); }
.mk .mk-cd-saved[hidden] { display: none; }
.mk .mk-lic-track { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; min-height: 58px; padding: 2px; }
.mk .mk-lic-track > b { grid-column: 1; }
.mk .mk-lic-track .mk-lt-pips { grid-column: 2; justify-self: start; }
.mk .mk-lic-track > span, .mk .mk-lic-track.mk-done > span { grid-column: 1 / -1; margin: 0; text-align: left; white-space: normal; font-size: 12.5px; line-height: 1.35; color: color-mix(in srgb, var(--ink) 82%, transparent); min-height: 34px; }
.mk .mk-cd-track { min-height: 62px; }
@media (max-width: 780px) {
.mk .mk-lic-track > span, .mk .mk-lic-track.mk-done > span { font-size: 12px; }
}
.mk .mk-lic-track { grid-template-columns: 1fr; gap: 6px; min-height: 80px; align-content: start; }
.mk .mk-lic-track > b { grid-column: 1; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.mk .mk-lic-track .mk-lt-pips { grid-column: 1; width: 100%; display: flex; gap: 6px; align-items: stretch; }
.mk .mk-lic-track .mk-lt-pips i { flex: 1 1 0; width: auto; height: 28px; border-radius: 14px; padding: 0 6px; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--ink) 55%, transparent); background: color-mix(in srgb, var(--ink) 8%, transparent); border: 1px solid transparent; white-space: nowrap; }
.mk .mk-lic-track .mk-lt-pips i.mk-p.mk-f { background: var(--accent); color: var(--accent-ink); }
.mk .mk-lic-track .mk-lt-pips i.mk-free { background: transparent; border: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); color: color-mix(in srgb, var(--ink) 70%, transparent); }
.mk .mk-lic-track .mk-lt-pips i.mk-free.mk-open { background: color-mix(in srgb, var(--ink) 16%, transparent); border: 1px solid var(--ink); color: var(--ink); }
.mk .mk-lic-track .mk-lt-pips em { flex: 0 0 8px; }
.mk .mk-lic-track > span, .mk .mk-lic-track.mk-done > span { grid-column: 1; min-height: 18px; font-size: 13px; color: color-mix(in srgb, var(--ink) 85%, transparent); }
.mk .mk-cd-track { min-height: 84px; }
.mk .mk-lic-track.mk-off { align-content: center; }
@media (max-width: 780px) {
.mk .mk-lic-track .mk-lt-pips i { font-size: 11.5px; padding: 0 4px; }
.mk .mk-lic-track > span, .mk .mk-lic-track.mk-done > span { font-size: 12.5px; }
}
.mk .mk-lic-track .mk-lt-pips { display: block; }
.mk .mk-lt-pips .mk-bar2 { position: relative; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.mk .mk-lt-pips .mk-zone-free { position: absolute; top: 0; bottom: 0; right: 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 10%, transparent) 0 6px, color-mix(in srgb, var(--ink) 3%, transparent) 6px 12px); }
.mk .mk-lt-pips .mk-bar2 s { position: absolute; top: 0; bottom: 0; left: 0; text-decoration: none; transition: width 0.3s ease; }
.mk .mk-lt-pips .mk-bar2 s.mk-fp { background: var(--accent); }
.mk .mk-lt-pips .mk-bar2 s.mk-ff { background: var(--ink); }
.mk .mk-lt-pips .mk-bar2 u { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: color-mix(in srgb, var(--bg) 95%, var(--ink)); }
.mk .mk-lic-track { min-height: 66px; }
.mk .mk-cd-track { min-height: 70px; }
@media (prefers-reduced-motion: reduce) {
.mk .mk-lt-pips .mk-bar2 s { transition: none; }
}
.mk .mk-lic-track { position: relative; }
.mk .mk-lt-save { position: absolute; top: 2px; right: 2px; font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.mk .mk-cd-track .mk-lt-save { top: 10px; }
.mk .mk-lt-pips .mk-bar2 s.mk-ff { background: repeating-linear-gradient(135deg, var(--accent) 0 6px, color-mix(in srgb, var(--accent) 80%, white) 6px 12px); }
.mk .mk-lt-pips .mk-bar2 u { display: none; }
.mk .mk-lt-pips .mk-zone-free { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, transparent) 0 6px, color-mix(in srgb, var(--accent) 10%, transparent) 6px 12px); }
.mk .mk-cd-track { align-content: start; padding-top: 12px; }
.mk .mk-cd-track .mk-lt-save { top: 12px; line-height: 1; }
.mk .mk-cd-track > b { line-height: 1; }
.mk .mk-lic-track > b { line-height: 1.2; }
.mk .mk-cd-track .mk-lt-save { display: none; }
.mk .mk-cd-saved span { color: var(--ink); }
.mk .mk-hero { border-bottom: 1px solid var(--line); background: radial-gradient(90% 140% at 85% 0%, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--bg) 0%, transparent) 60%), var(--bg); }
.mk .mk-hero-in { max-width: 1100px; margin: 0 auto; padding: 40px clamp(16px, 4vw, 40px) 34px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.mk .mk-hero-k { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.mk .mk-hero h1 { margin: 0; font-size: clamp(34px, 5vw, 54px); line-height: 1; letter-spacing: -0.035em; font-weight: 800; }
.mk .mk-hero-sub { margin: 10px 0 20px; color: var(--muted); font-size: 16px; max-width: 46ch; }
.mk .mk-hero-search { display: flex; align-items: center; gap: 10px; height: 52px; max-width: 560px; padding: 0 18px; border-radius: 26px; background: #181818; border: 1px solid #343434; color: var(--muted); }
.mk .mk-hero-search:focus-within { border-color: #fff; }
.mk .mk-hero-search svg { width: 18px; height: 18px; }
.mk .mk-hero-search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; color: var(--ink); font: inherit; font-size: 15px; }
.mk .mk-hero-tags { margin: 12px 0 0; padding: 0; border: 0; flex-wrap: wrap; gap: 6px; overflow: visible; }
.mk .mk-hero-tags span { margin-right: 4px; }
.mk .mk-hero-tags button { height: 32px; padding: 0 14px; border-radius: 16px; background: color-mix(in srgb, var(--panel) 98%, var(--ink)); border: 1px solid #2e2e2e; color: var(--ink); font-size: 13px; }
.mk .mk-hero-tags button:hover, .mk .mk-hero-tags button[aria-pressed="true"] { border-color: var(--accent); color: #fff; background: #2a1213; }
.mk .mk-hero-covers { display: flex; padding-right: 34px; }
.mk .mk-hero-covers img { width: 150px; height: 150px; border-radius: 12px; object-fit: cover; margin-right: -34px; border: 3px solid var(--bg); box-shadow: 0 16px 36px rgba(0,0,0,0.5); }
.mk .mk-hero-covers img:nth-child(1) { transform: rotate(-6deg) translateY(8px); }
.mk .mk-hero-covers img:nth-child(2) { transform: translateY(-8px); z-index: 1; }
.mk .mk-hero-covers img:nth-child(3) { transform: rotate(6deg) translateY(8px); z-index: 2; }
.mk .mk-catalog { margin-top: 18px; }
@media (max-width: 900px) {
.mk .mk-hero-covers { display: none; }
.mk .mk-hero-in { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
.mk .mk-hero-in { padding: 24px 16px 22px; }
.mk .mk-hero-sub { margin-bottom: 16px; font-size: 15px; }
.mk .mk-hero-search { height: 48px; }
}
@media (max-width: 780px) {
.mk .mk-hero-in { padding: 18px 16px 16px; }
.mk .mk-hero-k { margin-bottom: 2px; }
.mk .mk-hero h1 { font-size: 30px; }
.mk .mk-hero-sub { font-size: 14px; margin: 6px 0 12px; }
.mk .mk-hero-search { height: 44px; }
.mk .mk-hero-tags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 10px; }
.mk .mk-hero-tags::-webkit-scrollbar { display: none; }
.mk .mk-hero-tags span, .mk .mk-hero-tags button { flex: none; }
.mk .mk-hero-tags button { height: 30px; padding: 0 12px; font-size: 12.5px; }
.mk .mk-catalog { margin-top: 8px; }
}
.mk .mk-hero-copy { min-width: 0; }
.mk .mk-hero-in { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 900px) {
.mk .mk-hero-in { grid-template-columns: minmax(0, 1fr); }
}
.mk .mk-hero-search, .mk .mk-hero-sub { max-width: 100%; }
.mk .mk-sl { position: relative; overflow: hidden; background: var(--bg); border-bottom: 1px solid var(--line); }
.mk .mk-sl-track { position: relative; height: clamp(380px, 46vw, 500px); }
.mk .mk-sl-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0.6s; }
.mk .mk-sl-slide.mk-on { opacity: 1; visibility: visible; }
.mk .mk-sl-bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(48px) saturate(1.3); opacity: 0.55; transform: scale(1.1); }
.mk .mk-sl-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 55%, color-mix(in srgb, var(--bg) 25%, transparent) 100%), linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 0%, transparent) 28%); }
.mk .mk-sl-in { position: relative; z-index: 2; height: 100%; max-width: 1100px; margin: 0 auto; padding: 0 clamp(56px, 7vw, 40px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; align-items: center; }
.mk .mk-sl-copy { min-width: 0; }
.mk .mk-sl-k { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.mk .mk-sl-copy h2 { margin: 0; font-size: clamp(36px, 5.4vw, 64px); line-height: 1; letter-spacing: -0.04em; font-weight: 800; text-wrap: balance; }
.mk .mk-sl-p { margin: 14px 0 22px; max-width: 44ch; color: color-mix(in srgb, var(--ink) 75%, var(--bg)); font-size: 16px; line-height: 1.5; }
.mk .mk-sl-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.mk .mk-sl-btn { height: 48px; padding: 0 26px; border-radius: 24px; border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); font-weight: 700; font-size: 14px; letter-spacing: 0.03em; color: var(--accent-ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.mk .mk-sl-btn:hover { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.mk .mk-sl-btn.mk-primary { background: var(--accent); border-color: var(--accent); }
.mk .mk-sl-btn.mk-primary:hover { filter: brightness(1.12); }
.mk .mk-sl-art { display: grid; place-items: center; }
.mk .mk-sl-art .mk-sl-img { width: min(340px, 100%); aspect-ratio: 1; object-fit: cover; border-radius: 14px; box-shadow: 0 30px 70px rgba(0,0,0,0.6); }
.mk .mk-sl-art.mk-stack { position: relative; height: 320px; }
.mk .mk-sl-art.mk-stack img { position: absolute; width: 210px; height: 210px; object-fit: cover; border-radius: 12px; box-shadow: 0 24px 50px rgba(0,0,0,0.55); border: 3px solid var(--bg); }
.mk .mk-sl-art.mk-stack img:nth-child(1) { left: 6%; top: 22px; transform: rotate(-7deg); }
.mk .mk-sl-art.mk-stack img:nth-child(2) { left: 30%; top: 0; z-index: 1; }
.mk .mk-sl-art.mk-stack img:nth-child(3) { left: 52%; top: 40px; transform: rotate(7deg); z-index: 2; }
.mk .mk-sl-form { display: flex; gap: 8px; max-width: 460px; }
.mk .mk-sl-form input { flex: 1; min-width: 0; height: 48px; border-radius: 24px; border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); background: rgba(0,0,0,0.35); color: #fff; padding: 0 18px; font: inherit; font-size: 15px; outline: none; }
.mk .mk-sl-form input:focus { border-color: #fff; }
.mk .mk-sl-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); min-height: 18px; }
.mk .mk-sl-nav { position: absolute; top: 50%; z-index: 4; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,0.45); border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); color: #fff; }
.mk .mk-sl-nav:hover { background: rgba(0,0,0,0.7); }
.mk .mk-sl-nav.mk-prev { left: 14px; }
.mk .mk-sl-nav.mk-next { right: 14px; }
.mk .mk-sl-dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 4; display: flex; justify-content: center; align-items: center; gap: 8px; }
.mk .mk-sl-dots button[role="tab"] { width: 44px; height: 24px; display: grid; place-items: center; }
.mk .mk-sl-dots i { display: block; width: 100%; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 30%, transparent); position: relative; overflow: hidden; }
.mk .mk-sl-dots button[aria-selected="true"] i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: slp var(--dur, 6s) linear forwards; }
.mk .mk-sl.mk-paused .mk-sl-dots button[aria-selected="true"] i::after { animation: none; transform: none; }
@keyframes slp { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mk .mk-sl-pause { width: 28px; height: 24px; display: grid; place-items: center; color: #fff; margin-left: 6px; }
.mk .mk-sl-pause svg { width: 14px; height: 14px; }
@media (max-width: 780px) {
.mk .mk-sl-track { height: 460px; }
.mk .mk-sl-in { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 18px; padding: 0 20px; }
.mk .mk-sl-art { display: none; }
.mk .mk-sl-slide::after { background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 75%, transparent) 45%, color-mix(in srgb, var(--bg) 50%, transparent) 100%); }
.mk .mk-sl-copy h2 { font-size: 38px; }
.mk .mk-sl-p { font-size: 14.5px; margin: 10px 0 18px; }
.mk .mk-sl-nav { display: none; }
.mk .mk-sl-form { flex-direction: column; }
.mk .mk-sl-btn { height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
.mk .mk-sl-slide { transition: none; }
.mk .mk-sl-dots button[aria-selected="true"] i::after { animation: none; transform: none; }
}
.mk .mk-sl-bg { opacity: 0.8; }
.mk .mk-sl-slide::after { background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 88%, transparent) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 55%, color-mix(in srgb, var(--bg) 10%, transparent) 100%), linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 0%, transparent) 24%); }
@media (max-width: 780px) {
.mk .mk-sl-form input { flex: none; width: 100%; height: 48px; }
.mk .mk-sl-slide::after { background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 50%, color-mix(in srgb, var(--bg) 40%, transparent) 100%); }
}
.mk .mk-bs-track { max-width: 1100px; margin: 18px 0 4px; min-height: 84px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: #131313; }
.mk .mk-bs-track .mk-lt-save { top: 14px; right: 18px; }
.mk .mk-bs-track.mk-off { opacity: 0.7; }
@media (max-width: 780px) {
.mk .mk-sl-track { height: 560px; }
.mk .mk-sl-in { grid-template-rows: auto auto; align-content: center; gap: 20px; }
.mk .mk-sl-art { display: grid; order: -1; justify-items: center; }
.mk .mk-sl-art .mk-sl-img { width: 150px; border-radius: 12px; }
.mk .mk-sl-art.mk-stack { height: 150px; width: 100%; }
.mk .mk-sl-art.mk-stack img { width: 104px; height: 104px; }
.mk .mk-sl-art.mk-stack img:nth-child(1) { left: calc(50% - 128px); top: 22px; }
.mk .mk-sl-art.mk-stack img:nth-child(2) { left: calc(50% - 52px); top: 0; }
.mk .mk-sl-art.mk-stack img:nth-child(3) { left: calc(50% + 24px); top: 22px; }
.mk .mk-sl-copy { text-align: center; }
.mk .mk-sl-p { margin-left: auto; margin-right: auto; }
.mk .mk-sl-cta { justify-content: center; }
.mk .mk-sl-form { margin: 0 auto; }
.mk .mk-sl-copy h2 { font-size: 34px; }
.mk .mk-sl-slide::after { background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 60%, transparent) 55%, color-mix(in srgb, var(--bg) 30%, transparent) 100%); }
}
.mk .mk-sl-pause { display: none; }
.mk .mk-sl-btn { height: 46px; padding: 0 28px; }
.mk .mk-sl-form { max-width: 440px; }
.mk .mk-sl-form input { height: 46px; }
.mk .mk-sl-form .mk-sl-btn { padding: 0 22px; flex: none; }
@media (max-width: 780px) {
.mk .mk-sl-track { height: 470px; }
.mk .mk-sl-in { gap: 14px; padding: 0 20px; }
.mk .mk-sl-art .mk-sl-img { width: 128px; }
.mk .mk-sl-art.mk-stack { height: 128px; }
.mk .mk-sl-art.mk-stack img { width: 90px; height: 90px; }
.mk .mk-sl-art.mk-stack img:nth-child(1) { left: calc(50% - 112px); top: 18px; }
.mk .mk-sl-art.mk-stack img:nth-child(2) { left: calc(50% - 45px); top: 0; }
.mk .mk-sl-art.mk-stack img:nth-child(3) { left: calc(50% + 22px); top: 18px; }
.mk .mk-sl-k { font-size: 11px; margin-bottom: 6px; }
.mk .mk-sl-copy h2 { font-size: 28px; white-space: nowrap; }
.mk .mk-sl-p { font-size: 13.5px; margin: 8px auto 14px; max-width: 32ch; }
.mk .mk-sl-btn { height: 42px; padding: 0 24px; font-size: 13px; }
.mk .mk-sl-form { flex-direction: row; gap: 6px; max-width: 100%; }
.mk .mk-sl-form input { width: auto; flex: 1; height: 42px; font-size: 14px; padding: 0 14px; }
.mk .mk-sl-form .mk-sl-btn { padding: 0 18px; }
.mk .mk-sl-note { font-size: 12px; margin-top: 8px; }
.mk .mk-sl-dots { bottom: 10px; }
}
@media (max-width: 780px) {
.mk .mk-sl-track { height: 384px; }
.mk .mk-sl-in { align-content: start; padding-top: 22px; }
.mk .mk-sl-dots { bottom: 6px; }
}
.mk .mk-lic-track, .mk .mk-lic-track.mk-bs-track, .mk .mk-cd-track { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; min-height: 0; align-content: start; padding: 12px 16px; }
.mk .mk-cd-track { padding: 12px 0 0; }
.mk .mk-lic-track { padding-left: 2px; padding-right: 2px; }
.mk .mk-lic-track.mk-bs-track { padding: 14px 18px; }
.mk .mk-lic-track > b { grid-column: 1; grid-row: 1; display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; white-space: normal; color: var(--ink); }
.mk .mk-lic-track > b .mk-dash { color: color-mix(in srgb, var(--ink) 50%, transparent); margin: 0 2px; }
.mk .mk-lic-track > b .mk-tx { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; color: color-mix(in srgb, var(--ink) 90%, transparent); }
.mk .mk-lic-track .mk-lt-save { position: static; grid-column: 2; grid-row: 1; align-self: start; font-size: 13px; line-height: 1.3; white-space: nowrap; }
.mk .mk-lic-track .mk-lt-pips { grid-column: 1 / -1; grid-row: 2; }
.mk .mk-lic-track > span { display: none; }
@media (max-width: 780px) {
.mk .mk-lic-track > b { font-size: 11.5px; }
.mk .mk-lic-track > b .mk-tx { font-size: 12.5px; }
}
.mk .mk-lt-pips .mk-bar2.mk-nodeal { opacity: 0.45; }
.mk .mk-lic-track.mk-off > b { font-weight: 600; }
@media (max-width: 780px) {
.mk .mk-lic-track.mk-bs-track { border: 0; background: none; border-radius: 0; padding: 12px 16px 4px; }
.mk .mk-cd-track { border-top: 1px solid var(--line); }
}
.mk .mk-lic-track > b { min-height: 17px; }
@media (min-width: 781px) {
.mk .mk-lic-track.mk-bs-track { grid-template-columns: auto minmax(120px, 1fr) auto; align-items: center; gap: 0 20px; padding: 14px 20px; }
.mk .mk-bs-track > b { grid-column: 1; grid-row: 1; white-space: nowrap; }
.mk .mk-bs-track .mk-lt-pips { grid-column: 2; grid-row: 1; }
.mk .mk-bs-track .mk-lt-save { grid-column: 3; grid-row: 1; align-self: center; min-width: 0; }
.mk .mk-bs-track .mk-lt-save:empty { display: none; }
}
@media (min-width: 781px) {
.mk .mk-lic-track.mk-bs-track { grid-template-columns: 330px minmax(120px, 1fr) 120px; }
.mk .mk-bs-track .mk-lt-save { text-align: right; display: block !important; min-height: 1px; }
}
@media (max-width: 780px) {
.mk .mk-lic-track > b .mk-dash { display: none; }
.mk .mk-lic-track > b .mk-tx { display: block; margin-top: 3px; min-height: 18px; white-space: nowrap; }
.mk .mk-lic-track > b { line-height: 1.25; }
}
@media (min-width: 781px) {
.mk .mk-lic-track.mk-bs-track { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }
.mk .mk-bs-track > b { grid-column: 1; grid-row: 1; }
.mk .mk-bs-track .mk-lt-save { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; width: auto; }
.mk .mk-bs-track .mk-lt-pips { grid-column: 2; grid-row: 1; }
}
@media (min-width: 781px) {
.mk .mk-lic-track.mk-bs-track { border: 0; background: none; border-radius: 0; border-top: 1px solid var(--line); margin-top: 6px; padding: 16px 4px 4px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 118px; gap: 0 24px; }
.mk .mk-bs-track > b { grid-column: 1; }
.mk .mk-bs-track .mk-lt-pips { grid-column: 2; }
.mk .mk-bs-track .mk-lt-save { grid-column: 3; justify-self: end; text-align: right; }
}
@media (min-width: 781px) {
.mk .mk-lic-track.mk-bs-track { padding-left: 58px; padding-right: 8px; }
}
@media (min-width: 781px) {
.mk .mk-lic-track.mk-bs-track { padding-left: 58px; padding-right: 58px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }
.mk .mk-bs-track > b { grid-column: 1; grid-row: 1; }
.mk .mk-bs-track .mk-lt-save { grid-column: 1; grid-row: 1; justify-self: end; }
.mk .mk-bs-track .mk-lt-pips { grid-column: 2; grid-row: 1; }
}
@media (min-width: 781px) {
.mk .mk-lic-track.mk-bs-track { display: flex; align-items: center; gap: 18px; padding-left: 58px; padding-right: 58px; }
.mk .mk-bs-track > b { display: contents; }
.mk .mk-bs-track > b .mk-dash { display: none; }
.mk .mk-bs-track .mk-lt-pips { order: 1; flex: 1 1 auto; min-width: 120px; }
.mk .mk-bs-track > b .mk-tx { order: 2; flex: none; width: 210px; text-align: right; white-space: nowrap; }
.mk .mk-bs-track .mk-lt-save { order: 3; flex: none; width: 118px; text-align: right; position: static; }
}
@media (min-width: 781px) {
.mk .mk-bs-track > b .mk-tx { text-align: left; width: 200px; }
}
@media (max-width: 780px) {
.mk .mk-lic-track > b .mk-tx { display: none; }
.mk .mk-lic-track > b { min-height: 0; }
}
@media (min-width: 781px) {
.mk .mk-lic-track.mk-bs-track { display: grid; grid-template-columns: 44px minmax(0, 1.5fr) 84px 84px minmax(0, 1fr) 176px !important; column-gap: 10px; align-items: center; padding: 16px 4px 4px; }
.mk .mk-bs-track > b { display: block; grid-column: 2; grid-row: 1; white-space: nowrap; }
.mk .mk-bs-track > b .mk-dash { display: inline; }
.mk .mk-bs-track > b .mk-tx { display: inline; width: auto; text-align: left; }
.mk .mk-bs-track .mk-lt-pips { grid-column: 3 / 6; grid-row: 1; min-width: 0; }
.mk .mk-bs-track .mk-lt-save { grid-column: 6; grid-row: 1; width: auto; justify-self: end; text-align: right; padding-right: 4px; }
}
@media (min-width: 781px) {
.mk .mk-bs-track > b { white-space: normal; min-width: 0; overflow: hidden; }
.mk .mk-bs-track > b .mk-dash { display: none; }
.mk .mk-bs-track > b .mk-tx { display: block; margin-top: 4px; font-size: 13px; color: color-mix(in srgb, var(--ink) 70%, transparent); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.mk .mk-lic-track.mk-bs-track { align-items: center; padding-top: 14px; }
}
@media (min-width: 781px) {
.mk .mk-bs-track > b { white-space: nowrap; overflow: hidden; padding-right: 16px; }
.mk .mk-bs-track > b .mk-dash { display: inline; }
.mk .mk-bs-track > b .mk-tx { display: inline; margin-top: 0; font-size: 13px; color: color-mix(in srgb, var(--ink) 80%, transparent); }
.mk .mk-bs-track.mk-notx > b .mk-dash, .mk .mk-bs-track.mk-notx > b .mk-tx { display: none; }
.mk .mk-bs-track .mk-lt-pips { margin-left: var(--bar-inset, 0px); }
}
@media (max-width: 780px) {
.mk .mk-lic-track, .mk .mk-lic-track.mk-bs-track, .mk .mk-cd-track { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 14px; }
.mk .mk-lic-track > b { grid-column: 1; grid-row: 1; white-space: nowrap; }
.mk .mk-lic-track .mk-lt-pips { grid-column: 2; grid-row: 1; }
.mk .mk-lic-track .mk-lt-save { display: none; }
.mk .mk-lic-track.mk-bs-track { padding: 14px 16px 6px; }
}
@media (max-width: 780px) {
.mk .mk-lic-track.mk-bs-track { margin-top: 0; padding: 16px 16px 4px; }
.mk .mk-bs-track + .mk-more { margin-top: 12px; }
}
@media (max-width: 780px) {
.mk .mk-lic-card { padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); gap: 12px; }
.mk .mk-lic-head img { width: 40px; height: 40px; }
.mk .mk-lic-id h2 { font-size: 16px; }
.mk .mk-lic-id p { font-size: 12px; }
.mk .mk-lx-wrap { gap: 12px; }
.mk .mk-lx-name { font-size: 18px; }
.mk .mk-lx-price { font-size: 24px; }
.mk .mk-lx-stop { min-height: 56px; gap: 5px; padding-top: 6px; }
.mk .mk-lx-lab { font-size: 11px; }
.mk .mk-lx-sp { font-size: 12px; }
.mk .mk-lx-body { padding: 10px 12px; gap: 10px; }
.mk .mk-lx-col { gap: 6px; }
.mk .mk-lx-col h4 { font-size: 10.5px; }
.mk .mk-lx-col .mk-lx-h-files { margin-top: 4px; }
.mk .mk-lx-meters { grid-template-columns: 1fr; gap: 0; }
.mk .mk-lx-m { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); }
.mk .mk-lx-m > div { display: contents; }
.mk .mk-lx-m span { order: 1; font-size: 12.5px; color: var(--muted); }
.mk .mk-lx-m b { order: 2; font-size: 13px; }
.mk .mk-lx-m i { display: none; }
.mk .mk-lx-files span { height: 22px; font-size: 11.5px; padding: 0 9px; }
.mk .mk-d-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
.mk .mk-d-grid > div { display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); }
.mk .mk-d-grid dt { font-size: 12.5px; flex: none; }
.mk .mk-d-grid dd { font-size: 13px; text-align: right; white-space: normal; }
.mk .mk-d-grid .mk-vt { border-bottom: 0; justify-content: flex-start; padding-top: 8px; }
.mk .mk-d-grid .mk-vt .mk-lic-link { font-size: 12.5px; }
.mk .mk-lic-add { height: 46px; font-size: 14.5px; }
.mk .mk-lic-offer { font-size: 12.5px; }
.mk .mk-lic-trust { font-size: 11px; }
}
.mk .mk-lx-terms-link { justify-self: center; font-size: 13px; padding: 0; margin-top: -4px; }
@media (max-width: 780px) {
.mk .mk-lx-terms-link { font-size: 12.5px; margin-top: -2px; }
}
.mk .mk-lx-tt { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; text-align: left; pointer-events: none; }
.mk .mk-lx-tt svg { display: none; width: 16px; height: 16px; color: var(--muted); transition: transform 0.2s; }
@media (max-width: 780px) {
.mk .mk-lx-tt { pointer-events: auto; min-height: 36px; margin-top: 2px; border-top: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); }
.mk .mk-lx-tt svg { display: block; }
.mk .mk-lx-tt[aria-expanded="true"] svg { transform: rotate(180deg); }
.mk .mk-lx-col #lxTerms { display: none !important; }
.mk .mk-lx-col.mk-tt-open #lxTerms { display: grid !important; }
}
@media (prefers-reduced-motion: reduce) {
.mk .mk-lx-tt svg { transition: none; }
}
@media (max-width: 780px) {
.mk .mk-lic-card { gap: 10px; padding-top: 12px; }
.mk .mk-lic-head { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 10px; }
.mk .mk-lic-head img { width: 36px; height: 36px; border-radius: 6px; }
.mk .mk-lic-x { width: 36px; height: 36px; }
.mk .mk-lic-id h2 { font-size: 15px; }
.mk .mk-lic-id p { font-size: 11.5px; margin-top: 0; }
.mk .mk-lx-wrap { gap: 10px; }
.mk .mk-lx-hero { gap: 8px; }
.mk .mk-lx-name { font-size: 16px; }
.mk .mk-lx-price { font-size: 22px; }
.mk .mk-lx-stop { min-height: 48px; gap: 3px; padding: 4px 2px 0; }
.mk .mk-lx-dot { width: 16px; height: 16px; border-width: 2px; }
.mk .mk-lx-stop.mk-on .mk-lx-dot { width: 20px; height: 20px; margin: -2px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.mk .mk-lx-stop.mk-past .mk-lx-dot { width: 12px; height: 12px; margin: 2px; }
.mk .mk-lx-rail { top: 13px; height: 3px; }
.mk .mk-lx-lab { font-size: 10.5px; }
.mk .mk-lx-sp { font-size: 11.5px; margin-top: -2px; }
.mk .mk-lx-body { padding: 8px 12px; gap: 6px; }
.mk .mk-lx-col { gap: 4px; }
.mk .mk-lx-col:first-child { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 4px; }
.mk .mk-lx-col:first-child > h4:first-child { grid-column: 1; }
.mk .mk-lx-col:first-child > .mk-lx-files { grid-column: 2; justify-self: end; }
.mk .mk-lx-col:first-child > .mk-lx-h-files, .mk .mk-lx-col:first-child > .mk-lx-meters { grid-column: 1 / -1; }
.mk .mk-lx-col .mk-lx-h-files { margin-top: 2px; }
.mk .mk-lx-files { gap: 4px; flex-wrap: nowrap; }
.mk .mk-lx-files span { height: 20px; font-size: 11px; padding: 0 7px; gap: 3px; }
.mk .mk-lx-files svg { width: 10px; height: 10px; }
.mk .mk-lx-m { padding: 2px 0; }
.mk .mk-lx-m span { font-size: 12px; }
.mk .mk-lx-m b { font-size: 12.5px; }
.mk .mk-d-grid > div { padding: 2px 0; }
.mk .mk-lx-tt { min-height: 30px; margin-top: 0; }
.mk .mk-lx-terms-link { margin-top: -4px; font-size: 12px; }
.mk .mk-lic-foot .mk-lf-buy { gap: 4px; min-height: 0; }
.mk .mk-lic-add { height: 44px; font-size: 14px; }
.mk .mk-lic-offer { font-size: 12px; padding: 2px 0; }
.mk .mk-lic-trust { font-size: 10.5px; }
.mk .mk-lic-track { padding-top: 0; padding-bottom: 0; }
}
.mk .mk-lx-tt:focus:not(:focus-visible) { outline: none; }
.mk .mk-lx-tt:focus-visible { outline: 2px solid color-mix(in srgb, var(--ink) 60%, transparent); outline-offset: 2px; border-radius: 6px; }
.mk .mk-lx-mfiles, .mk .mk-lbl-m, .mk .mk-lx-terms-in { display: none; }
@media (max-width: 780px) {
.mk .mk-lx-hero { display: none; }
.mk .mk-lx-mfiles { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid var(--line); }
.mk .mk-lx-mfiles span { font-size: 12.5px; color: var(--muted); }
.mk .mk-lx-mfiles b { font-size: 13px; }
.mk .mk-lx-body { display: flex; flex-direction: column; gap: 0; padding: 0 12px; }
.mk .mk-lx-col { display: contents; }
.mk .mk-lx-col > h4:first-child, .mk .mk-lx-files { display: none !important; }
.mk .mk-lx-tt { order: -1; border-top: 0; min-height: 40px; }
.mk .mk-lbl-d { display: none; }
.mk .mk-lbl-m { display: inline; }
.mk .mk-lx-h-files { order: 1; margin-top: 2px !important; }
.mk .mk-lx-meters { order: 2; }
.mk #lxTerms { order: 3; }
.mk .mk-lx-terms-in { order: 4; align-self: center; font-size: 12.5px; padding: 8px 0 10px; }
.mk .mk-lx-body:not(.mk-tt-open) .mk-lx-h-files, .mk .mk-lx-body:not(.mk-tt-open) .mk-lx-meters, .mk .mk-lx-body:not(.mk-tt-open) #lxTerms, .mk .mk-lx-body:not(.mk-tt-open) .mk-lx-terms-in { display: none !important; }
.mk .mk-lx-body.mk-tt-open .mk-lx-h-files, .mk .mk-lx-body.mk-tt-open .mk-lx-meters, .mk .mk-lx-body.mk-tt-open .mk-lx-terms-in { display: block !important; }
.mk .mk-lx-body.mk-tt-open #lxTerms { display: grid !important; margin-top: 6px; }
.mk .mk-lx-col #lxTerms { display: none; }
.mk .mk-lx-terms-link { display: none; }
.mk .mk-lf-buy .mk-lic-track { margin: 0 0 4px; width: 100%; padding: 0; border: 0; background: none; }
.mk .mk-lf-buy .mk-lic-track > b { font-size: 11px; }
}
@media (max-width: 780px) {
.mk .mk-lx-mfiles { display: grid; gap: 8px; padding: 0 2px; border: 0; background: none; border-radius: 0; }
.mk .mk-lx-mfiles h4 { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.mk .mk-lx-files2 { display: flex; gap: 6px; flex-wrap: wrap; }
.mk .mk-lx-files2 span { height: 24px; font-size: 12px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 8%, transparent); font-weight: 600; }
.mk .mk-lx-files2 span.mk-no { opacity: 0.38; }
.mk .mk-lx-files2 svg { width: 12px; height: 12px; stroke-width: 2.4; color: #4cc38a; }
.mk .mk-lx-files2 span.mk-no svg { color: var(--muted); }
}
@media (max-width: 780px) {
.mk .mk-lx-mfiles { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.mk .mk-lx-files2 { flex-wrap: nowrap; justify-content: flex-end; }
}
@media (max-width: 780px) {
.mk .mk-lic-card { max-height: 94dvh; }
.mk .mk-lx-wrap { gap: 10px; }
.mk .mk-lx-body.mk-tt-open .mk-lx-h-files { display: none !important; }
.mk .mk-lx-body.mk-tt-open .mk-lx-meters { margin-top: 2px; }
.mk .mk-lx-tt { min-height: 36px; }
.mk .mk-lx-terms-in { padding: 6px 0 8px; }
.mk #lxTerms { margin-top: 4px !important; padding-top: 4px; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
}
@media (max-width: 780px) and (min-height: 760px) {
.mk .mk-lic-card { gap: 14px; padding-top: 16px; }
.mk .mk-lx-wrap { gap: 14px; }
.mk .mk-lx-stop { min-height: 54px; }
.mk .mk-lic-add { height: 50px; font-size: 15px; }
.mk .mk-lic-foot .mk-lf-buy { gap: 6px; }
}
@media (max-width: 780px) {
.mk .mk-lx-wrap .mk-lic-foot { padding-top: 4px !important; }
.mk .mk-lf-buy .mk-lic-track { margin-top: 0 !important; }
}
@media (max-width: 780px) {
.mk .mk-lx-body.mk-tt-open .mk-lx-terms-in, .mk .mk-lx-terms-in { display: none !important; }
.mk .mk-lx-body.mk-tt-open #lxTerms { padding-bottom: 8px; }
}
@media (max-width: 780px) {
.mk .mk-lx-m span, .mk .mk-d-grid dt { font-size: 12px !important; color: var(--muted); }
.mk .mk-lx-m b, .mk .mk-d-grid dd { font-size: 12.5px !important; font-weight: 700 !important; }
}
@media (max-width: 780px) {
.mk .mk-lx-wrap .mk-lic-foot { padding-top: 2px !important; }
.mk .mk-lf-buy .mk-lic-track { margin-bottom: 8px !important; }
}
@media (max-width: 780px) {
.mk .mk-lx-wrap { gap: 12px !important; }
.mk .mk-lx-wrap .mk-lic-foot { padding-top: 0 !important; }
}
@media (min-width: 781px) {
.mk .mk-lic-card { width: min(600px, 100%); gap: 16px; padding: 20px 24px 20px; }
.mk .mk-lx-wrap { gap: 16px; }
.mk .mk-lx-hero { display: none; }
.mk .mk-lx-stop { min-height: 58px; }
.mk .mk-lx-mfiles { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mk .mk-lx-mfiles h4 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.mk .mk-lx-files2 { display: flex; gap: 6px; }
.mk .mk-lx-files2 span { height: 26px; font-size: 12.5px; padding: 0 11px; display: inline-flex; align-items: center; gap: 5px; border-radius: 13px; background: color-mix(in srgb, var(--ink) 8%, transparent); font-weight: 600; }
.mk .mk-lx-files2 span.mk-no { opacity: 0.38; }
.mk .mk-lx-files2 svg { width: 12px; height: 12px; stroke-width: 2.4; color: #4cc38a; }
.mk .mk-lx-files2 span.mk-no svg { color: var(--muted); }
.mk .mk-lx-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 0 28px !important; padding: 14px 18px; align-items: start; }
.mk .mk-lx-col > h4:first-child, .mk .mk-lx-files { display: none !important; }
.mk .mk-lx-col .mk-lx-h-files { margin-top: 0 !important; }
.mk .mk-lx-col { gap: 8px; }
.mk .mk-lx-meters { grid-template-columns: 1fr !important; gap: 0 !important; }
.mk .mk-lx-m { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); }
.mk .mk-lx-m > div { display: contents !important; }
.mk .mk-lx-m i { display: none !important; }
.mk .mk-lx-m span, .mk .mk-d-grid dt { order: 1; font-size: 13px !important; color: var(--muted); }
.mk .mk-lx-m b, .mk .mk-d-grid dd { order: 2; font-size: 13.5px !important; font-weight: 700 !important; text-align: right; }
.mk .mk-d-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
.mk .mk-d-grid > div { display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); }
.mk .mk-d-grid dd { white-space: nowrap; }
.mk .mk-lx-terms-link { display: none; }
.mk .mk-lx-terms-in { display: block !important; justify-self: start; padding: 10px 0 0; font-size: 13px; }
.mk .mk-lf-buy .mk-lic-track { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 14px; padding: 0; margin: 0 0 6px; border: 0; background: none; width: 100%; }
.mk .mk-lf-buy .mk-lic-track > b { grid-column: 1; grid-row: 1; white-space: nowrap; font-size: 12px; }
.mk .mk-lf-buy .mk-lic-track > b .mk-dash, .mk .mk-lf-buy .mk-lic-track > b .mk-tx { display: none; }
.mk .mk-lf-buy .mk-lic-track .mk-lt-pips { grid-column: 2; grid-row: 1; }
.mk .mk-lf-buy .mk-lic-track .mk-lt-save { grid-column: 3; grid-row: 1; font-size: 12.5px; }
.mk .mk-lic-foot .mk-lf-buy { gap: 6px; min-height: 0; }
.mk .mk-lic-add { height: 50px; }
}
@media (min-width: 781px) {
.mk .mk-lx-body { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important; }
.mk .mk-d-grid dt, .mk .mk-lx-m span { white-space: nowrap; }
.mk .mk-lx-terms-in { display: none !important; }
.mk .mk-lx-terms-link { display: block; justify-self: center; font-size: 13px; margin-top: -6px; }
}
.mk .mk-lx-credit { display: none; margin: 0; }
@media (min-width: 781px) {
.mk .mk-d-grid .mk-cr { display: none !important; }
.mk .mk-lx-credit { display: flex; grid-column: 1 / -1; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0 2px; margin-top: 6px; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.mk .mk-lx-credit dt { font-size: 13px; color: var(--muted); }
.mk .mk-lx-credit dd { margin: 0; font-size: 13.5px; font-weight: 700; }
}
@keyframes lxPulse { 0% { box-shadow: 0 0 0 0 rgba(228,32,36,0.45); } 70% { box-shadow: 0 0 0 9px rgba(228,32,36,0); } 100% { box-shadow: 0 0 0 0 rgba(228,32,36,0); } }
.mk .mk-lx-stop.mk-on .mk-lx-dot { animation: lxPulse 2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
.mk .mk-lx-stop.mk-on .mk-lx-dot { animation: none; }
}
@media (min-width: 781px) {
.mk .mk-lf-buy .mk-lic-track .mk-lt-save:empty { display: none; }
.mk .mk-lf-buy .mk-lic-track:has(.mk-lt-save:empty) .mk-lt-pips { grid-column: 2 / -1; }
}
.mk .mk-sl-p { text-wrap: balance; }
.mk .mk-sl-cta { align-items: center; }
.mk .mk-sl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.mk .mk-sl-btn svg { width: 17px; height: 17px; flex: none; }
.mk .mk-sl-play { position: relative; overflow: hidden; min-width: 150px; isolation: isolate; }
.mk .mk-sl-play .mk-pi { display: inline-grid; place-items: center; }
.mk .mk-sl-play .mk-pi svg { width: 14px; height: 14px; fill: #fff; }
.mk .mk-sl-prog { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: color-mix(in srgb, var(--ink) 14%, transparent); z-index: -1; transition: width 0.25s linear; }
.mk .mk-sl-buy svg { fill: none; stroke: currentColor; stroke-width: 2; }
.mk .mk-sl-btn.mk-incart { background: color-mix(in srgb, var(--ink) 10%, transparent); border-color: color-mix(in srgb, var(--ink) 35%, transparent); color: var(--accent-ink); }
.mk .mk-sl-btn.mk-incart svg { stroke: var(--accent-ink); }
.mk .mk-sl-art.mk-stack .mk-sl-card { position: absolute; display: block; width: 172px; height: 172px; border-radius: 12px; box-shadow: 0 24px 50px rgba(0,0,0,0.55); border: 3px solid var(--bg); overflow: hidden; }
.mk .mk-sl-art.mk-stack .mk-sl-card img { position: static; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; transform: none; }
.mk .mk-sl-art.mk-stack .mk-sl-card b { display: none; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 3px 10px; border-radius: 10px; background: #fff; color: color-mix(in srgb, var(--bg) 97.5%, var(--ink)); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.mk .mk-sl-art.mk-stack .mk-sl-card.mk-free b { display: block; }
.mk .mk-sl-art.mk-stack .mk-sl-card:nth-child(1) { left: 0%; top: 46px; transform: rotate(-7deg); z-index: 1; }
.mk .mk-sl-art.mk-stack .mk-sl-card:nth-child(2) { left: 20%; top: 18px; transform: rotate(-2deg); z-index: 2; }
.mk .mk-sl-art.mk-stack .mk-sl-card:nth-child(3) { left: 40%; top: 18px; transform: rotate(2deg); z-index: 3; }
.mk .mk-sl-art.mk-stack .mk-sl-card:nth-child(4) { left: 60%; top: 46px; transform: rotate(7deg); z-index: 4; }
@media (min-width: 781px) {
.mk .mk-sl-in { align-items: end; padding-bottom: 92px; }
.mk .mk-sl-art { align-self: center; padding-top: 0; }
.mk .mk-sl-dots { left: calc(max(0px, (100% - 1100px) / 2) + 56px); right: auto; bottom: 36px; justify-content: flex-start; }
.mk .mk-sl-nav { top: auto; bottom: 34px; margin-top: 0; width: 30px; height: 30px; background: transparent; border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.mk .mk-sl-nav svg { width: 15px; height: 15px; }
.mk .mk-sl-nav.mk-prev { left: calc(max(0px, (100% - 1100px) / 2) + 56px + 172px); }
.mk .mk-sl-nav.mk-next { left: calc(max(0px, (100% - 1100px) / 2) + 56px + 210px); right: auto; }
}
@media (min-width: 781px) and (max-height: 820px) {
.mk .mk-sl-track { height: 400px; }
.mk .mk-sl-in { padding-bottom: 80px; }
.mk .mk-sl-dots { bottom: 28px; }
.mk .mk-sl-nav { bottom: 26px; }
.mk .mk-sl-art .mk-sl-img { width: 250px; }
.mk .mk-sl-art.mk-stack { height: 250px; }
.mk .mk-sl-art.mk-stack .mk-sl-card { width: 136px; height: 136px; }
.mk .mk-sl-copy h2 { font-size: 52px; }
.mk .mk-sl-p { margin: 10px 0 18px; }
}
@media (max-width: 780px) {
.mk .mk-sl-art.mk-stack .mk-sl-card { width: 84px; height: 84px; border-width: 2px; border-radius: 10px; }
.mk .mk-sl-art.mk-stack .mk-sl-card b { bottom: 5px; font-size: 9px; padding: 2px 6px; }
.mk .mk-sl-art.mk-stack .mk-sl-card:nth-child(1) { left: calc(50% - 142px); top: 26px; }
.mk .mk-sl-art.mk-stack .mk-sl-card:nth-child(2) { left: calc(50% - 82px); top: 8px; }
.mk .mk-sl-art.mk-stack .mk-sl-card:nth-child(3) { left: calc(50% - 2px); top: 8px; }
.mk .mk-sl-art.mk-stack .mk-sl-card:nth-child(4) { left: calc(50% + 58px); top: 26px; }
.mk .mk-sl-p { min-height: 3em; display: flex; align-items: center; justify-content: center; }
.mk .mk-sl-play { min-width: 0; }
.mk .mk-sl-cta { gap: 8px; }
}
.mk .mk-sl-play { width: 158px; min-width: 0; }
.mk .mk-sl-art.mk-stack .mk-sl-card b { left: 10px; transform: none; }
@media (min-width: 781px) {
.mk .mk-sl-in { padding-bottom: 156px; }
.mk .mk-sl-dots { bottom: 100px; }
.mk .mk-sl-nav { bottom: 98px; }
}
@media (min-width: 781px) and (max-height: 820px) {
.mk .mk-sl-in { padding-bottom: 92px; }
.mk .mk-sl-dots { bottom: 36px; }
.mk .mk-sl-nav { bottom: 34px; }
}
@media (max-width: 780px) {
.mk .mk-sl-play { width: 140px; }
.mk .mk-sl-art.mk-stack .mk-sl-card b { left: 5px; }
}
@media (min-width: 781px) {
.mk .mk-sl-art { margin-bottom: -156px; }
}
@media (min-width: 781px) and (max-height: 820px) {
.mk .mk-sl-art { margin-bottom: -92px; }
}
@media (min-width: 781px) {
.mk .mk-sl-in { align-items: center; padding-bottom: 56px; }
.mk .mk-sl-art { margin-bottom: -56px; }
.mk .mk-sl-dots { left: 0; right: 0; justify-content: center; bottom: 22px; }
.mk .mk-sl-nav { bottom: 19px; }
.mk .mk-sl-nav.mk-prev { left: calc(50% - 118px); right: auto; }
.mk .mk-sl-nav.mk-next { left: calc(50% + 88px); right: auto; }
}
@media (min-width: 781px) and (max-height: 820px) {
.mk .mk-sl-in { padding-bottom: 44px; }
.mk .mk-sl-art { margin-bottom: -44px; }
.mk .mk-sl-dots { bottom: 14px; }
.mk .mk-sl-nav { bottom: 11px; }
}
.mk .mk-sl-dots button[role="tab"] { cursor: pointer; height: 32px; }
.mk .mk-sl-dots button[role="tab"]:hover i { background: color-mix(in srgb, var(--ink) 55%, transparent); }
.mk .mk-sl-dots button[role="tab"]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.mk .mk-sl-art.mk-stack { position: relative; height: auto; display: grid; grid-template-columns: repeat(2, 156px); gap: 12px; justify-content: center; align-content: center; }
.mk .mk-sl-art.mk-stack .mk-sl-card, .mk .mk-sl-art.mk-stack .mk-sl-card:nth-child(n) { position: relative; left: auto; top: auto; transform: none; width: 156px; height: 156px; border: 0; border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,0.5); }
.mk .mk-sl-art.mk-stack .mk-sl-card[hidden] { display: none; }
.mk .mk-sl-art.mk-stack .mk-sl-card b, .mk .mk-sl-art.mk-stack .mk-sl-card.mk-free b { left: 8px; bottom: 8px; transform: none; padding: 4px 9px; border-radius: 8px; background: rgba(10,10,10,0.72); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
@media (min-width: 781px) and (max-height: 820px) {
.mk .mk-sl-art.mk-stack { grid-template-columns: repeat(2, 118px); gap: 10px; }
.mk .mk-sl-art.mk-stack .mk-sl-card, .mk .mk-sl-art.mk-stack .mk-sl-card:nth-child(n) { width: 118px; height: 118px; }
}
@media (max-width: 780px) {
.mk .mk-sl-art.mk-stack { grid-template-columns: repeat(4, 68px); gap: 8px; height: auto; width: auto; }
.mk .mk-sl-art.mk-stack .mk-sl-card, .mk .mk-sl-art.mk-stack .mk-sl-card:nth-child(n) { width: 68px; height: 68px; border-radius: 9px; }
.mk .mk-sl-art.mk-stack .mk-sl-card b, .mk .mk-sl-art.mk-stack .mk-sl-card.mk-free b { left: 4px; bottom: 4px; padding: 2px 5px; font-size: 8.5px; border-radius: 5px; }
}
@media (min-width: 781px) {
.mk .mk-sl-copy { align-self: start; margin-top: calc((clamp(380px, 46vw, 500px) - 56px - 205px) / 2); }
}
@media (min-width: 781px) and (max-height: 820px) {
.mk .mk-sl-copy { margin-top: calc((400px - 44px - 185px) / 2); }
}
@media (max-width: 780px) {
.mk .mk-sl-art.mk-stack { min-height: 128px; align-content: center; }
}
.mk { --btn2: #262626; --btn2-hover: #313131; }
.mk .mk-row .mk-price, .mk .mk-row .mk-price.mk-incart, .mk .mk-row.mk-active .mk-price.mk-incart, .mk .mk-bar .mk-buy.mk-incart, .mk .mk-sl-btn:not(.mk-primary), .mk .mk-sl-btn.mk-incart, .mk .mk-fbtn, .mk .mk-lic-ghost, .mk .mk-ghost { background-image: none; background-color: var(--btn2); border-color: transparent; box-shadow: none; }
.mk .mk-row .mk-price:hover, .mk .mk-row .mk-price.mk-incart:hover, .mk .mk-bar .mk-buy.mk-incart:hover, .mk .mk-sl-btn:not(.mk-primary):hover, .mk .mk-sl-btn.mk-incart:hover, .mk .mk-fbtn:hover, .mk .mk-lic-ghost:hover, .mk .mk-ghost:hover { background-color: var(--btn2-hover); border-color: transparent; }
.mk .mk-row.mk-active .mk-price:not(.mk-incart) { background-color: var(--accent); }
.mk .mk-fbtn[aria-pressed="true"] { border-color: transparent; color: var(--accent); }
.mk .mk-sl-btn { white-space: nowrap; }
@media (max-width: 780px) {
.mk .mk-sl-play { width: 152px; padding: 0 16px; }
}
.mk .mk-row, .mk .mk-row:nth-child(n) { min-height: 54px; }
@media (max-width: 780px) {
.mk .mk-row, .mk .mk-row:nth-child(n) { min-height: 54px; }
}
.mk .mk-head span.mk-hall { visibility: visible; display: flex; justify-content: flex-end; }
.mk .mk-view-all { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 2px; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: none; border: 0; cursor: pointer; white-space: nowrap; }
.mk .mk-view-all svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.mk .mk-view-all:hover { color: #fff; }
.mk .mk-view-all:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
@media (min-width: 781px) {
.mk .mk-more { display: none; }
}
.mk .mk-more button { background: var(--btn2); border-color: transparent; }
.mk .mk-more button:hover { background: var(--btn2-hover); }
@media (min-width: 781px) {
.mk .mk-head > span:nth-child(6) { display: none; }
.mk .mk-head > span.mk-hall { display: flex; grid-column: 6; }
}

/* ==== slimBar ==== */
@media (min-width: 781px) {
.mk .mk-bar { height: auto !important; overflow: hidden; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; transform: none !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; background: color-mix(in srgb, var(--bg) 97.5%, var(--ink)) !important; }
.mk .mk-bar .mk-prog { display: block !important; position: absolute; left: 0; right: 0; top: 0; bottom: auto; height: 3px; border-radius: 0; background: color-mix(in srgb, var(--ink) 14%, transparent); transition: height 0.15s, opacity 0.25s; z-index: 2; }
.mk .mk-bar .mk-prog:hover { height: 5px; }
.mk .mk-bar .mk-prog::after { top: -8px; bottom: -8px; }
.mk .mk-bar-in { height: auto !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; grid-template-areas: "wave wave wave" "now ctrls right"; row-gap: 0; padding: 7px 20px 6px !important; }
.mk .mk-bar .mk-now img { width: 40px; height: 40px; }
.mk #barMeta br { display: none; }
.mk #barTL::before { content: " \00b7  "; }
.mk .mk-bar .mk-now { grid-area: now; }
.mk .mk-bar .mk-ctrls { grid-area: ctrls; justify-self: center; }
.mk .mk-bar .mk-right { grid-area: right; }
.mk .mk-bar .mk-mid { grid-area: wave; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; gap: 10px; align-items: center; height: 0; opacity: 0; overflow: hidden; transition: height 0.3s cubic-bezier(.2,.8,.2,1), opacity 0.25s, margin 0.3s; }
.mk .mk-bar .mk-mid .mk-t { display: block !important; font-size: 11px; min-width: 30px; }
.mk .mk-bar .mk-mid .mk-wf.mk-mini { height: 28px; }
.mk .mk-bar.mk-wave-on .mk-mid { height: 30px; opacity: 1; margin: 1px 0 6px; }
.mk .mk-bar.mk-wave-on .mk-prog { opacity: 0; pointer-events: none; }
.mk { padding-bottom: 100px; }
}
@media (prefers-reduced-motion: reduce) {
.mk .mk-bar .mk-mid, .mk .mk-bar .mk-prog { transition: none !important; }
}

/* ==== wfList ==== */
.mk .mk-rwf { display: none; position: relative; height: 30px; min-width: 0; cursor: pointer; }
.mk .mk-rwf span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; }
.mk .mk-rwf i { flex: 0 0 2px; border-radius: 1px; background: currentColor; }
.mk .mk-rwf .mk-b { color: color-mix(in srgb, var(--ink) 28%, transparent); }
.mk .mk-rwf .mk-f { color: var(--accent); clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
.mk .mk-row.mk-active .mk-rwf .mk-b { color: color-mix(in srgb, var(--ink) 40%, transparent); }
@media (min-width: 781px) {
.mk.mk-wf-list .mk-head, .mk.mk-wf-list .mk-row { grid-template-columns: 40px 180px minmax(0, 1fr) 42px 36px 176px !important; column-gap: 14px; }
.mk.mk-wf-list .mk-head > *, .mk.mk-wf-list .mk-row > * { grid-row: 1; }
.mk.mk-wf-list .mk-row > .mk-thumb, .mk.mk-wf-list .mk-head > span:nth-child(1) { grid-column: 1; }
.mk.mk-wf-list .mk-row > .mk-name, .mk.mk-wf-list .mk-head > span:nth-child(2) { grid-column: 2; }
.mk.mk-wf-list .mk-row > .mk-rwf { display: block; grid-column: 3; }
.mk.mk-wf-list .mk-head > span:nth-child(6) { display: block !important; grid-column: 3; visibility: visible; }
.mk.mk-wf-list .mk-head > span:nth-child(6)::before { content: "Preview"; }
.mk.mk-wf-list .mk-row > .mk-ht, .mk.mk-wf-list .mk-head > .mk-ht { grid-column: 4; text-align: right; }
.mk.mk-wf-list .mk-row > .mk-hb, .mk.mk-wf-list .mk-head > .mk-hb { grid-column: 5; text-align: right; }
.mk.mk-wf-list .mk-row > .mk-hk, .mk.mk-wf-list .mk-head > .mk-hk { display: none !important; }
.mk.mk-wf-list .mk-row > .mk-buyset, .mk.mk-wf-list .mk-head > span.mk-hall { grid-column: 6; }
.mk.mk-wf-list .mk-row .mk-thumb { width: 40px; height: 40px; }
.mk.mk-wf-list .mk-row .mk-name { font-size: 12px; }
.mk.mk-wf-list .mk-row .mk-chips .mk-chip { height: 16px; font-size: 10px; padding-inline: 6px; }
.mk.mk-wf-list .mk-row .mk-num { font-size: 11px; }
.mk.mk-wf-list .mk-head { font-size: 10px; }
.mk.mk-wf-list .mk-row .mk-num.mk-hb { color: var(--ink); font-weight: 600; }
.mk.mk-wf-list .mk-row .mk-num.mk-ht { color: var(--muted); }
.mk.mk-wf-list .mk-row::after { left: 54px; }
.mk.mk-wf-list .mk-row .mk-rp { display: none; }
}
@media (min-width: 781px) and (max-width: 1000px) {
.mk.mk-wf-list .mk-head, .mk.mk-wf-list .mk-row { grid-template-columns: 40px 150px minmax(0, 1fr) 40px 34px 168px !important; column-gap: 12px; }
}
.mk .mk-row .mk-name > span.mk-mq { text-overflow: clip; }
.mk .mk-row .mk-name > span .mk-mqi { display: inline-block; }
.mk .mk-row .mk-name > span.mk-mq .mk-mqi { animation: rmq var(--mqt, 6s) ease-in-out infinite; }
@keyframes rmq { 0%, 14% { transform: none; } 46%, 58% { transform: translateX(var(--mq, 0)); } 90%, 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
.mk .mk-row .mk-name > span.mk-mq .mk-mqi { animation: none; }
}

/* ==== licCards ==== */
.mk #bsTrack { display: none !important; }
.mk .mk-row .mk-rp { display: none !important; }
.mk .mk-sf-lic { max-width: 1100px; margin: 32px auto 36px; padding: 0 clamp(16px, 4vw, 40px); display: flex; flex-direction: column; gap: 18px; }
.mk .mk-sf-lic-top { text-align: center; display: grid; justify-items: center; }
.mk .mk-sf-lic-top h2 { margin: 0; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.15; letter-spacing: -0.02em; max-width: 100%; overflow-wrap: anywhere; text-wrap: balance; }
.mk .mk-sf-lic-top { gap: 6px; }
.mk .mk-sf-lic-top h2 { font-size: clamp(17px, 1.8vw, 20px) !important; font-weight: 600; }
.mk .mk-sf-lic-sel { color: var(--muted); font-weight: 500; }
.mk .mk-sf-lic-for { color: var(--ink); font-weight: 700; }
.mk .mk-sf-lic-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; }
.mk .mk-sf-lic-row { display: flex; flex-wrap: nowrap; justify-content: center; gap: 12px; padding: 12px 2px 34px; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x mandatory; }
.mk .mk-sf-lic-card { position: relative; flex: 1 1 0; min-width: 176px; max-width: 214px; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); scroll-snap-align: start; }
.mk .mk-sf-lic-card.mk-pop { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.mk .mk-sf-lic-badge { position: absolute; top: -9px; left: 14px; padding: 4px 9px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-size: 9px; font-weight: 800; letter-spacing: 0.14em; }
.mk .mk-sf-lic-badge.mk-alt { background: var(--ink); color: color-mix(in srgb, var(--bg) 97.5%, var(--ink)); }
.mk .mk-sf-lic-head h3 { margin: 0; font-size: 13.5px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .mk-sf-lic-head p { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); }
.mk .mk-sf-lic-price { height: 30px; display: flex; align-items: center; font-size: 25px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mk .mk-sf-lic-price.mk-small { font-size: 18px; }
.mk .mk-sf-lic-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.mk .mk-sf-lic-chips i { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; padding: 4px 6px; border-radius: 5px; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.mk .mk-sf-lic-rows { display: flex; flex-direction: column; gap: 6px; flex-grow: 1; padding-top: 9px; border-top: 1px solid var(--line); }
.mk .mk-sf-lic-r { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; white-space: nowrap; font-size: 11.5px; padding-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.mk .mk-sf-lic-r span { color: var(--muted); }
.mk .mk-sf-lic-r b { font-weight: 700; }
.mk .mk-sf-lic-act { display: grid; gap: 4px; justify-items: center; }
.mk .mk-sf-lic-act button.mk-lk { font-size: 11.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; min-height: 26px; }
.mk .mk-sf-lic-btn { width: 100%; min-height: 36px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); font-size: 13px; font-weight: 700; }
.mk .mk-sf-lic-btn:hover { border-color: var(--accent); }
.mk .mk-sf-lic-card.mk-pop .mk-sf-lic-btn { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.mk .mk-sf-lic-btn.mk-alt { background: var(--ink); border-color: var(--ink); color: color-mix(in srgb, var(--bg) 97.5%, var(--ink)); }
.mk .mk-sf-lic-deal { position: absolute; top: calc(100% - 1px); left: 16px; right: 16px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 0 0 10px 10px; background: var(--accent); color: var(--accent-ink); font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.mk .mk-sf-lic-strip { align-self: center; display: flex; align-items: center; gap: 16px; padding: 9px 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: 12px; white-space: nowrap; }
.mk .mk-sf-lic-s { display: flex; gap: 5px; }
.mk .mk-sf-lic-s span { color: var(--muted); }
.mk .mk-sf-lic-s + .mk-sf-lic-s { padding-left: 16px; border-left: 1px solid var(--line); }
@media (max-width: 1060px) {
.mk .mk-sf-lic-row { justify-content: flex-start; }
}
@media (max-width: 780px) {
.mk .mk-sf-lic { gap: 14px; margin-top: 24px; }
.mk .mk-sf-lic-row { padding: 16px 16px 34px; margin: -8px -16px -20px; gap: 10px; scrollbar-width: none; }
.mk .mk-sf-lic-row::-webkit-scrollbar { display: none; }
.mk .mk-sf-lic-card { flex: 0 0 min(200px, 62vw); max-width: none; padding: 13px; gap: 9px; }
.mk .mk-sf-lic-strip { align-self: stretch; flex-wrap: wrap; justify-content: center; gap: 4px 12px; border-radius: 12px; padding: 10px 12px; white-space: normal; font-size: 11.5px; }
.mk .mk-sf-lic-strip .mk-sf-lic-eyebrow { flex-basis: 100%; text-align: center; }
.mk .mk-sf-lic-s + .mk-sf-lic-s { padding-left: 0; border-left: 0; }
}

/* ==== viewAllBelow ==== */
.mk .mk-head span.mk-hall .mk-view-all { visibility: hidden; }
.mk .mk-more { display: flex !important; justify-content: center; margin: 18px 0 6px !important; }
.mk .mk-more button { display: inline-flex; align-items: center; gap: 8px; height: 40px !important; padding: 0 20px !important; border-radius: 20px; border: 0 !important; background: var(--btn2, var(--btn2)) !important; color: var(--ink); font-size: 13.5px !important; font-weight: 700; letter-spacing: 0.02em; }
.mk .mk-more button:hover { background: var(--btn2-hover, var(--btn2-hover)) !important; }
.mk .mk-more button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; transition: transform 0.15s; }
.mk .mk-more button:hover svg { transform: translateX(2px); }
.mk .mk-more button small { font-size: 12.5px; font-weight: 600; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
.mk .mk-more button svg { transition: none; }
}

/* ==== bundleA ==== */
.mk .mk-row.mk-xtra { display: none !important; }
.mk .mk-bmk { max-width: 1100px; margin: 8px auto 40px; padding: 0 clamp(16px, 4vw, 40px); }
.mk .mk-bmk-top { text-align: center; display: grid; justify-items: center; gap: 6px; margin-bottom: 16px; }
.mk .mk-bmk-top h2 { margin: 0; font-size: clamp(17px, 1.8vw, 20px); font-weight: 700; letter-spacing: -0.01em; }
@media (max-width: 360px) {
.mk .mk-sl-cta { flex-wrap: nowrap; gap: 6px; }
.mk .mk-sl-play { width: auto !important; padding: 0 14px !important; }
.mk .mk-sl-btn { padding: 0 14px; font-size: 12.5px; height: 40px; }
.mk .mk-bar #rep { display: none; }
}
.mk .mk-bmk-in { container-type: inline-size; background: var(--panel); border-radius: 14px; padding: 16px; }
.mk .mk-bmk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.mk .mk-bmk-head h3 { margin: 0; font-size: 16px; font-weight: 700; min-width: 0; }
.mk .mk-bmk-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.mk .mk-bmk-chips::-webkit-scrollbar { display: none; }
.mk .mk-bmk-chip { flex: none; min-height: 38px; padding: 0 13px; border-radius: 999px; background: var(--btn2, var(--btn2)); font-weight: 600; font-size: 13px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.mk .mk-bmk-chip small { font-size: 11.5px; font-weight: 600; color: #3ecf6e; }
.mk .mk-bmk-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.mk .mk-bmk-chip[aria-pressed="true"] small { color: #1c7a3d; }
.mk .mk-bmk-body { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.mk .mk-bmk-slots { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
.mk .mk-bmk-slot { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; display: grid; place-items: center; overflow: hidden; min-width: 0; background-size: cover; background-position: center; container-type: inline-size; }
.mk .mk-bmk-slot.mk-empty { border: 1.5px dashed #3d3d3d; color: var(--muted); font-weight: 600; font-size: 13px; }
.mk .mk-bmk-slot.mk-empty.mk-free { border-color: #3ecf6e; color: #3ecf6e; background: #0f1a13; }
.mk .mk-bmk-slot.mk-empty .mk-e { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mk .mk-bmk-slot.mk-empty svg { width: 16px; height: 16px; }
.mk .mk-bmk-slot .mk-tg { position: absolute; top: 6px; left: 6px; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; display: inline-flex; align-items: center; background: var(--bg); color: var(--ink); }
.mk .mk-bmk-slot.mk-free .mk-tg { background: #3ecf6e; color: var(--bg); }
.mk .mk-bmk-slot.mk-full.mk-free { outline: 2px solid #3ecf6e; outline-offset: -2px; }
.mk .mk-bmk-slot .mk-nm { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 8px; background: color-mix(in srgb, var(--bg) 92%, transparent); font-size: 11.5px; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 84px) {
.mk .mk-bmk-slot .mk-nm { display: none; }
.mk .mk-bmk-slot .mk-tg { top: 4px; left: 4px; height: 17px; padding: 0 5px; font-size: 9.5px; }
}
.mk .mk-bmk-foot { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mk .mk-bmk-sum { flex: 1; min-width: 0; }
.mk .mk-bmk-sum strong { display: block; font-size: 14.5px; font-weight: 600; }
.mk .mk-bmk-sum span { display: block; font-size: 13px; color: var(--muted); }
.mk .mk-bmk-sum .mk-save { color: #3ecf6e; font-weight: 600; }
.mk .mk-bmk-go { flex: none; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 14px; white-space: nowrap; }
.mk .mk-bmk-go[hidden] { display: none; }
.mk .mk-bmk-go .mk-s { display: none; }
@container (max-width: 399px) {
.mk .mk-bmk-go .mk-l { display: none; }
.mk .mk-bmk-go .mk-s { display: inline; }
}
@container (min-width: 760px) {
.mk .mk-bmk-body { flex-direction: row; align-items: center; gap: 24px; }
.mk .mk-bmk-slots { grid-template-columns: repeat(var(--n), 104px); flex: none; }
.mk .mk-bmk-foot { flex: 1; }
}
@container (max-width: 419px) {
.mk .mk-bmk-chips { width: 100%; }
.mk .mk-bmk-chip { flex: 1 1 0; justify-content: center; padding: 0 8px; }
.mk .mk-bmk-chip small { display: none; }
}

/* ==== wfTags ==== */
.mk .mk-rtags { display: none; min-width: 0; overflow: hidden; }
.mk .mk-rtags .mk-rtg-in { display: inline-flex; gap: 4px; white-space: nowrap; }
.mk .mk-rtags { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 10px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 10px), transparent); }
.mk .mk-rtags .mk-chip { height: 18px; font-size: 10px; padding-inline: 6px; background: color-mix(in srgb, var(--ink) 8%, transparent); flex: none; }
.mk .mk-rtags.mk-mq .mk-rtg-in { animation: rmq var(--mqt, 6s) ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.mk .mk-rtags.mk-mq .mk-rtg-in { animation: none; }
}
@media (min-width: 781px) {
.mk.mk-wf-list .mk-catalog { max-width: 1220px; }
.mk.mk-wf-list .mk-head, .mk.mk-wf-list .mk-row { grid-template-columns: 40px 170px minmax(0, 1fr) 36px 30px 108px 176px !important; column-gap: 12px; }
.mk.mk-wf-list .mk-row > .mk-rtags, .mk.mk-wf-list .mk-head > .mk-htg { display: block; grid-column: 6; grid-row: 1; }
.mk.mk-wf-list .mk-row > .mk-buyset, .mk.mk-wf-list .mk-head > span.mk-hall { grid-column: 7 !important; }
.mk.mk-wf-list .mk-row .mk-name .mk-chips { display: none; }
.mk.mk-wf-list .mk-row .mk-name > span { line-height: 1.3; }
.mk.mk-wf-list .mk-head > .mk-htg { text-align: left; }
}
@media (min-width: 781px) and (max-width: 1000px) {
.mk.mk-wf-list .mk-head, .mk.mk-wf-list .mk-row { grid-template-columns: 40px 140px minmax(0, 1fr) 34px 28px 92px 168px !important; column-gap: 10px; }
}

/* ==== listCtl ==== */
.mk .mk-lbar { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; margin-bottom: 4px; background: var(--bg); }
.mk .mk-lbox { flex: 1 1 100%; min-width: 0; display: flex; align-items: center; height: 44px; padding: 0 5px 0 14px; border-radius: 22px; background: var(--btn2, var(--btn2)); }
.mk .mk-lbox:focus-within { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 35%, transparent); }
.mk .mk-ls { flex: 0 0 calc(50% - 4px); min-width: 0; display: flex; align-items: center; gap: 8px; height: 100%; padding-right: 10px; color: var(--muted); }
.mk .mk-ls svg { width: 16px; height: 16px; flex: none; }
.mk .mk-ls input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; color: var(--ink); font: inherit; font-size: 13.5px; }
.mk .mk-ls input::-webkit-search-cancel-button { filter: invert(1) opacity(0.5); }
.mk .mk-lpills { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; padding-left: 8px; border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); overflow-x: auto; scrollbar-width: none; }
.mk .mk-lpills::-webkit-scrollbar { display: none; }
.mk .mk-lpill, .mk .mk-lgrp button { flex: none; height: 34px; padding: 0 6px 0 10px; border-radius: 17px; color: var(--ink); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mk .mk-lpill:hover, .mk .mk-lpill[aria-expanded="true"], .mk .mk-lgrp button:hover, .mk .mk-lgrp button[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.mk .mk-lpill svg, .mk .mk-lgrp svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.mk .mk-lpill.mk-on { background: color-mix(in srgb, var(--ink) 8%, transparent); box-shadow: inset 0 0 0 1px var(--accent); }
.mk .mk-lpill.mk-on b { color: var(--accent); font-weight: 700; }
.mk .mk-lclear { flex: none; height: 34px; padding: 0 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.mk .mk-lclear:hover { color: var(--ink); }
.mk .mk-lclear[hidden] { display: none; }
.mk .mk-ldv, .mk .mk-lgrp .mk-dv { flex: none; width: 1px; align-self: stretch; margin: 10px 4px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.mk .mk-lgrp { flex: none; display: flex; align-items: center; }
.mk .mk-lgrp .mk-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.mk .mk-lgrp .mk-n[hidden] { display: none; }
.mk .mk-lgrp .mk-sv { color: var(--muted); font-weight: 600; }
.mk .mk-lbar:not(.mk-compact) .mk-lgrp .mk-slb { display: none; }
.mk .mk-lbar:not(.mk-compact) .mk-lgrp .mk-sv { color: var(--ink); }
.mk .mk-lbar.mk-compact .mk-lgrp .mk-sv::before { content: ": "; }
.mk .mk-lbar:not(.mk-compact) .mk-lgrp [data-f="filters"], .mk .mk-lbar:not(.mk-compact) .mk-lgrp .mk-dv { display: none; }
.mk .mk-lbar.mk-compact .mk-lpills, .mk .mk-lbar.mk-compact .mk-ldv { display: none; }
.mk .mk-lbar.mk-compact .mk-ls { flex: 1 1 auto; border-right: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); margin-right: 4px; }
.mk .mk-lact { flex: 1 1 100%; display: none; align-items: center; gap: 6px; flex-wrap: wrap; }
.mk .mk-lbar.mk-compact .mk-lact:not([hidden]) { display: flex; }
.mk .mk-lchip { height: 28px; padding: 0 6px 0 11px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 8%, transparent); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.mk .mk-lchip span { color: var(--muted); font-weight: 500; }
.mk .mk-lchip i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.mk .mk-lchip:hover i { color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent); }
.mk .mk-lchip svg { width: 11px; height: 11px; }
.mk .mk-lact .mk-lclear { height: 28px; padding: 0 6px; font-size: 12px; }
.mk .mk-row.mk-fhide { display: none !important; }
.mk .mk-lpop { position: fixed; z-index: 70; width: 250px; max-width: calc(100vw - 24px); background: color-mix(in srgb, var(--panel) 98%, var(--ink)); border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: 0 18px 40px rgba(0,0,0,0.6); }
.mk .mk-lpop[hidden] { display: none; }
.mk .mk-lpop h4 { margin: 4px 8px 6px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.mk .mk-lpop .mk-opts { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
.mk .mk-lpop .mk-opt { flex: none; display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 8px; border-radius: 8px; font-size: 13.5px; font-weight: 600; text-align: left; color: var(--ink); }
.mk .mk-lpop .mk-opt:hover, .mk .mk-lpop .mk-opt:focus-visible { background: var(--btn2); outline: none; }
.mk .mk-lpop .mk-opt .mk-ck { flex: none; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 35%, transparent); display: grid; place-items: center; }
.mk .mk-lpop .mk-opt .mk-ck svg { width: 12px; height: 12px; opacity: 0; }
.mk .mk-lpop .mk-opt .mk-ol { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk .mk-lpop .mk-opt .mk-on { flex: none; font-size: 12px; font-weight: 500; color: var(--muted); }
.mk .mk-lpop .mk-opt[data-zero]:not([aria-pressed="true"]) { color: color-mix(in srgb, var(--ink) 45%, var(--bg)); }
.mk .mk-lpop .mk-opt[aria-pressed="true"] .mk-ck { background: var(--accent); box-shadow: none; }
.mk .mk-lpop .mk-opt[aria-pressed="true"] .mk-ck svg { opacity: 1; }
.mk .mk-lpop.mk-one .mk-opt .mk-ck { box-shadow: none; background: none !important; }
.mk .mk-lpop.mk-one .mk-opt .mk-ck svg { stroke: var(--accent); }
.mk .mk-lpop .mk-pf { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 6px 2px; margin-top: 4px; border-top: 1px solid var(--line); }
.mk .mk-lpop .mk-pf button { height: 32px; padding: 0 10px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.mk .mk-lpop .mk-pf .mk-done { color: var(--ink); background: var(--btn2, var(--btn2)); border-radius: 16px; padding: 0 14px; }
.mk .mk-lpop.mk-wide { width: 440px; padding: 0; }
.mk .mk-lpop.mk-wide .mk-pf { padding: 8px 10px; margin-top: 0; }
.mk .mk-lpop.mk-wide .mk-pf .mk-done { color: #fff; background: var(--accent); border-radius: 17px; padding: 0 16px; height: 34px; }
.mk .mk-lpop .mk-fw { display: grid; grid-template-columns: 136px minmax(0, 1fr); }
.mk .mk-lpop .mk-fcats { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-right: 1px solid var(--line); }
.mk .mk-lpop .mk-fcat { height: 40px; padding: 0 10px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); text-align: left; }
.mk .mk-lpop .mk-fcat:hover, .mk .mk-lpop .mk-fcat[aria-selected="true"] { background: var(--btn2); color: var(--ink); }
.mk .mk-lpop .mk-fcat b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: 11px; display: inline-grid; place-items: center; }
.mk .mk-lpop .mk-fopts { padding: 8px; min-width: 0; }
.mk .mk-lnone { padding: 22px 10px; text-align: center; color: var(--muted); font-size: 13.5px; }
@media (max-width: 780px) {
.mk .mk-lbar { padding: 8px 0; }
.mk .mk-lbox { display: contents; }
.mk .mk-ls, .mk .mk-lbar.mk-compact .mk-ls { flex: 1 1 100%; height: 42px; padding: 0 12px; margin: 0; border: 0; border-radius: 21px; background: var(--btn2, var(--btn2)); }
.mk .mk-ls:focus-within { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 35%, transparent); }
.mk .mk-lgrp { flex: 1 1 100%; height: 40px; border-radius: 20px; background: var(--btn2, var(--btn2)); }
.mk .mk-lgrp button { flex: 1; height: 40px; justify-content: center; border-radius: 0; }
.mk .mk-lgrp button:first-child { border-radius: 20px 0 0 20px; }
.mk .mk-lgrp button:last-child { border-radius: 0 20px 20px 0; }
.mk .mk-lgrp .mk-sv { display: none; }
.mk .mk-lpop .mk-fw { grid-template-columns: 112px minmax(0, 1fr); }
}
.mk .mk-sf-toast { position: fixed; left: 50%; bottom: calc(var(--barH, 84px) + 14px); transform: translate(-50%, 8px); z-index: 80; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 999px; background: var(--ink); color: color-mix(in srgb, var(--bg) 97.5%, var(--ink)); font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .mk-sf-toast.mk-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
.mk .mk-sf-toast { transition: none; }
}

/* ==== oneList ==== */
@media (min-width: 781px) {
.mk:not(.mk-wf-list) .mk-catalog { max-width: 1220px; }
.mk:not(.mk-wf-list) .mk-head, .mk:not(.mk-wf-list) .mk-row { grid-template-columns: 40px calc(50% - 187px) 72px 72px 150px minmax(0, 1fr) 176px !important; column-gap: 0; }
.mk:not(.mk-wf-list) .mk-row > .mk-name, .mk:not(.mk-wf-list) .mk-head > span:nth-child(2) { padding-left: 14px; padding-right: 12px; }
.mk:not(.mk-wf-list) .mk-row > .mk-buyset, .mk:not(.mk-wf-list) .mk-head > span.mk-hall { grid-column: 7 !important; }
.mk:not(.mk-wf-list) .mk-head > *, .mk:not(.mk-wf-list) .mk-row > * { grid-row: 1; }
.mk:not(.mk-wf-list) .mk-row > .mk-thumb, .mk:not(.mk-wf-list) .mk-head > span:nth-child(1) { grid-column: 1; }
.mk:not(.mk-wf-list) .mk-row > .mk-name, .mk:not(.mk-wf-list) .mk-head > span:nth-child(2) { grid-column: 2; }
.mk:not(.mk-wf-list) .mk-row > .mk-ht, .mk:not(.mk-wf-list) .mk-head > .mk-ht { grid-column: 3; text-align: left; }
.mk:not(.mk-wf-list) .mk-row > .mk-hb, .mk:not(.mk-wf-list) .mk-head > .mk-hb { grid-column: 4; text-align: left; }
.mk:not(.mk-wf-list) .mk-row > .mk-hk, .mk:not(.mk-wf-list) .mk-head > .mk-hk, .mk:not(.mk-wf-list) .mk-head > span:nth-child(6) { display: none !important; }
.mk:not(.mk-wf-list) .mk-row > .mk-rtags, .mk:not(.mk-wf-list) .mk-head > .mk-htg { display: block; grid-column: 5; text-align: left; }
.mk:not(.mk-wf-list) .mk-row > .mk-rtags { -webkit-mask-image: none; mask-image: none; }
.mk:not(.mk-wf-list) .mk-row > .mk-rtags.mk-mq { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 10px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 10px), transparent); }
.mk:not(.mk-wf-list) .mk-row .mk-thumb { width: 40px; height: 40px; }
.mk:not(.mk-wf-list) .mk-row .mk-name { font-size: 12px; }
.mk:not(.mk-wf-list) .mk-row .mk-name .mk-chips { display: none; }
.mk:not(.mk-wf-list) .mk-row .mk-name > span { line-height: 1.3; }
.mk:not(.mk-wf-list) .mk-row .mk-num { font-size: 11px; }
.mk:not(.mk-wf-list) .mk-head { font-size: 10px; }
.mk:not(.mk-wf-list) .mk-row .mk-num.mk-hb { color: var(--ink); font-weight: 600; }
.mk:not(.mk-wf-list) .mk-row .mk-num.mk-ht { color: var(--muted); }
.mk:not(.mk-wf-list) .mk-row::after { left: 54px; }
}
@media (min-width: 781px) and (max-width: 1000px) {
.mk:not(.mk-wf-list) .mk-head, .mk:not(.mk-wf-list) .mk-row { grid-template-columns: 40px calc(50% - 169px) 64px 64px 130px minmax(0, 1fr) 168px !important; }
}
.mk .mk-row .mk-thumb .mk-cv { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.55); color: #fff; opacity: 0; transition: opacity 0.12s; }
.mk .mk-row .mk-thumb .mk-cv svg { width: 16px; height: 16px; fill: currentColor; }
.mk .mk-row .mk-thumb .mk-cv .mk-pz { display: none; }
.mk .mk-row:hover .mk-thumb .mk-cv, .mk .mk-row:focus-visible .mk-thumb .mk-cv { opacity: 1; }
.mk .mk-row .mk-thumb .mk-eqb { position: absolute; inset: 0; display: none; align-items: flex-end; justify-content: center; gap: 2px; padding-bottom: 12px; background: rgba(0,0,0,0.5); }
.mk .mk-row .mk-thumb .mk-eqb i { width: 3px; height: 14px; border-radius: 1px; background: var(--accent); transform-origin: bottom; animation: eqb 0.9s ease-in-out infinite; }
.mk .mk-row .mk-thumb .mk-eqb i:nth-child(2) { animation-delay: -0.3s; animation-duration: 0.75s; }
.mk .mk-row .mk-thumb .mk-eqb i:nth-child(3) { animation-delay: -0.55s; animation-duration: 1.05s; }
@keyframes eqb { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
.mk .mk-row .mk-thumb .mk-eqb i { animation: none; transform: scaleY(0.7); }
}
.mk.mk-is-playing .mk-row.mk-active .mk-thumb .mk-eqb { display: flex; }
.mk.mk-is-playing .mk-row.mk-active:hover .mk-thumb .mk-eqb { display: none; }
.mk.mk-is-playing .mk-row.mk-active .mk-thumb .mk-cv .mk-py { display: none; }
.mk.mk-is-playing .mk-row.mk-active .mk-thumb .mk-cv .mk-pz { display: block; }
.mk .mk-head > .mk-htg { visibility: visible !important; }
.mk .mk-row .mk-name > span { width: fit-content; max-width: 100%; cursor: pointer; }
.mk .mk-row .mk-name > span:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ==== heroFade ==== */
.mk .mk-sl { border-bottom: 0 !important; }
.mk .mk-sl::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 3; pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg)); }
.mk .mk-sl .mk-sl-dots { z-index: 4; }

/* ==== upgOffer ==== */
.mk .mk-cd-upg { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.mk .mk-cd-upg[hidden], .mk .mk-cd-upsave[hidden] { display: none; }
.mk .mk-cd-upg b { font-size: 13px; font-weight: 700; min-width: 0; }
.mk .mk-cd-upg span { grid-column: 1; font-size: 12px; color: var(--muted); }
.mk .mk-cd-upg span em { font-style: normal; color: #3ecf6e; font-weight: 600; }
.mk .mk-cd-upg button { grid-column: 2; grid-row: 1 / span 2; height: 32px; padding: 0 14px; border-radius: 16px; background: var(--ink); color: color-mix(in srgb, var(--bg) 97.5%, var(--ink)); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.mk .mk-cd-upg button:hover { background: #fff; }
.mk .mk-cd-up { font-style: normal; color: #3ecf6e; font-weight: 600; }
.mk .mk-cd-upsave { color: var(--muted); }
.mk .mk-cd-upsave span { color: var(--ink); }

/* ==== cartPay ==== */
.mk .mk-cd { max-height: calc(100dvh - 112px); overflow-y: auto; overscroll-behavior: contain; }
.mk .mk-cd-promo { display: grid; gap: 8px; }
.mk .mk-cd-promo-toggle { justify-self: start; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 2px 0; }
.mk .mk-cd-promo-toggle:hover { color: var(--ink); }
.mk .mk-cd-promo-toggle[hidden], .mk .mk-cd-promo-row[hidden], .mk .mk-cd-promo-on[hidden], .mk .mk-cd-msg:empty { display: none; }
.mk .mk-cd-promo-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.mk .mk-cd-promo input { height: 40px; min-width: 0; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink); font: inherit; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; }
.mk .mk-cd-promo input::placeholder { text-transform: none; letter-spacing: 0; color: var(--muted); }
.mk .mk-cd-promo-apply { height: 40px; padding: 0 16px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 8%, transparent); font-size: 13px; font-weight: 700; }
.mk .mk-cd-promo-apply:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.mk .mk-cd-promo-apply:disabled { opacity: 0.4; cursor: default; }
.mk .mk-cd-promo-on { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 6%, transparent); font-size: 13px; }
.mk .mk-cd-promo-on span { min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.mk .mk-cd-promo-on b { letter-spacing: 0.04em; text-transform: uppercase; }
.mk .mk-cd-promo-on em { font-style: normal; color: var(--muted); font-size: 12px; }
.mk .mk-cd-promo-rm { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; font-size: 12.5px; white-space: nowrap; }
.mk .mk-cd-promo-rm:hover { color: var(--ink); }
.mk .mk-cd-msg { margin: 0; font-size: 12.5px; color: var(--muted); }
.mk .mk-cd-msg.mk-err { color: color-mix(in srgb, var(--accent) 65%, var(--ink)); }
.mk .mk-cd-sub[hidden] { display: none; }
.mk .mk-cd-total { font-weight: 800; font-size: 15px; }
.mk .mk-cd-pp { display: grid; gap: 10px; }
.mk .mk-cd-pp[hidden] { display: none; }
.mk .mk-cd-or { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.mk .mk-cd-or::before, .mk .mk-cd-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.mk .mk-cd-pp-slot, .mk .mk-cd-pp-slot iframe { color-scheme: light; }
.mk .mk-cd-pp-slot { min-height: 45px; }
.mk .mk-cd-pp-slot[hidden] { display: none; }
.mk .mk-cd-pp-demo { width: 100%; height: 45px; border-radius: 23px; background: #ffc439; color: color-mix(in srgb, var(--bg) 97.5%, var(--ink)); font-weight: 800; font-size: 15px; }
.mk .mk-cd-status { margin: 0; text-align: center; font-size: 12px; color: var(--muted); }
@media (max-width: 780px) {
.mk .mk-cd { max-height: calc(100dvh - 72px); }
}

/* ==== licList ==== */
.mk .mk-lr-list { display: none; }
.mk.mk-lic-listview .mk-lr-list { display: grid; gap: 8px; }
.mk.mk-lic-listview #licOffer, .mk.mk-lic-listview .mk-lx-hero, .mk.mk-lic-listview .mk-lx-track, .mk.mk-lic-listview .mk-lx-mfiles, .mk.mk-lic-listview .mk-lx-body, .mk.mk-lic-listview .mk-lx-terms-link, .mk.mk-lic-listview #licAdd { display: none !important; }
.mk .mk-lr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--ink) 3%, transparent); }
.mk .mk-lr.mk-sel { border-color: color-mix(in srgb, var(--ink) 32%, transparent); }
.mk .mk-lr-main { display: grid; gap: 2px; min-width: 0; text-align: left; padding: 2px 0; }
.mk .mk-lr-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mk .mk-lr-name b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .mk-lr-name::after { content: ""; flex: none; width: 7px; height: 7px; margin: -3px 0 0 2px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg); transition: transform 0.15s; }
.mk .mk-lr.mk-open .mk-lr-name::after { transform: rotate(-135deg); margin-top: 3px; }
.mk .mk-lr-name em { flex: none; order: 2; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--accent); color: #fff; padding: 2px 7px; border-radius: 999px; }
.mk .mk-lr-name::after { order: 3; }
.mk .mk-lr-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .mk-lr-price { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mk .mk-lr-add { height: 38px; padding: 0 16px; border-radius: 19px; background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.mk .mk-lr-add, .mk .mk-lr-offer { width: 112px; justify-content: center; }
.mk .mk-lr-offer { height: 38px; padding: 0 16px; border-radius: 19px; background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; }
.mk .mk-lr-offer:hover { background: color-mix(in srgb, var(--accent) 82%, black); }
.mk .mk-lr-add svg { width: 17px; height: 17px; }
.mk .mk-lr-add:hover { background: color-mix(in srgb, var(--accent) 82%, black); }
.mk .mk-lr-det { grid-column: 1 / -1; display: none; gap: 12px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.mk .mk-lr.mk-open .mk-lr-det { display: grid; }
.mk .mk-lr-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; margin: 0; }
.mk .mk-lr-facts div { display: grid; gap: 2px; min-width: 0; align-content: start; }
.mk .mk-lr-facts dt { font-size: 12px; color: var(--muted); }
.mk .mk-lr-facts dd { margin: 0; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk .mk-lr-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.mk .mk-lr-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: baseline; gap: 0 16px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.mk .mk-lr-foot span { grid-column: 2 / -1; text-align: left; }
.mk .mk-lr-foot .mk-lic-link { justify-self: start; }
.mk .mk-lr-foot b { color: var(--ink); font-weight: 700; margin-left: 4px; }
.mk .mk-lr-foot .mk-lic-link { font-size: 13px; color: var(--ink); }
@media (max-width: 780px) {
.mk .mk-lr { padding: 8px 10px; gap: 0 8px; }
.mk .mk-lr-name b { font-size: 14px; }
.mk .mk-lr-sub { font-size: 12px; }
.mk .mk-lr-price { font-size: 15px; }
.mk .mk-lr-add, .mk .mk-lr-offer { height: 36px; padding: 0 10px; width: 96px; }
.mk .mk-lr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 360px) {
.mk .mk-lr-name { gap: 5px; }
.mk .mk-lr-name em { font-size: 9px; padding: 1px 5px; letter-spacing: 0.03em; }
.mk .mk-lr-name::after { margin-left: 0; }
}
.mk .mk-lr-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mk .mk-lr-foot span { text-align: left; }
}

/* ==== savedHeart ==== */
.mk .mk-lgrp .mk-dv2 { flex: none; width: 1px; align-self: stretch; margin: 10px 4px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.mk .mk-lgrp .mk-lheart { color: var(--muted); padding: 0 12px 0 10px; }
.mk .mk-lgrp .mk-lheart svg { width: 16px; height: 16px; color: inherit; }
.mk .mk-lgrp .mk-lheart:hover { color: var(--ink); }
.mk .mk-lgrp .mk-lheart[aria-pressed="true"] { color: var(--accent); }
.mk .mk-lgrp .mk-lheart[aria-pressed="true"] svg { fill: currentColor; }
.mk .mk-lgrp .mk-lheart .mk-n { min-width: 18px; }
.mk .mk-row .mk-price { min-width: 108px !important; justify-content: center; }
.mk .mk-row .mk-price.mk-incart { gap: 6px; }
@media (max-width: 780px) {
.mk .mk-lgrp .mk-dv2 { display: none; }
.mk .mk-lgrp .mk-lheart { flex: 0 0 52px; padding: 0 10px; }
.mk .mk-row .mk-price { min-width: 100px !important; }
}
.mk .mk-lact .mk-lemail { margin-left: auto; height: 30px; padding: 0 14px; border-radius: 15px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.mk .mk-lact .mk-lemail:hover { background: color-mix(in srgb, var(--accent) 82%, black); }

/* ==== flatBar ==== */
.mk .mk-lt-bar i { background: var(--accent); }
.mk .mk-lic-foot, .mk .mk-lic-pick .mk-lic-foot, .mk .mk-lx-wrap .mk-lic-foot { background: color-mix(in srgb, var(--bg) 95%, var(--ink)); }
.mk .mk-lic-card { background: color-mix(in srgb, var(--bg) 95%, var(--ink)); }
.mk .mk-lx-rail i, .mk .mk-lx-m u, .mk .mk-lx-m.mk-inf u { background: var(--accent); }
.mk .mk-lic-ghost { background-image: none; background-color: var(--panel); }

/* ==== trackUniform ==== */
.mk #licTrack.mk-lic-track, .mk #cdTrack.mk-lic-track { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; }
.mk #licTrack.mk-lic-track > b, .mk #cdTrack.mk-lic-track > b { grid-column: 1; grid-row: 1; white-space: normal; text-align: left; }
.mk #licTrack.mk-lic-track .mk-lt-save { display: block; position: static; grid-column: 2; grid-row: 1; align-self: center; white-space: nowrap; }
.mk #licTrack.mk-lic-track .mk-lt-save:empty { display: none; }
.mk #cdTrack.mk-lic-track .mk-lt-save { display: none; }
.mk #licTrack.mk-lic-track .mk-lt-pips, .mk #cdTrack.mk-lic-track .mk-lt-pips { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-self: stretch; margin: 0; }

/* ==== shareBits ==== */
.mk .mk-shr-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mk .mk-sf-lic-top h2 { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mk .mk-shr-inline { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--muted); background: var(--btn2, var(--btn2)); }
.mk .mk-shr-inline:hover { color: var(--ink); background: var(--btn2-hover, var(--btn2-hover)); }
.mk .mk-shr-inline svg { width: 15px; height: 15px; }
.mk .mk-shr { position: fixed; z-index: 75; width: 300px; max-width: calc(100vw - 24px); background: color-mix(in srgb, var(--panel) 98%, var(--ink)); border: 1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: 0 18px 40px rgba(0,0,0,0.6); display: grid; gap: 10px; }
.mk .mk-shr[hidden] { display: none; }
.mk .mk-shr-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mk .mk-shr-h img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; }
.mk .mk-shr-h div { min-width: 0; }
.mk .mk-shr-h b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .mk-shr-h small { display: block; font-size: 12px; color: var(--muted); }
.mk .mk-shr-link { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 4px 0 12px; border-radius: 20px; background: var(--btn2); min-width: 0; }
.mk .mk-shr-link span { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .mk-shr-link button { flex: none; height: 32px; padding: 0 14px; border-radius: 16px; background: var(--accent); color: var(--accent-ink); font-size: 12.5px; font-weight: 700; }
.mk .mk-shr-at { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); cursor: pointer; width: max-content; }
.mk .mk-shr-at i { width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 35%, transparent); display: grid; place-items: center; }
.mk .mk-shr-at i svg { width: 12px; height: 12px; opacity: 0; }
.mk .mk-shr-at[aria-checked="true"] i { background: var(--accent); box-shadow: none; }
.mk .mk-shr-at[aria-checked="true"] i svg { opacity: 1; }
@media (max-width: 780px) {
.mk .mk-bar #barShare { display: none; }
}

/* ==== ownerRefine ==== */
@media (min-width: 781px) {
.mk .mk-bar { overflow: visible !important; }
.mk .mk-bar-in { width: min(100% - 40px, var(--mk-list-w, 1140px)) !important; margin: 0 auto !important; padding: 12px 0 !important; grid-template-areas: "now ctrls right" !important; grid-template-rows: auto !important; row-gap: 0 !important; }
.mk .mk-bar .mk-mid { position: absolute !important; left: 0; right: 0; bottom: 100%; width: auto; height: 44px !important; margin: 0 !important; padding: 0 max(20px, calc((100% - var(--mk-list-w, 1140px)) / 2)); grid-template-columns: minmax(0, 1fr) !important; border-radius: 0; overflow: visible !important; background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.25s, transform 0.25s !important; }
.mk .mk-bar.mk-wave-on .mk-mid { opacity: 1; transform: none; pointer-events: auto; margin: 0 !important; height: 44px !important; }
.mk .mk-bar .mk-mid .mk-t { display: none !important; }
.mk .mk-bar .mk-mid .mk-tip { position: absolute; top: 5px; left: var(--h, 0px); transform: translateX(-50%); padding: 2px 7px; border-radius: 6px; background: #000; color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; line-height: 16px; pointer-events: none; opacity: 0; transition: opacity 0.12s; z-index: 3; }
.mk .mk-bar .mk-mid .mk-tip.mk-on { opacity: 1; }
.mk .mk-bar.mk-wave-on .mk-prog { opacity: 0 !important; }
.mk .mk-bar { border-top: 0 !important; }
.mk .mk-bar .mk-prog { background: transparent !important; }
.mk .mk-bar .mk-prog .mk-knob { position: absolute; top: 50%; left: var(--p, 0%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg) 45%, transparent); transform: scale(0); transition: transform 0.12s; pointer-events: none; }
.mk .mk-bar .mk-prog:hover .mk-knob, .mk .mk-bar .mk-prog:focus-visible .mk-knob, .mk .mk-bar .mk-prog.mk-drag .mk-knob { transform: scale(1); }
.mk .mk-bar .mk-prog.mk-drag { height: 5px; }
.mk .mk-bar .mk-mid .mk-wf { position: relative; }
.mk .mk-bar .mk-mid .mk-wf::after { content: ""; position: absolute; left: var(--p, 0%); top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg) 45%, transparent); pointer-events: none; }
.mk { padding-bottom: 84px !important; }
.mk .mk-bar .mk-vol { display: flex !important; align-items: center; gap: 4px; }
.mk .mk-bar .mk-vol input { display: none !important; }
}
@media (min-width: 1001px) {
.mk .mk-bar .mk-vol input { display: block !important; width: 96px; }
}
.mk .mk-row.mk-active { border-bottom-color: var(--line) !important; }
.mk .mk-row.mk-active::after, .mk .mk-row:last-child::after { display: block !important; }
.mk .mk-row:last-child::after { display: none !important; }
@media (min-width: 781px) {
.mk:not(.mk-wf-list) .mk-head, .mk:not(.mk-wf-list) .mk-row { grid-template-columns: 40px calc(50% - 156px) 80px 72px 135px minmax(0, 1fr) 176px !important; }
.mk:not(.mk-wf-list) .mk-row > .mk-ht, .mk:not(.mk-wf-list) .mk-head > .mk-ht, .mk:not(.mk-wf-list) .mk-row > .mk-hb, .mk:not(.mk-wf-list) .mk-head > .mk-hb { text-align: center !important; }
.mk:not(.mk-wf-list) .mk-row > .mk-rtags, .mk:not(.mk-wf-list) .mk-head > .mk-htg { padding-left: 25px; grid-column: 5 / 7 !important; }
}
@media (min-width: 781px) and (max-width: 1000px) {
.mk:not(.mk-wf-list) .mk-head, .mk:not(.mk-wf-list) .mk-row { grid-template-columns: 40px calc(50% - 144px) 72px 64px 117px minmax(0, 1fr) 168px !important; }
.mk:not(.mk-wf-list) .mk-row > .mk-rtags, .mk:not(.mk-wf-list) .mk-head > .mk-htg { padding-left: 21px; }
}
.mk .mk-row:focus { outline: 0; }
.mk .mk-row:focus-visible { outline: 2px solid color-mix(in srgb, var(--ink) 45%, transparent); outline-offset: -2px; }

/* ==== listSize ==== */
@media (min-width: 781px) {
.mk.mk-list-comfy .mk-row { min-height: 60px !important; }
.mk.mk-list-comfy .mk-row .mk-thumb { width: 44px !important; height: 44px !important; }
.mk.mk-list-comfy .mk-row .mk-name { font-size: 14px !important; }
.mk.mk-list-comfy .mk-row .mk-name > span { font-weight: 700; }
.mk.mk-list-comfy .mk-row .mk-num { font-size: 12.5px !important; }
.mk.mk-list-comfy .mk-head { font-size: 11px !important; }
.mk.mk-list-comfy .mk-row .mk-rtags .mk-chip, .mk.mk-list-comfy .mk-row .mk-chips .mk-chip { height: 21px !important; font-size: 11px !important; padding-inline: 8px !important; }
.mk.mk-list-comfy .mk-row .mk-price { height: 36px !important; font-size: 13px !important; }
.mk.mk-list-comfy .mk-row .mk-acts button svg { width: 18px !important; height: 18px !important; }
.mk.mk-list-comfy:not(.mk-wf-list) .mk-head, .mk.mk-list-comfy:not(.mk-wf-list) .mk-row { grid-template-columns: 44px calc(50% - 160px) 80px 72px 135px minmax(0, 1fr) 188px !important; }
.mk.mk-list-comfy.mk-wf-list .mk-head, .mk.mk-list-comfy.mk-wf-list .mk-row { grid-template-columns: 44px 190px minmax(0, 1fr) 40px 34px 112px 188px !important; }
.mk.mk-list-comfy .mk-lbox { height: 48px; }
.mk.mk-list-comfy .mk-lpill, .mk.mk-list-comfy .mk-lgrp button { height: 38px; font-size: 14px; }
.mk.mk-list-comfy .mk-ls input { font-size: 14.5px; }
}
@media (min-width: 781px) {
.mk.mk-list-comfy .mk-bar .mk-now img { width: 46px !important; height: 46px !important; }
.mk.mk-list-comfy .mk-bar .mk-ctrls .mk-main { width: 46px !important; height: 46px !important; }
.mk.mk-list-comfy .mk-bar .mk-ctrls .mk-skip, .mk.mk-list-comfy .mk-bar .mk-ctrls .mk-mode { width: 36px !important; height: 36px !important; }
.mk.mk-list-comfy #barTitle { font-size: 16px !important; }
.mk.mk-list-comfy #barMeta { font-size: 13px !important; }
.mk.mk-list-comfy .mk-bar .mk-buy { height: 36px !important; font-size: 13px !important; padding-inline: 14px !important; min-width: 108px !important; justify-content: center; }
.mk.mk-list-comfy .mk-bar .mk-ic { width: 40px !important; height: 40px !important; }
}
@media (min-width: 781px) and (max-width: 1000px) {
.mk.mk-list-comfy:not(.mk-wf-list) .mk-head, .mk.mk-list-comfy:not(.mk-wf-list) .mk-row { grid-template-columns: 44px calc(50% - 148px) 72px 64px 117px minmax(0, 1fr) 180px !important; }
.mk.mk-list-comfy.mk-wf-list .mk-head, .mk.mk-list-comfy.mk-wf-list .mk-row { grid-template-columns: 44px 150px minmax(0, 1fr) 38px 32px 100px 180px !important; }
}

/* ==== polish ==== */
.mk .mk-row .mk-chip, .mk .mk-row .mk-rtags .mk-chip { background: color-mix(in srgb, var(--ink) 13%, transparent) !important; color: color-mix(in srgb, var(--ink) 78%, var(--bg)) !important; }
.mk .mk-row::after { background: color-mix(in srgb, var(--ink) 7.5%, transparent) !important; }
.mk .mk-row { border-bottom-color: color-mix(in srgb, var(--ink) 7.5%, transparent) !important; }
.mk .mk-head { border-bottom-color: color-mix(in srgb, var(--ink) 7.5%, transparent) !important; }
.mk .mk-row .mk-num.mk-ht { color: color-mix(in srgb, var(--ink) 72%, var(--bg)); }
.mk .mk-row .mk-acts button { color: color-mix(in srgb, var(--ink) 70%, var(--bg)); }
.mk .mk-row .mk-acts button:hover { color: var(--ink); }
.mk .mk-row:hover { background: color-mix(in srgb, var(--ink) 3.5%, transparent) !important; }
.mk .mk-row.mk-active:hover { background: color-mix(in srgb, var(--bg) 96%, var(--ink)) !important; }

/* ==== bundleTracks ==== */
.mk .mk-btk { max-width: 1100px; margin: 8px auto 40px; padding: 0 clamp(16px, 4vw, 40px); }
.mk .mk-btk-card { background: var(--panel); border-radius: 14px; overflow: hidden; }
.mk .mk-btk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding-inline: 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid color-mix(in srgb, var(--ink) 7.5%, transparent); }
.mk .mk-btk-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 7.5%, transparent); }
.mk .mk-btk-chip { min-height: 32px; padding: 0 13px; border-radius: 999px; background: var(--btn2, var(--btn2)); font-weight: 600; font-size: 13px; color: var(--ink); }
.mk .mk-btk-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.mk .mk-btk-rows { max-height: calc(var(--btk-rows, 7) * 60px); overflow-y: auto; scrollbar-width: thin; }
.mk .mk-btk-row { position: relative; display: grid; grid-template-columns: 24px 44px minmax(0, 1fr) auto 36px; align-items: center; gap: 12px; min-height: 60px; padding-inline: 16px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 7.5%, transparent); cursor: pointer; text-align: left; width: 100%; color: var(--ink); }
.mk .mk-btk-row:last-child { border-bottom: 0; }
.mk .mk-btk-row:hover { background: color-mix(in srgb, var(--ink) 3.5%, transparent); }
.mk .mk-btk-row[hidden] { display: none; }
.mk .mk-btk-n { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; }
.mk .mk-btk-th { position: relative; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--btn2, var(--btn2)); }
.mk .mk-btk-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk .mk-btk-th .mk-pp { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.55); opacity: 0; color: #fff; transition: opacity .12s; }
.mk .mk-btk-th .mk-pp svg { width: 18px; height: 18px; fill: currentColor; }
.mk .mk-btk-th .mk-pp .mk-pz { display: none; }
.mk .mk-btk-row:hover .mk-pp, .mk .mk-btk-row:focus-visible .mk-pp, .mk .mk-btk-row.mk-on .mk-pp { opacity: 1; }
.mk .mk-btk-row.mk-on.mk-playing .mk-pp .mk-py { display: none; }
.mk .mk-btk-row.mk-on.mk-playing .mk-pp .mk-pz { display: block; }
.mk .mk-btk-name { min-width: 0; }
.mk .mk-btk-name b { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .mk-btk-name small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .mk-btk-row.mk-on .mk-btk-name b { color: var(--accent); }
.mk .mk-btk-row.mk-on .mk-btk-n { color: var(--accent); }
.mk .mk-btk-t { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mk .mk-btk-sv { width: 36px; height: 40px; display: grid; place-items: center; color: color-mix(in srgb, var(--ink) 70%, var(--bg)); }
.mk .mk-btk-sv svg { width: 18px; height: 18px; }
.mk .mk-btk-sv:hover { color: var(--ink); }
.mk .mk-btk-sv.mk-on { color: var(--accent); }
.mk .mk-btk-sv.mk-on svg { fill: currentColor; }
.mk .mk-btk-row::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--p, 0%); background: var(--accent); opacity: 0; }
.mk .mk-btk-row.mk-on::after { opacity: 1; }
@media (max-width: 780px) {
.mk .mk-btk-row { grid-template-columns: 44px minmax(0, 1fr) auto 32px; gap: 10px; padding-inline: 10px; }
.mk .mk-btk-n { display: none; }
.mk .mk-btk-head { padding-inline: 10px; }
}

/* ==== popWin ==== */
.mk .mk-pw { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 16px; }
.mk .mk-pw[hidden] { display: none; }
.mk .mk-pw-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.66); }
.mk .mk-pw-card { position: relative; width: min(480px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; background: color-mix(in srgb, var(--bg) 95%, var(--ink)); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,0.7); padding: 18px 20px 20px; display: grid; gap: 16px; align-content: start; }
.mk .mk-pw-card.mk-wide { width: min(560px, 100%); }
.mk .mk-pw-head { display: grid; grid-template-columns: auto minmax(0, 1fr) 40px; gap: 12px; align-items: center; }
.mk .mk-pw-head.mk-back { grid-template-columns: 40px auto minmax(0, 1fr) 40px; }
.mk .mk-pw-head img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; }
.mk .mk-pw-covers { display: flex; padding-left: 10px; }
.mk .mk-pw-covers i { width: 40px; height: 40px; margin-left: -10px; border-radius: 9px; background-size: cover; background-position: center; border: 2px solid color-mix(in srgb, var(--bg) 95%, var(--ink)); }
.mk .mk-pw-id h2 { margin: 0; font-size: 18px; line-height: 1.2; letter-spacing: -0.01em; }
.mk .mk-pw-id p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.mk .mk-pw-x, .mk .mk-pw-back { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); }
.mk .mk-pw-x:hover, .mk .mk-pw-back:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.mk .mk-pw-x svg, .mk .mk-pw-back svg { width: 18px; height: 18px; }
.mk .mk-pw-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.mk .mk-pw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk .mk-pw-chips span { height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 12px; background: color-mix(in srgb, var(--ink) 8%, transparent); font-size: 12px; font-weight: 600; }
.mk .mk-pw-terms { max-height: min(52dvh, 420px); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 12px; padding-right: 6px; scrollbar-width: thin; }
.mk .mk-pw-terms h3 { margin: 0; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.mk .mk-pw-terms p { margin: 0; font-size: 13.5px; line-height: 1.55; color: color-mix(in srgb, var(--ink) 82%, transparent); }
.mk .mk-pw-terms p b { color: var(--ink); font-weight: 700; }
.mk .mk-pw-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mk .mk-pw-rules li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.mk .mk-pw-rules i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); font-style: normal; font-size: 12px; font-weight: 700; }
.mk .mk-pw-rules b { display: block; color: var(--ink); font-size: 14px; font-weight: 700; margin-bottom: 1px; }
.mk .mk-pw-card.mk-two { width: min(820px, 100%); }
.mk .mk-pw-two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 22px; align-items: start; }
.mk .mk-pw-info, .mk .mk-pw-main { display: grid; gap: 12px; align-content: start; min-width: 0; }
.mk .mk-pw-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.mk .mk-pw-eyebrow.mk-acc { color: var(--accent); }
.mk .mk-pw-eyebrow em { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: 0.8; }
.mk .mk-pw-beat { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 98%, var(--ink)); border: 1px solid var(--line); }
.mk .mk-pw-beat img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; }
.mk .mk-pw-beat div { display: grid; gap: 1px; min-width: 0; }
.mk .mk-pw-beat strong { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .mk-pw-beat small { color: var(--muted); font-size: 12.5px; }
.mk .mk-pw-lic { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent); }
.mk .mk-pw-lic strong { display: block; font-size: 15px; }
.mk .mk-pw-lic span { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.mk .mk-pw-lic b { color: var(--accent); font-size: 12px; font-weight: 700; white-space: nowrap; }
.mk .mk-pw-steps { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 98%, var(--ink)); border: 1px solid var(--line); }
.mk .mk-pw-steps p { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.mk .mk-pw-steps i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); font-style: normal; font-size: 11px; font-weight: 700; }
.mk .mk-pw-tb h3 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.mk .mk-pw-tb p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.mk .mk-pw-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.mk .mk-pw-seg button { height: 36px; border-radius: 9px; color: var(--muted); font-weight: 700; font-size: 13px; }
.mk .mk-pw-seg button[aria-selected="true"] { background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); }
.mk .mk-pw-as { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 98%, var(--ink)); border: 1px solid var(--line); }
.mk .mk-pw-as div { flex: 1; min-width: 0; display: grid; }
.mk .mk-pw-as b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .mk-pw-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.mk .mk-pw-amt { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; min-width: 0; height: 52px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.mk .mk-pw-amt span { color: var(--muted); font-size: 20px; font-weight: 700; }
.mk .mk-pw-f .mk-pw-amt input { flex: 1; min-width: 0; height: 100%; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 24px; font-weight: 700; padding: 0; outline: 0; }
.mk .mk-pw-f .mk-pw-amt input:focus-visible { outline: 0; }
.mk .mk-pw-hint { margin: 0; color: var(--muted); font-size: 12.5px; }
.mk .mk-pw-msg { margin: 0; min-height: 18px; font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.mk .mk-pw-two2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mk .mk-pw-ghost.mk-sm, .mk .mk-pw-solid { height: 48px; border-radius: 999px; font-weight: 700; font-size: 14.5px; display: grid; place-items: center; }
.mk .mk-pw-solid { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 720px) {
.mk .mk-pw-two { grid-template-columns: 1fr; gap: 14px; }
.mk .mk-pw-info { display: contents; }
.mk .mk-pw-beat { order: 1; }
.mk .mk-pw-lic { order: 2; }
.mk .mk-pw-main { order: 3; }
.mk .mk-pw-steps { order: 4; }
}
.mk .mk-pw-form { display: grid; gap: 14px; }
.mk .mk-pw-f { display: grid; gap: 6px; font-size: 13px; font-weight: 600; min-width: 0; }
.mk .mk-pw-f em { font-style: normal; font-weight: 400; color: var(--muted); }
.mk .mk-pw-f input, .mk .mk-pw-f textarea, .mk .mk-pw-cc button { min-width: 0; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink); font: inherit; font-size: 14px; font-weight: 400; }
.mk .mk-pw-f input, .mk .mk-pw-cc button { height: 44px; }
.mk .mk-pw-f textarea { padding: 10px 12px; min-height: 96px; resize: vertical; line-height: 1.45; }
.mk .mk-pw-f input::placeholder, .mk .mk-pw-f textarea::placeholder { color: var(--muted); }
.mk .mk-pw-f input:focus-visible, .mk .mk-pw-f textarea:focus-visible, .mk .mk-pw-cc button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.mk .mk-pw-f.mk-bad input { border-color: var(--accent); }
.mk .mk-pw-err { margin: 0; font-size: 12.5px; font-weight: 400; color: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.mk .mk-pw-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mk .mk-pw-money { position: relative; }
.mk .mk-pw-money span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; font-weight: 400; pointer-events: none; }
.mk .mk-pw-money input { padding-left: 26px; width: 100%; box-sizing: border-box; }
.mk .mk-pw-phone { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; position: relative; }
.mk .mk-pw-cc button { width: 100%; display: inline-flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 10px; }
.mk .mk-pw-cc button svg { width: 14px; height: 14px; color: var(--muted); }
.mk .mk-pw-cc ul { position: absolute; left: 0; top: 48px; z-index: 3; list-style: none; margin: 0; padding: 6px; width: 230px; max-height: 220px; overflow-y: auto; background: color-mix(in srgb, var(--panel) 98%, var(--ink)); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,0.6); }
.mk .mk-pw-cc ul[hidden] { display: none; }
.mk .mk-pw-cc li button { height: 38px; border: 0; background: none; padding: 0 10px; border-radius: 8px; font-size: 13.5px; display: flex; justify-content: space-between; }
.mk .mk-pw-cc li button:hover, .mk .mk-pw-cc li button[aria-selected="true"] { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.mk .mk-pw-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; line-height: 1.45; color: color-mix(in srgb, var(--ink) 88%, transparent); text-align: left; cursor: pointer; }
.mk .mk-pw-check .mk-bx { width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 1.5px solid color-mix(in srgb, var(--ink) 35%, transparent); display: grid; place-items: center; color: var(--accent-ink, #fff); }
.mk .mk-pw-check .mk-bx svg { width: 12px; height: 12px; opacity: 0; stroke-width: 3.2; }
.mk .mk-pw-check[aria-checked="true"] .mk-bx { background: var(--accent); border-color: var(--accent); }
.mk .mk-pw-check[aria-checked="true"] .mk-bx svg { opacity: 1; }
.mk .mk-pw-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.mk .mk-pw-check u { color: var(--ink); text-underline-offset: 3px; }
.mk .mk-pw-check small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.mk .mk-pw-check u, .mk .mk-pw-check a { white-space: nowrap; cursor: pointer; }
.mk .mk-pw-check a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mk .mk-pw-known { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 6%, transparent); font-size: 13px; }
.mk .mk-pw-cta { height: 52px; width: 100%; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 16px; }
.mk .mk-pw-cta:hover { filter: brightness(1.1); }
.mk .mk-pw-cta.mk-off { background: var(--accent); color: var(--accent-ink); }
.mk .mk-pw-cta:disabled { cursor: default; filter: none; }
.mk .mk-pw-ghost { height: 48px; width: 100%; border-radius: 999px; border: 1px solid var(--line); font-weight: 700; font-size: 15px; }
.mk .mk-pw-ghost:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.mk .mk-pw-fine { margin: 0; text-align: center; font-size: 12px; color: var(--muted); }
.mk .mk-pw-link { justify-self: center; color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }
.mk .mk-pw-link:disabled { color: var(--muted); text-decoration: none; cursor: default; }
.mk .mk-pw-sent { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 8px 0 2px; }
.mk .mk-pw-sent .mk-ok { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, #4cc38a 18%, transparent); color: #4cc38a; }
.mk .mk-pw-sent .mk-ok svg { width: 26px; height: 26px; stroke-width: 2.6; }
.mk .mk-pw-sent h2 { margin: 4px 0 0; font-size: 20px; letter-spacing: -0.01em; }
.mk .mk-pw-sent p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; max-width: 38ch; }
.mk .mk-pw-sent p b { color: var(--ink); }
.mk .mk-pw-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--ink) 15%, transparent); border-top-color: var(--accent); animation: pwSpin 0.8s linear infinite; }
@keyframes pwSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.mk .mk-pw-spin { animation-duration: 2.4s; }
}
@media (max-width: 480px) {
.mk .mk-pw { padding: 8px; align-items: end; }
.mk .mk-pw-card { padding: 16px 16px 18px; border-radius: 16px; max-height: calc(100dvh - 16px); }
.mk .mk-pw-row2 { grid-template-columns: 1fr; }
}

/* ==== barAlign ==== */
@media (min-width: 781px) {
.mk .mk-bar-in { width: min(100% - 2 * clamp(16px, 4vw, 40px), var(--mk-list-w, 1140px)) !important; padding: 12px 4px !important; box-sizing: border-box !important; }
}

/* ==== heroV2 ==== */
.mk .mk-sl-slide { --sl-blur: 80px; --sl-bgo: 0.4; --sl-dark: 0.35; --sl-vig: 0.5; --sl-grain: 0.3; --sl-aw: min(var(--sl-art, 400px), calc(clamp(380px, 46vw, 500px) - 96px)); }
.mk .mk-sl-bg { inset: calc(var(--sl-blur) * -1); transform: scale(var(--sl-zoom, 1)); transform-origin: var(--sl-fx, 50%) var(--sl-fy, 50%); background-size: var(--sl-fit, cover); background-repeat: no-repeat; background-position: var(--sl-fx, 50%) var(--sl-fy, 50%); filter: blur(var(--sl-blur)) saturate(1.3); opacity: var(--sl-bgo); }
.mk .mk-sl-slide[data-pic="image"] .mk-sl-bg { background-image: var(--sl-pic-d); filter: blur(var(--sl-blur)); opacity: 1; }
@media (max-width: 780px) {
.mk .mk-sl-slide[data-pic="image"] .mk-sl-bg { background-image: var(--sl-pic-m, var(--sl-pic-d)); }
}
.mk .mk-sl-glow { position: absolute; inset: 0; pointer-events: none; background: var(--sl-glow-bg, none); opacity: var(--sl-glow-o, 1); }
.mk .mk-sl-shade { position: absolute; inset: 0; pointer-events: none; background: rgba(0, 0, 0, var(--sl-dark)); }
.mk .mk-sl-grain { position: absolute; inset: 0; pointer-events: none; opacity: min(1, calc(var(--sl-grain) * 1.7)); mix-blend-mode: soft-light; background-size: 150px 150px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/><feGaussianBlur stdDeviation='.4'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='1.9' intercept='-.45'/><feFuncG type='linear' slope='1.9' intercept='-.45'/><feFuncB type='linear' slope='1.9' intercept='-.45'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"); -webkit-mask-image: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0.45) 0%, #000 85%); mask-image: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0.45) 0%, #000 85%); }
.mk .mk-sl-slide[data-grain="film"] .mk-sl-grain { background-size: 160px 160px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='g' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/><feGaussianBlur stdDeviation='.55'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='2.1' intercept='-.55'/><feFuncG type='linear' slope='2.1' intercept='-.55'/><feFuncB type='linear' slope='2.1' intercept='-.55'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"); }
.mk .mk-sl-slide[data-grain="coarse"] .mk-sl-grain { background-size: 180px 180px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360'><filter id='g' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='2' stitchTiles='stitch'/><feGaussianBlur stdDeviation='.9'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='2.3' intercept='-.65'/><feFuncG type='linear' slope='2.3' intercept='-.65'/><feFuncB type='linear' slope='2.3' intercept='-.65'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"); }
.mk .mk-sl-slide::after { background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, var(--sl-vig)) 100%), linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 0%, transparent) 24%); }
.mk .mk-sl-art .mk-sl-img { border-radius: var(--sl-round, 14px); }
@media (min-width: 781px) {
.mk .mk-sl-in { padding-top: 28px; padding-bottom: 76px; align-items: center; align-content: center; }
.mk .mk-sl-copy { align-self: auto; margin-top: 0; }
.mk .mk-sl-art { margin-bottom: 0; }
.mk .mk-sl-art .mk-sl-img { width: min(var(--sl-aw), 100%); }
.mk .mk-sl-slide[data-v="top"] .mk-sl-in { align-items: start; align-content: start; }
.mk .mk-sl-slide[data-v="bottom"] .mk-sl-in { align-items: end; align-content: end; }
.mk .mk-sl-slide[data-v="top"] .mk-sl-art, .mk .mk-sl-slide[data-v="bottom"] .mk-sl-art { align-self: center; }
}
@media (min-width: 781px) {
.mk .mk-sl-slide[data-t="right"] .mk-sl-in { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.mk .mk-sl-slide[data-t="right"] .mk-sl-art { order: -1; }
.mk .mk-sl-slide[data-t="center"] .mk-sl-in { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
.mk .mk-sl-slide[data-t="center"] .mk-sl-art { order: -1; }
.mk .mk-sl-slide[data-t="center"] { --sl-aw: min(var(--sl-art, 400px), 150px); }
.mk .mk-sl-slide[data-t="center"] .mk-sl-p { margin-left: auto; margin-right: auto; }
.mk .mk-sl-slide[data-t="center"] .mk-sl-cta, .mk .mk-sl-slide[data-t="center"] .mk-sl-price { justify-content: center; }
.mk .mk-sl-slide[data-t="center"] .mk-sl-art.mk-stack { grid-template-columns: repeat(4, 64px); gap: 8px; min-height: 0; }
.mk .mk-sl-slide[data-t="center"] .mk-sl-art.mk-stack .mk-sl-card, .mk .mk-sl-slide[data-t="center"] .mk-sl-art.mk-stack .mk-sl-card:nth-child(n) { width: 64px; height: 64px; border-radius: 9px; }
}
@media (min-width: 781px) and (max-height: 820px) {
.mk .mk-sl-slide { --sl-aw: min(var(--sl-art, 400px), 270px); }
.mk .mk-sl-slide[data-t="center"] { --sl-aw: min(var(--sl-art, 400px), 96px); }
.mk .mk-sl-slide[data-t="center"] .mk-sl-in { padding-top: 16px; padding-bottom: 76px; gap: 10px; }
}
@media (min-width: 781px) {
.mk .mk-sl-slide[data-layout="poster"] .mk-sl-in { grid-template-columns: minmax(0, 1fr) auto; align-items: end; align-content: end; column-gap: 40px; row-gap: 0; padding-bottom: 76px; }
.mk .mk-sl-slide[data-layout="poster"] .mk-sl-copy { display: contents; }
.mk .mk-sl-slide[data-layout="poster"] .mk-sl-copy > * { grid-column: 1; }
.mk .mk-sl-slide[data-layout="poster"] .mk-sl-cta, .mk .mk-sl-slide[data-layout="poster"] .mk-sl-form { grid-column: 2; grid-row: 1 / span 5; align-self: end; margin-bottom: 4px; }
.mk .mk-sl-slide[data-layout="poster"] .mk-sl-note { display: none; }
.mk .mk-sl-slide[data-layout="poster"] .mk-sl-copy h2 { font-size: calc(clamp(48px, 7.4vw, 92px) * var(--sl-ts, 1)); }
}
@media (min-width: 781px) and (max-height: 820px) {
.mk .mk-sl-slide[data-layout="poster"] .mk-sl-in { padding-top: 14px; padding-bottom: 76px; }
.mk .mk-sl-slide[data-layout="poster"] .mk-sl-copy h2 { font-size: calc(clamp(40px, 6vw, 64px) * var(--sl-ts, 1)); }
.mk .mk-sl-slide[data-layout="poster"] .mk-sl-p { margin: 8px 0 12px; }
}
.mk .mk-sl-slide[data-layout="big"] .mk-sl-copy h2 { font-size: calc(clamp(48px, 8.5vw, 118px) * var(--sl-ts, 1)); }
.mk .mk-sl-slide[data-layout="minimal"] .mk-sl-copy h2 { font-size: calc(clamp(32px, 4vw, 52px) * var(--sl-ts, 1)); }
.mk .mk-sl-slide[data-layout="minimal"] .mk-sl-p { max-width: 36ch; }
.mk .mk-sl-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@media (max-width: 780px), (prefers-reduced-motion: reduce) {
.mk .mk-sl-vid { display: none; }
}
.mk .mk-sl-cta .mk-sl-btn, .mk .mk-sl-cta .mk-sl-play { width: auto; min-width: 158px; height: 46px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; }
.mk .mk-sl-btn.mk-primary { background: var(--sl-btnc, var(--accent)); border-color: var(--sl-btnc, var(--accent)); }
@media (max-width: 780px) {
.mk .mk-sl-cta .mk-sl-btn, .mk .mk-sl-cta .mk-sl-play { min-width: 140px; padding: 0 18px; }
}
.mk .mk-sl-copy { color: var(--sl-words, inherit); }
.mk .mk-sl-copy h2 { font-family: var(--sl-ff, inherit); text-transform: var(--sl-tt, none); letter-spacing: var(--sl-tl, -0.04em); font-size: calc(clamp(36px, 5.4vw, 64px) * var(--sl-ts, 1)); }
.mk .mk-sl-btn.mk-primary, .mk .mk-sl-save { color: var(--sl-btnt, var(--accent-ink)); }
.mk .mk-sl-copy h2 { font-weight: var(--sl-tw, 800); line-height: var(--sl-tlh, 1); }
.mk .mk-sl-k { font-size: var(--sl-ks, 12px); letter-spacing: var(--sl-kl, 0.16em); text-transform: var(--sl-kt, uppercase); color: var(--sl-kc, var(--accent)); }
.mk .mk-sl-p { font-size: var(--sl-ps, 16px); color: var(--sl-pc, inherit); opacity: var(--sl-po, 0.82); }
.mk .mk-sl-price { font-size: var(--sl-prs, 22px); }
.mk .mk-sl-cta .mk-sl-btn, .mk .mk-sl-cta .mk-sl-play { font-size: var(--sl-bfs, 14px); height: var(--sl-bh, 46px); border-radius: var(--sl-br, 23px); }
@media (max-width: 780px) {
.mk .mk-sl-p { font-size: calc(var(--sl-ps, 16px) * 0.92); }
.mk .mk-sl-price { font-size: calc(var(--sl-prs, 22px) * 0.8); }
}
.mk .mk-sl-slide[data-b2="outline"] .mk-sl-btn:not(.mk-primary) { background: transparent; background-color: transparent; border: 1px solid var(--sl-b2c, color-mix(in srgb, var(--ink) 50%, transparent)); color: var(--sl-b2c, inherit); }
.mk .mk-sl-slide[data-b2="color"] .mk-sl-btn:not(.mk-primary) { background-image: none; background-color: var(--sl-b2c, var(--ink)); border: 1px solid var(--sl-b2c, var(--ink)); color: var(--sl-b2t, var(--bg)); }
.mk .mk-sl-slide[data-b2="color"] .mk-sl-btn:not(.mk-primary):hover { filter: brightness(1.1); }
@media (max-width: 780px) {
.mk .mk-sl-copy h2 { font-size: calc(min(34px, 9.5vw) * var(--sl-ts, 1)); white-space: normal; }
}
@media (min-width: 1200px) {
.mk .mk-sl-in { max-width: 1280px; }
}
@media (min-width: 781px) {
.mk .mk-sl-slide[data-layout="split"] .mk-sl-in { position: static; grid-template-columns: minmax(0, 1fr); }
.mk .mk-sl-slide[data-layout="split"] .mk-sl-copy { position: relative; z-index: 2; max-width: min(540px, calc(50vw - 80px)); }
.mk .mk-sl-slide[data-layout="split"] .mk-sl-art { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 48%; margin: 0; place-items: stretch; align-self: stretch; overflow: hidden; }
.mk .mk-sl-slide[data-layout="split"] .mk-sl-art .mk-sl-img { width: 100%; height: 100%; min-height: 0; object-fit: cover; aspect-ratio: auto; border-radius: 0; box-shadow: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); }
.mk .mk-sl-slide[data-layout="split"][data-t="right"] .mk-sl-copy { margin-left: auto; text-align: right; }
.mk .mk-sl-slide[data-layout="split"][data-t="right"] .mk-sl-p { margin-left: auto; }
.mk .mk-sl-slide[data-layout="split"][data-t="right"] .mk-sl-cta, .mk .mk-sl-slide[data-layout="split"][data-t="right"] .mk-sl-price { justify-content: flex-end; }
.mk .mk-sl-slide[data-layout="split"][data-t="right"] .mk-sl-art { right: auto; left: 0; }
.mk .mk-sl-slide[data-layout="split"][data-t="right"] .mk-sl-art .mk-sl-img { -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 26%); mask-image: linear-gradient(270deg, transparent 0, #000 26%); }
}
.mk .mk-sl-math { display: flex; align-items: center; gap: 10px; margin: 14px 0 18px; }
.mk .mk-sl-math-t { position: relative; flex: none; width: var(--sl-mt, 72px); height: var(--sl-mt, 72px); border-radius: 12px; overflow: hidden; background: var(--panel-2); }
.mk .mk-sl-math-t img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk .mk-sl-math-t b { position: absolute; left: 5px; bottom: 5px; height: 18px; padding: 0 6px; border-radius: 9px; display: inline-flex; align-items: center; background: rgba(10, 10, 10, 0.78); font-size: 10.5px; font-weight: 700; }
.mk .mk-sl-math-t.mk-free { display: grid; place-items: center; background: transparent; border: 2px dashed var(--sl-btnc, var(--accent)); color: var(--sl-btnc, var(--accent)); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; }
.mk .mk-sl-math-p { flex: none; font-size: 26px; font-weight: 800; line-height: 1; color: var(--muted); }
@media (max-width: 780px) {
.mk .mk-sl-math { justify-content: center; gap: 8px; margin-bottom: 12px; }
.mk .mk-sl-math-t { width: 56px; height: 56px; }
.mk .mk-sl-math-p { font-size: 20px; }
}
.mk .mk-sl-dots { left: auto; right: calc(max(0px, (100% - 1280px) / 2) + 56px); bottom: 22px; justify-content: flex-end; gap: 2px; }
.mk .mk-sl-dots button[role="tab"] { width: auto; min-width: 22px; height: 32px; padding: 0 5px; }
.mk .mk-sl-dots i { width: 8px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 50%, transparent); transition: width 0.3s ease, background-color 0.3s ease; }
.mk .mk-sl-dots button[aria-selected="true"] i { width: 28px; background: color-mix(in srgb, var(--ink) 35%, transparent); }
@media (max-width: 780px) {
.mk .mk-sl-dots { left: 0; right: 0; justify-content: center; bottom: 12px; }
}
.mk .mk-sl { --sl-min: clamp(380px, 46vw, 500px); }
@media (min-width: 781px) and (max-height: 820px) {
.mk .mk-sl { --sl-min: 400px; }
}
@media (max-width: 780px) {
.mk .mk-sl { --sl-min: 384px; }
}
.mk .mk-sl-track { height: auto; min-height: var(--sl-min); }
.mk .mk-sl-slide.mk-on { position: relative; min-height: var(--sl-min); }
.mk .mk-sl-slide:not(.mk-on) { min-height: 0; }
.mk .mk-sl-in { height: auto; min-height: var(--sl-min); }
@media (max-width: 780px) {
.mk .mk-sl-in { padding-top: 22px; padding-bottom: 68px; }
}
.mk .mk-sl-price { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; font-size: var(--sl-prs, 22px); font-weight: 800; letter-spacing: -0.01em; }
.mk .mk-sl-price s { color: var(--muted); font-size: 16px; font-weight: 600; }
.mk .mk-sl-save { height: 26px; padding: 0 12px; border-radius: 13px; display: inline-flex; align-items: center; background: var(--sl-btnc, var(--accent)); color: var(--accent-ink); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.mk .mk-sl-art { position: relative; }
@media (max-width: 780px) {
.mk .mk-sl-price { justify-content: center; font-size: calc(var(--sl-prs, 22px) * 0.8); gap: 8px; margin: 0 0 10px; }
.mk .mk-sl-price s { font-size: 14px; }
}
.mk .mk-sl-slide.mk-on .mk-sl-copy > * { animation: slIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.mk .mk-sl-slide.mk-on .mk-sl-copy > :nth-child(2) { animation-delay: 0.06s; }
.mk .mk-sl-slide.mk-on .mk-sl-copy > :nth-child(3) { animation-delay: 0.12s; }
.mk .mk-sl-slide.mk-on .mk-sl-copy > :nth-child(4) { animation-delay: 0.18s; }
.mk .mk-sl-slide.mk-on .mk-sl-copy > :nth-child(5) { animation-delay: 0.24s; }
.mk .mk-sl-slide.mk-on .mk-sl-art { animation: slArt 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes slIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes slArt { from { opacity: 0; transform: scale(0.96); } }
@media (prefers-reduced-motion: reduce) {
.mk .mk-sl-slide.mk-on .mk-sl-copy > *, .mk .mk-sl-slide.mk-on .mk-sl-art { animation: none; }
}
.mk .mk-sl-form input, .mk .mk-sl-form .mk-sl-btn { height: max(44px, var(--sl-bh, 46px)); border-radius: var(--sl-br, 23px); font-size: var(--sl-bfs, 14px); }
.mk .mk-sl-form .mk-sl-btn { padding: 0 24px; }
.mk .mk-sl { --sl-min: clamp(360px, 38vw, 440px); }
@media (min-width: 781px) and (max-height: 820px) {
.mk .mk-sl { --sl-min: 380px; }
}
.mk .mk-sl-slide { --sl-aw: min(var(--sl-art, 400px), calc(var(--sl-min) - 88px)); }
@media (min-width: 781px) and (max-height: 820px) {
.mk .mk-sl-slide { --sl-aw: min(var(--sl-art, 400px), 270px); }
.mk .mk-sl-slide[data-t="center"] { --sl-aw: min(var(--sl-art, 400px), 96px); }
}
@media (min-width: 781px) {
.mk .mk-sl-in, .mk .mk-sl-slide[data-t="center"] .mk-sl-in, .mk .mk-sl-slide[data-layout="poster"] .mk-sl-in { padding-bottom: 60px; }
}

/* ==== featV2 ==== */
.mk .mk-fp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 4.4vw, 72px); align-items: start; max-width: 1240px; margin: 0 auto; padding: 56px clamp(16px, 4vw, 32px); }
.mk .mk-fp-gal { position: sticky; top: var(--fp-top, 92px); align-self: start; }
.mk .mk-fp[data-pin="off"] .mk-fp-gal { position: static; }
.mk .mk-fp-art { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--panel); }
.mk .mk-fp-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk .mk-fp-info { min-width: 0; }
.mk .mk-fp-shop { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--muted); }
.mk .mk-fp-title { margin: 0; font-size: clamp(36px, 4.4vw, 60px); line-height: 0.98; letter-spacing: -0.04em; font-weight: 800; text-wrap: balance; }
.mk .mk-fp-price { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 20px 0 6px; }
.mk .mk-fp-now { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--accent); }
.mk .mk-fp-was { font-size: 17px; font-weight: 600; color: var(--muted); text-decoration: line-through; }
.mk .mk-fp-save { height: 26px; padding: 0 12px; border-radius: 13px; display: inline-flex; align-items: center; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.mk .mk-fp-fine { margin: 0; font-size: 13px; color: var(--muted); }
.mk .mk-fp-lead { margin: 22px 0 0; font-weight: 700; }
.mk .mk-fp-p { margin: 14px 0 0; line-height: 1.55; color: color-mix(in srgb, var(--ink) 82%, var(--bg)); }
.mk .mk-fp-hr { margin: 28px 0; border: 0; border-top: 1px solid var(--line); }
.mk .mk-fp-lab { margin: 0 0 4px; font-weight: 700; }
.mk .mk-fp-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 22px; }
.mk .mk-fp-opt { min-width: 64px; height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line); font-weight: 600; }
.mk .mk-fp-opt[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.mk .mk-fp-add, .mk .mk-fp-buy { width: 100%; height: 52px; border-radius: 26px; font-weight: 700; font-size: 15px; display: block; }
.mk .mk-fp-add { background: var(--ink); color: var(--bg); }
.mk .mk-fp-buy { margin-top: 10px; border: 1px solid var(--ink); }
.mk .mk-fp-more { display: block; margin-top: 12px; text-align: center; font-size: 13px; color: var(--muted); text-decoration: underline; }
@media (max-width: 780px) {
.mk .mk-fp { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 64px; }
.mk .mk-fp-gal { position: relative; top: auto; max-width: 420px; width: 100%; margin: 0 auto; }
}
.mk .mk-bl { position: relative; --c-bg: #0d0d0d; --c-panel: #171717; --c-ink: #f4f4f4; --c-muted: #a6a6a6; --c-line: #262626; margin: 22px 0 0; border-radius: 12px; overflow: hidden; background: var(--c-bg); color: var(--c-ink); border: 1px solid var(--c-line); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.mk .mk-bl[data-look="plain"] { --c-bg: transparent; --c-panel: var(--panel); --c-ink: var(--ink); --c-muted: var(--muted); --c-line: var(--line); border-radius: 0; border-width: 1px 0 0; box-shadow: none; }
.mk .mk-bl-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--c-line); }
.mk .mk-bl-search { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; border-radius: 10px; display: flex; align-items: center; gap: 10px; background: var(--c-panel); color: var(--c-muted); font-size: 14px; }
.mk .mk-bl-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--c-ink); font: inherit; outline: none; }
.mk .mk-bl-ib { flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--c-panel); color: var(--c-ink); position: relative; }
.mk .mk-bl-ib[aria-expanded="true"] { background: var(--c-ink); color: var(--c-bg); }
.mk .mk-bl-ib.mk-lbl i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.mk .mk-bl-ib.mk-lbl i[hidden] { display: none; }
.mk .mk-bl-filter { position: absolute; z-index: 6; top: 64px; right: 10px; width: min(340px, calc(100% - 20px)); padding: 14px; display: grid; gap: 14px; background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 12px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5); }
.mk .mk-bl-filter[hidden] { display: none; }
.mk .mk-bl-fh { display: flex; align-items: center; justify-content: space-between; }
.mk .mk-bl-fh b { font-size: 15px; }
.mk .mk-bl-done { height: 44px; padding: 0 22px; border-radius: 22px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 14px; }
.mk .mk-bl-scrim { display: none; }
@media (max-width: 520px) {
.mk .mk-bl-filter { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 78vh; overflow-y: auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; border-width: 1px 0 0; }
.mk .mk-bl-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, 0.55); }
}
.mk .mk-bl-fl { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); }
.mk .mk-bl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mk .mk-bl-chip { height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-ink); font-size: 13px; font-weight: 600; }
.mk .mk-bl-chip[aria-pressed="true"] { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
.mk .mk-bl-fa { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: var(--c-muted); }
.mk .mk-bl-fa .mk-bl-count { flex: 1 1 auto; }
.mk .mk-bl-clear { height: 44px; padding: 0 6px; color: var(--c-ink); font-weight: 600; text-decoration: underline; }
.mk .mk-bl-clear:disabled { opacity: 0.4; cursor: default; text-decoration: none; }
.mk .mk-bl-empty { padding: 28px 16px; text-align: center; font-size: 14px; color: var(--c-muted); }
.mk .mk-bl-row[hidden] { display: none; }
.mk .mk-bl-list { max-height: calc(var(--bl-rows, 7) * 61px + 26px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.mk .mk-bl-row { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 60px; padding: 8px 12px; border-bottom: 1px solid var(--c-line); }
.mk .mk-bl-row:last-child { border-bottom: 0; }
.mk .mk-bl-row:hover, .mk .mk-bl-row[aria-current="true"] { background: var(--c-panel); }
.mk .mk-bl-row[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.mk .mk-bl-cv { position: relative; width: 44px; height: 44px; border-radius: 6px; overflow: hidden; background: var(--c-panel); }
.mk .mk-bl-cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk .mk-bl-cv svg { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; fill: #fff; stroke: none; opacity: 0; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7)); }
.mk .mk-bl-row:hover .mk-bl-cv svg, .mk .mk-bl-row[aria-current="true"] .mk-bl-cv svg { opacity: 1; }
.mk .mk-bl-t { min-width: 0; display: grid; }
.mk .mk-bl-t b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .mk-bl-t span { font-size: 12px; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .mk-bl-act { display: flex; align-items: center; gap: 4px; }
.mk .mk-bl-act .mk-bl-ib { background: none; color: var(--c-muted); }
.mk .mk-bl-act .mk-bl-ib:hover { color: var(--c-ink); }
.mk .mk-bl-add { height: 44px; padding: 0 4px; display: inline-flex; align-items: center; }
.mk .mk-bl-add span { height: 30px; padding: 0 12px; border-radius: 15px; display: inline-flex; align-items: center; gap: 6px; background: var(--btn2); color: var(--c-ink); font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; }
.mk .mk-bl-add:hover span { background: var(--c-ink); color: var(--c-bg); }
.mk .mk-bl-add svg { width: 15px; height: 15px; }
.mk .mk-bl[data-look="plain"] .mk-bl-add span { background: var(--c-panel); }
.mk .mk-bl-head { display: none; }
.mk .mk-bl-t .mk-m-w, .mk .mk-bl-tm, .mk .mk-bl-bpm { display: none; }
@media (max-width: 520px) {
.mk .mk-bl-act .mk-bl-ib { display: none; }
}
@media (min-width: 1100px), (min-width: 521px) and (max-width: 780px) {
.mk .mk-bl-head, .mk .mk-bl-row { grid-template-columns: 44px minmax(0, 1fr) 56px 48px auto; }
.mk .mk-bl-head { display: grid; gap: 12px; align-items: center; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--c-line); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); }
.mk .mk-bl-head span:nth-child(1) { grid-column: 1 / 3; }
.mk .mk-bl-t .mk-m-n { display: none; }
.mk .mk-bl-t .mk-m-w { display: block; }
.mk .mk-bl-tm, .mk .mk-bl-bpm { display: block; font-size: 13px; color: var(--c-muted); }
.mk .mk-bl-act { min-width: 148px; justify-content: flex-end; }
}
.mk .mk-bl-bar .mk-bl-ib.mk-lbl { width: auto; padding: 0 14px; gap: 8px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; }
.mk .mk-bl-bar .mk-bl-ib.mk-lbl span { display: none; }
@media (min-width: 1100px), (min-width: 521px) and (max-width: 780px) {
.mk .mk-bl-bar .mk-bl-ib.mk-lbl span { display: inline; }
}
.mk [data-rv] { opacity: 0; transform: translateY(32px); }
.mk [data-rv="up-lg"] { transform: translateY(43px); }
.mk [data-rv="words"], .mk [data-rv="zoom"] { opacity: 1; transform: none; }
.mk [data-rv].mk-rv-in { opacity: 1; transform: none; transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms); }
.mk .mk-rv-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.mk .mk-rv-w > i { display: inline-block; font-style: normal; transform: translateY(108%); }
.mk .mk-rv-in .mk-rv-w > i { transform: none; transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d, 0ms) + var(--i, 0) * 50ms); }
.mk [data-rv="zoom"] img { transform: scale(1.14); }
.mk [data-rv="zoom"].mk-rv-in img { transform: none; transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1); }
.mk .mk-rv-off [data-rv], .mk .mk-rv-off [data-rv] img, .mk .mk-rv-off .mk-rv-w > i { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
.mk [data-rv], .mk [data-rv] img, .mk .mk-rv-w > i { opacity: 1; transform: none; transition: none; }
}

/* ==== shelfV2 ==== */
.mk .mk-sh { padding: clamp(48px, 6vw, 96px) 0 0; }
.mk .mk-sh-in { width: min(var(--sh-w, 1440px), calc(100% - 2 * var(--sh-side, 48px))); margin: 0 auto; }
.mk .mk-sh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.mk .mk-sh-h { margin: 0; font-size: clamp(32px, 3.3vw, 48px); line-height: 1; letter-spacing: -0.03em; font-weight: 800; }
.mk .mk-sh-nav { display: flex; gap: 8px; }
.mk .mk-sh-nav[hidden] { display: none; }
.mk .mk-sh-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; }
.mk .mk-sh-nav button:disabled { opacity: 0.35; cursor: default; }
.mk .mk-sh-nav button:not(:disabled):hover { border-color: var(--ink); }
.mk .mk-sh-row { --sh-gap: 24px; display: grid; grid-template-columns: repeat(var(--sh-per, 4), minmax(0, 1fr)); gap: 40px var(--sh-gap); }
.mk .mk-sh-row[data-mode="scroll"] { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--sh-per, 4) - 1) * var(--sh-gap)) / var(--sh-per, 4)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; row-gap: 0; }
.mk .mk-sh-row[data-mode="scroll"]::-webkit-scrollbar { display: none; }
.mk .mk-sh-row[data-mode="scroll"] .mk-pc { scroll-snap-align: start; }
.mk .mk-sh-row.mk-dragging { scroll-snap-type: none; cursor: grabbing; }
@media (max-width: 1100px) {
.mk .mk-sh-row { --sh-per: 3; }
}
@media (max-width: 780px) {
.mk .mk-sh-row { --sh-per: 2; --sh-gap: 16px; }
.mk .mk-sh-row[data-mode="scroll"] { grid-auto-columns: 62%; }
}
@media (max-width: 480px) {
.mk .mk-sh-row[data-mode="scroll"] { grid-auto-columns: 74%; }
}
.mk .mk-pc { min-width: 0; display: grid; align-content: start; color: inherit; text-decoration: none; }
.mk .mk-pc-img { position: relative; aspect-ratio: 1; border-radius: clamp(10px, 1.05vw, 20px); overflow: hidden; background: var(--panel); }
.mk .mk-pc-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); user-select: none; -webkit-user-drag: none; }
.mk .mk-pc:hover .mk-pc-img img { transform: scale(1.04); }
.mk .mk-pc-save { position: absolute; top: 12px; left: 12px; height: 28px; padding: 0 12px; border-radius: 14px; display: inline-flex; align-items: center; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 700; }
.mk .mk-pc-quick { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 44px; border-radius: 22px; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 92%, transparent); color: var(--ink); font-size: 14px; font-weight: 600; opacity: 0; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease; }
.mk .mk-pc:hover .mk-pc-quick, .mk .mk-pc:focus-within .mk-pc-quick { opacity: 1; transform: none; }
@media (hover: none) {
.mk .mk-pc-quick { display: none; }
}
.mk .mk-pc-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; margin-top: 14px; align-items: start; }
.mk .mk-pc-shop { grid-column: 1 / -1; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.mk .mk-pc-t { margin: 0; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.15; letter-spacing: -0.01em; font-weight: 700; }
.mk .mk-pc-p { text-align: right; line-height: 1.25; white-space: nowrap; }
.mk .mk-pc-p small { font-size: 12px; color: var(--muted); margin-right: 4px; }
.mk .mk-pc-p b { font-size: 15px; font-weight: 700; color: var(--accent); }
.mk .mk-pc-p s { display: block; font-size: 13px; color: var(--muted); }
.mk .mk-sh[data-card="boxed"] .mk-pc { padding: 12px; border-radius: 16px; background: var(--panel); }
.mk .mk-sh[data-card="boxed"] .mk-pc-img { border-radius: 12px; }
.mk .mk-sh[data-card="boxed"] .mk-pc-t { font-size: 16px; }
.mk .mk-sh[data-card="boxed"] .mk-pc-save, .mk .mk-sh[data-card="boxed"] .mk-pc-shop { display: none; }
.mk .mk-bp { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: stretch; }
@media (max-width: 1000px) {
.mk .mk-bp { grid-template-columns: minmax(0, 1fr); }
}
.mk .mk-bp-lead { margin: 0 0 28px; max-width: 52ch; color: color-mix(in srgb, var(--ink) 78%, var(--bg)); line-height: 1.55; }
.mk .mk-bp-under { position: relative; display: inline-block; }
.mk .mk-bp-under svg { position: absolute; left: -2%; bottom: -0.16em; width: 104%; height: 0.32em; stroke: var(--accent); stroke-width: 3; fill: none; }
.mk .mk-bp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
@media (max-width: 1250px) {
.mk .mk-bp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
.mk .mk-bp-grid { grid-template-columns: minmax(0, 1fr); }
}
.mk .mk-bp-card { display: grid; align-content: start; gap: 12px; min-width: 0; }
.mk .mk-bp-card .mk-pc-img { border-radius: 16px; }
.mk .mk-bp-card h3 { margin: 0; font-size: 18px; line-height: 1.15; letter-spacing: -0.01em; }
.mk .mk-bp-card .mk-mt { margin: -6px 0 0; font-size: 13px; color: var(--muted); }
.mk .mk-bp-lic { display: flex; gap: 6px; flex-wrap: wrap; }
.mk .mk-bp-lic button { height: 44px; min-width: 64px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; display: grid; place-items: center; line-height: 1.1; }
.mk .mk-bp-lic button small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.mk .mk-bp-lic button[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.mk .mk-bp-add { height: 48px; border-radius: 24px; background: var(--ink); color: var(--bg); font-weight: 700; font-size: 14px; }
.mk .mk-bp-add[aria-pressed="true"] { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.mk .mk-bp-box { align-content: start; padding: 24px; border-radius: 20px; border: 2px solid var(--ink); background: var(--bg); display: grid; gap: 14px; }
.mk .mk-bp-box h3 { margin: 0; font-size: 34px; line-height: 0.98; letter-spacing: -0.03em; }
.mk .mk-bp-box .mk-nt { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.mk .mk-bp-prog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mk .mk-bp-prog i { height: 6px; border-radius: 3px; background: var(--line); }
.mk .mk-bp-prog i.mk-on { background: var(--ink); }
.mk .mk-bp-prog i.mk-free { background: var(--accent); }
.mk .mk-bp-items { display: grid; gap: 4px; height: 220px; overflow-y: auto; align-content: start; scrollbar-width: thin; }
.mk .mk-bp-list { display: flex; flex-direction: column; }
.mk .mk-bp-list .mk-bl-list { flex: 1 1 0; min-height: 0; max-height: none; }
@media (max-width: 1000px) {
.mk .mk-bp-list .mk-bl-list { flex: none; max-height: 480px; }
}
.mk .mk-bp-it { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; min-height: 52px; }
.mk .mk-bp-it .mk-cv { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--panel); }
.mk .mk-bp-it .mk-cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk .mk-bp-it b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .mk-bp-it span { font-size: 12px; color: var(--muted); }
.mk .mk-bp-it .mk-pr { font-size: 14px; font-weight: 700; text-align: right; }
.mk .mk-bp-it .mk-pr s { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.mk .mk-bp-it .mk-pr em { font-style: normal; color: var(--accent); }
.mk .mk-bp-it button { width: 44px; height: 44px; display: grid; place-items: center; color: var(--muted); }
.mk .mk-bp-empty { margin: 0; padding: 18px 0; text-align: center; font-size: 13.5px; color: var(--muted); }
.mk .mk-bp-tot { display: flex; align-items: baseline; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 700; }
.mk .mk-bp-tot b { font-size: 22px; }
.mk .mk-bp-save { margin: 0; font-size: 13px; color: var(--accent); font-weight: 600; min-height: 18px; }
.mk .mk-bp-go { height: 52px; border-radius: 26px; background: var(--ink); color: var(--bg); font-weight: 700; font-size: 15px; }
.mk .mk-bp-go:disabled { opacity: 0.4; cursor: default; }
.mk .mk-qv-scrim { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: clamp(8px, 3vw, 40px); background: rgba(0, 0, 0, 0.62); }
.mk .mk-qv-scrim[hidden] { display: none; }
.mk .mk-qv { position: relative; width: min(1180px, 100%); height: min(820px, 100%); border-radius: 20px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) auto; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.mk .mk-qv-sc { overflow-y: auto; padding: clamp(20px, 3vw, 40px); scrollbar-width: thin; }
.mk .mk-qv-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); }
.mk .mk-qv-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 3.5vw, 48px); align-items: start; }
.mk .mk-qv-gal { position: sticky; top: 0; align-self: start; }
.mk .mk-qv-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 0 clamp(20px, 3vw, 40px); border-top: 1px solid var(--line); font-weight: 600; color: var(--ink); text-decoration: none; }
.mk .mk-qv-foot:hover { background: var(--panel); }
@media (max-width: 780px) {
.mk .mk-qv-scrim { padding: 0; }
.mk .mk-qv { height: 100%; border-radius: 0; border-width: 0; }
.mk .mk-qv-in { grid-template-columns: minmax(0, 1fr); }
.mk .mk-qv-gal { position: static; max-width: 300px; width: 100%; margin: 28px auto 0; }
}
.mk .mk-bl-row.mk-pk { grid-template-columns: 44px minmax(0, 1fr) auto; }
.mk .mk-bl-bar.mk-pkbar { flex-wrap: wrap; }
.mk .mk-pk-seg { display: flex; gap: 4px; flex: none; }
.mk .mk-pk-seg button { min-width: 64px; height: 44px; padding: 0 10px; border-radius: 22px; border: 1px solid var(--c-line); background: var(--c-panel); color: var(--c-ink); display: grid; place-items: center; align-content: center; line-height: 1.05; font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; }
.mk .mk-pk-seg button small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0; color: var(--c-muted); }
.mk .mk-pk-seg button[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-bg); }
.mk .mk-pk-seg button[aria-pressed="true"] small { color: var(--c-bg); opacity: 0.7; }
@media (max-width: 700px) {
.mk .mk-pk-seg { flex: 1 1 100%; }
.mk .mk-pk-seg button { flex: 1 1 auto; min-width: 0; padding: 0 4px; font-size: 11px; letter-spacing: 0.01em; }
.mk .mk-pk-seg button small { font-size: 10px; }
}
.mk .mk-bl-add[aria-pressed="true"] span { background: var(--accent); color: var(--accent-ink); }
.mk .mk-bl-add em { font-style: normal; }
.mk .mk-bl-add .mk-pp { font-weight: 600; opacity: 0.75; }
.mk .mk-bl-add[aria-pressed="true"] .mk-pp { display: none; }
@media (max-width: 380px) {
.mk .mk-bl-add .mk-pp { display: none; }
}
.mk .mk-bp-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; pointer-events: none; }
.mk .mk-bp-hd svg { display: none; width: 24px; height: 24px; transition: transform 0.2s; }
.mk .mk-bp-n { display: none; }
.mk .mk-bp-go .mk-pr, .mk .mk-bp-go .mk-sep { display: none; }
@media (max-width: 1000px) {
.mk .mk-bp-box { --bg: #0d0d0d; --ink: #f4f4f4; --muted: #b0b0b0; --line: #3a3a3a; position: sticky; bottom: 0; z-index: 25; margin: 0 calc(var(--sh-side, 16px) * -1); border: 0; border-radius: 20px 20px 0 0; padding: 16px var(--sh-side, 16px) calc(14px + env(safe-area-inset-bottom)); gap: 10px; background: color-mix(in srgb, var(--bg) 85%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--ink); box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.25); max-height: 82svh; overflow-y: auto; }
.mk .mk-bp-hd { pointer-events: auto; min-height: 44px; margin: -6px 0; cursor: pointer; }
.mk .mk-bp-hd svg { display: block; }
.mk .mk-bp-box[data-open="1"] .mk-bp-hd svg { transform: scaleY(-1); }
.mk .mk-bp-box h3 { font-size: 24px; }
.mk .mk-bp-n { display: inline; font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 8px; letter-spacing: 0; }
.mk .mk-bp-box:not([data-open="1"]) .mk-bp-items, .mk .mk-bp-box:not([data-open="1"]) .mk-bp-tot, .mk .mk-bp-box:not([data-open="1"]) .mk-bp-save { display: none; }
.mk .mk-bp-tot { display: none; }
.mk .mk-bp-items { height: auto; max-height: min(220px, 34svh); }
.mk .mk-bp-go { background: var(--ink); color: var(--bg); display: flex; align-items: center; justify-content: center; gap: 12px; }
.mk .mk-bp-go .mk-pr, .mk .mk-bp-go .mk-sep { display: inline; }
.mk .mk-bp-go .mk-sep { width: 1px; height: 18px; background: currentColor; opacity: 0.5; }
.mk .mk-bp-it .mk-pr { color: var(--ink); }
}

/* ==== liveV1 ==== */
.mk .mk-sh { --sh-side: 48px; padding-top: var(--sh-top, clamp(48px, 6vw, 96px)); }
@media (max-width: 780px) {
.mk .mk-sh { --sh-side: 16px; padding-top: var(--sh-top-m, clamp(40px, 6vw, 96px)); }
}
.mk .mk-sh-tools { display: flex; align-items: center; gap: 16px; }
.mk .mk-sh-all { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mk .mk-sh-sub { margin: 10px 0 0; max-width: 60ch; color: var(--muted); line-height: 1.5; }
.mk .mk-pc-save { background: var(--pc-sale, var(--accent)); }
.mk .mk-pc-p b { color: var(--pc-sale, var(--accent)); }
.mk .mk-pc-cap { grid-column: 1 / -1; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.mk .mk-fp { max-width: var(--sh-w, 1240px); }
.mk .mk-fp[data-side="right"] .mk-fp-gal { order: 2; }
@media (max-width: 780px) {
.mk .mk-fp[data-side="right"] .mk-fp-gal { order: 0; }
}
.mk .mk-fp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 22px; }
.mk .mk-fp-chips span { height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line); display: inline-flex; align-items: center; font-weight: 600; }
.mk .mk-fp-desc { margin: 22px 0 0; line-height: 1.55; color: color-mix(in srgb, var(--ink) 82%, var(--bg)); }
.mk .mk-fp-desc p { margin: 0 0 12px; }
.mk .mk-fp-desc > :last-child { margin-bottom: 0; }
.mk .mk-fp-desc :is(ul, ol) { padding-left: 24px; }
.mk .mk-fp-add { background: var(--fp-btn, var(--ink)); color: var(--fp-btn-ink, var(--bg)); }
.mk .mk-fp-add:disabled { opacity: 0.5; cursor: default; }
.mk .mk-fp-buy { display: grid; place-items: center; background: none; color: var(--ink); text-decoration: none; }
.mk .mk-fp-art { display: block; }
.mk .mk-bl-row .mk-pz { display: none; }
.mk .mk-bl-row.mk-playing .mk-bl-cv .mk-py { display: none; }
.mk .mk-bl-row.mk-playing .mk-bl-cv .mk-pz { display: block; }
.mk .mk-bl-row.mk-playing .mk-bl-cv svg { opacity: 1; }
.mk .mk-bl-row { cursor: pointer; }
.mk .mk-bl-ib.mk-on { color: var(--accent); }
.mk .mk-bl-ib.mk-on svg { fill: currentColor; }
.mk .mk-bl-add[aria-pressed="true"] span { background: var(--accent); color: var(--accent-ink); }
.mk .mk-bp-box .mk-nt button { text-decoration: underline; font-weight: 600; color: var(--ink); min-height: 32px; }
.mk .mk-bp-sw { display: block; margin-top: 4px; }
@media (max-width: 1000px) {
.mk .mk-bp-box { bottom: var(--pk-bottom, 0px); }
}
.mk .mk-bp-deal { margin: 0; font-size: 13px; color: var(--muted); }