/* Home: four designs (hm-1…4.js). Pulse tokens throughout; each design keeps its own prefix (l- b- m- c-). */
.hmpage .up { color: var(--buy); } .hmpage .dn { color: #FF8A7A; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the design switcher ---------- */
:root:has(.hm-switch) { --stick-top: 61px; }
.hm-switch { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 6px; padding: 8px var(--gut); background: color-mix(in srgb, var(--raise) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.hm-switch::-webkit-scrollbar { display: none; }
.hm-switch > span { flex: none; font: 700 10px var(--f-big); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-right: 4px; }
.hm-switch button { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--mute); transition: background var(--dur-2), color var(--dur-2); }
.hm-switch button b { font: 700 11px var(--f-big); color: var(--faint); } .hm-switch button small { font-size: 12px; font-weight: 500; color: var(--faint); }
.hm-switch button:hover { color: var(--text); } .hm-switch button:focus-visible { box-shadow: 0 0 0 2px var(--text); }
.hm-switch button[aria-pressed=true] { background: var(--text); color: var(--deep); } .hm-switch button[aria-pressed=true] b, .hm-switch button[aria-pressed=true] small { color: var(--deep); }
@media (max-width: 1100px) { .hm-switch button small { display: none; } }
.hmpage { padding-top: var(--sp-5); }
.hmpage .w-sec { margin-top: var(--sp-7); }

/* ========== 1 · Live ========== */
.l-spot { --t: var(--buy); position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: var(--sp-6); min-height: 440px; padding: clamp(24px, 4vw, 48px); border-radius: 28px; overflow: hidden;
  background: radial-gradient(60% 80% at 22% 50%, color-mix(in srgb, var(--t) 26%, transparent), transparent 70%), radial-gradient(40% 60% at 90% 0%, color-mix(in srgb, var(--fair) 14%, transparent), transparent 70%), var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 28%, var(--line)); }
.l-spot.l-fair { --t: var(--fair); } .l-spot.l-count { --t: var(--wait); grid-template-columns: 1fr; text-align: center; justify-items: center; }
.l-art { position: relative; display: grid; place-items: center; min-height: 300px; }
.l-art img { position: relative; z-index: 2; width: min(260px, 70%); aspect-ratio: 1; object-fit: contain; padding: 16px; border-radius: 26px; background: #fff; box-shadow: 0 40px 80px -30px #000, 0 0 0 1px #0002; animation: l-float 6s ease-in-out infinite; }
.l-ring { position: absolute; z-index: 1; width: 320px; height: 320px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--t) 50%, transparent); animation: l-pulse 3.2s var(--ease-out) infinite; } .l-ring.two { animation-delay: 1.6s; }
@keyframes l-float { 50% { transform: translateY(-10px) rotate(-1.5deg); } }
@keyframes l-pulse { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.l-copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .l-count .l-copy { align-items: center; max-width: 720px; }
.l-live { display: inline-flex; align-items: center; gap: 10px; font: 700 11px var(--f-big); letter-spacing: .1em; text-transform: uppercase; color: var(--t); }
.l-live i { width: 10px; height: 10px; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 0 var(--t); animation: l-beat 1.6s ease-out infinite; } .l-live.quiet i { animation: none; }
@keyframes l-beat { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--t) 70%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.l-copy h1 { font: 700 clamp(28px, 4.2vw, 52px)/1.04 var(--f-big); letter-spacing: -.03em; text-wrap: balance; }
.l-px { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .l-px b { font: 700 clamp(44px, 7vw, 76px)/.9 var(--f-big); letter-spacing: -.05em; color: var(--t); } .l-px span { font-size: 18px; font-weight: 600; color: var(--mute); }
.l-why { font-size: 16px; line-height: 1.55; color: var(--mute); max-width: 54ch; }
.l-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.l-buy, .l-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border-radius: 18px; font-weight: 700; font-size: 16px; text-decoration: none; transition: transform var(--dur-1), filter var(--dur-2); }
.l-buy { background: var(--t); color: var(--deep); box-shadow: 0 16px 40px -14px color-mix(in srgb, var(--t) 80%, transparent); } .l-buy:hover { filter: brightness(1.08); } .l-buy:active, .l-ghost:active { transform: scale(.97); }
.l-ghost { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); } .l-buy:focus-visible, .l-ghost:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.l-clock { display: flex; gap: clamp(8px, 2vw, 16px); margin: 8px 0; }
.l-clock span { min-width: clamp(64px, 12vw, 104px); padding: 14px 8px; border-radius: 18px; background: color-mix(in srgb, var(--deep) 60%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.l-clock b { display: block; font: 700 clamp(30px, 6vw, 56px)/1 var(--f-big); letter-spacing: -.04em; } .l-clock small { font: 700 10px var(--f-big); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
/* the ticker */
.l-tick { display: flex; align-items: center; gap: 12px; margin-top: var(--sp-4); padding: 6px 6px 6px 16px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.l-tl { flex: none; display: inline-flex; align-items: center; gap: 8px; font: 700 11px var(--f-big); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.l-track { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.l-run { display: flex; gap: 8px; width: max-content; animation: l-scroll 48s linear infinite; } .l-dup { display: flex; gap: 8px; }
.l-tick.paused .l-run, .l-tick:hover .l-run, .l-tick:focus-within .l-run { animation-play-state: paused; }
@keyframes l-scroll { to { transform: translateX(-50%); } }
.l-run a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 6px; border-radius: 12px; color: var(--text); text-decoration: none; white-space: nowrap; font-size: 13px; }
.l-run a:hover { background: var(--raise); } .l-run img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: #fff; padding: 2px; } .l-run b { font-weight: 600; } .l-run .num { font-weight: 700; }
.l-pause { all: unset; cursor: pointer; flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--mute); } .l-pause:hover { background: var(--raise); color: var(--text); } .l-pause:focus-visible { box-shadow: 0 0 0 2px var(--text); }
/* the radar */
.l-line { position: relative; height: 72px; margin: 4px 6px 8px; }
.l-axis { position: absolute; left: 0; right: 0; top: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--line), color-mix(in srgb, var(--buy) 40%, var(--line))); }
.l-line small { position: absolute; top: 48px; transform: translateX(-50%); font-size: 11px; color: var(--faint); } .l-line small:first-of-type { transform: none; } .l-line small:last-of-type { transform: translateX(-100%); }
.l-line .l-dot { position: absolute; top: 23px; transform: translateX(-50%); animation: l-drop .6s var(--ease-out) both; }
@keyframes l-drop { from { transform: translate(-50%, -16px); opacity: 0; } }
.l-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--mute); }
.l-dot.in { background: var(--buy); box-shadow: 0 0 12px color-mix(in srgb, var(--buy) 70%, transparent); } .l-dot.flash { background: transparent; box-shadow: inset 0 0 0 3px var(--wait); } .l-dot.out { background: var(--faint); opacity: .7; }
.l-feed { list-style: none; padding: 4px 12px; margin: 0; border-radius: var(--r); background: var(--surface); }
.l-feed li + li { border-top: 1px solid var(--line); }
.l-feed a { display: grid; grid-template-columns: 12px 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 60px; color: inherit; text-decoration: none; }
.l-feed img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: #fff; padding: 2px; } .l-feed b { display: block; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .l-feed small { font-size: 12px; color: var(--mute); }
.l-key { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--mute); } .l-key span { display: inline-flex; align-items: center; gap: 7px; }
.l-two { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-6); align-items: start; } .l-two .w-sec { min-width: 0; }
.l-drops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.l-drops a { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 150px; padding: 16px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: inherit; text-decoration: none; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2); }
.l-drops a:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wait) 40%, var(--line)); } .l-drops a:focus-visible { outline: 2px solid var(--text); }
.l-dd b { font: 700 44px/1 var(--f-big); letter-spacing: -.04em; color: var(--wait); } .l-dd small { margin-left: 6px; font-size: 13px; color: var(--mute); }
.l-dt b { display: block; font-weight: 600; font-size: 14px; line-height: 1.35; } .l-dt small { font-size: 12px; color: var(--mute); }
.l-win { list-style: none; margin: 0; padding: 4px 14px; border-radius: var(--r); background: var(--surface); }
.l-win li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 60px; } .l-win li + li { border-top: 1px solid var(--line); }
.l-win b { display: block; font-size: 14px; font-weight: 600; } .l-win small { font-size: 12px; color: var(--mute); } .l-win em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--mute); } .l-win .hot em { color: var(--buy); }
@media (max-width: 860px) {
  .l-spot { grid-template-columns: 1fr; text-align: center; justify-items: center; min-height: 0; gap: var(--sp-4); }
  .l-art { min-height: 220px; } .l-art img { width: 180px; } .l-ring { width: 230px; height: 230px; }
  .l-copy { align-items: center; } .l-px { justify-content: center; } .l-cta { justify-content: center; width: 100%; } .l-buy, .l-ghost { flex: 1 1 auto; }
  .l-two { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 420px) { .l-drops { grid-template-columns: 1fr 1fr; } .l-drops a { min-height: 130px; padding: 14px; } .l-dd b { font-size: 34px; } .l-tl span, .l-tl { font-size: 0; gap: 0; } }

/* ========== 2 · Brief ========== */
.h2v { max-width: 980px; }
.b-mast { position: relative; isolation: isolate; padding: clamp(8px, 3vw, 32px) 0 var(--sp-4); }
.b-mast::before { content: ''; position: absolute; z-index: -1; inset: -120px -40vw auto -40vw; height: 520px; background: radial-gradient(40% 50% at 30% 40%, color-mix(in srgb, var(--fair) 14%, transparent), transparent 70%), radial-gradient(30% 40% at 70% 20%, color-mix(in srgb, var(--buy) 10%, transparent), transparent 70%); pointer-events: none; }
.b-date { font: 700 11px var(--f-big); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.b-hi { margin: 14px 0 18px; font: 700 clamp(40px, 7vw, 76px)/1 var(--f-big); letter-spacing: -.045em; background: linear-gradient(100deg, var(--text) 30%, color-mix(in srgb, var(--fair) 70%, var(--text))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.b-para { font: 500 clamp(20px, 2.6vw, 30px)/1.5 var(--f-ui); letter-spacing: -.01em; color: color-mix(in srgb, var(--text) 86%, var(--mute)); max-width: 40ch; text-wrap: pretty; }
.b-pill { display: inline-block; padding: 0 .32em; margin: 0 .04em; border-radius: .32em; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); font-weight: 700; text-decoration: none; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background var(--dur-2); }
.b-pill:hover { background: color-mix(in srgb, var(--text) 18%, transparent); } .b-pill:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.b-pill.up, .b-pill.buy { background: color-mix(in srgb, var(--buy) 18%, transparent); color: var(--buy); } .b-pill.dn { background: color-mix(in srgb, #FF8A7A 16%, transparent); color: #FF8A7A; }
.b-h { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-4); font: 700 20px var(--f-big); letter-spacing: -.02em; } .b-h .num { font-size: 13px; padding: 2px 9px; border-radius: 99px; background: var(--raise); color: var(--mute); }
.b-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.b-card { --t: var(--buy); position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 22px; overflow: hidden; background: radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--t) 16%, transparent), transparent 70%), var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.b-card.t-wait { --t: var(--wait); }
.b-card img { position: absolute; top: 16px; right: 16px; width: 64px; height: 64px; object-fit: contain; border-radius: 12px; background: #fff; padding: 4px; box-shadow: 0 10px 24px -10px #000; }
.b-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--t) 16%, transparent); color: var(--t); }
.b-k { margin-top: 6px; font: 700 10px var(--f-big); letter-spacing: .08em; text-transform: uppercase; color: var(--t); }
.b-card > b { font-size: 18px; font-weight: 700; line-height: 1.3; padding-right: 72px; } .b-card p { font-size: 14px; color: var(--mute); line-height: 1.5; flex: 1; }
.b-go { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: 14px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); font-weight: 700; font-size: 14px; text-decoration: none; transition: background var(--dur-2); }
.b-card .b-go { background: var(--t); color: var(--deep); } .b-go:hover { filter: brightness(1.08); } .b-go:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.b-calm { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 24px; border-radius: 22px; background: var(--surface); } .b-calm b { font-size: 18px; } .b-calm span { color: var(--mute); }
.b-line { font: 500 clamp(18px, 2.2vw, 24px)/1.5 var(--f-ui); margin-bottom: var(--sp-4); max-width: 46ch; }
.b-mv { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; }
.b-mv a { display: grid; grid-template-columns: 40px minmax(0, 1fr) 120px; gap: 12px; align-items: center; min-height: 64px; padding: 8px 12px; border-radius: 16px; background: var(--surface); color: inherit; text-decoration: none; }
.b-mv a:hover { background: var(--raise); } .b-mv img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: #fff; padding: 2px; } .b-mv b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .b-mv small { font-size: 12px; font-weight: 700; }
.b-tl { list-style: none; margin: 0; padding: 0; }
.b-tl li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); } .b-tl li:first-child { border-top: 0; }
.b-td { text-align: center; padding: 8px 0; border-radius: 14px; background: var(--surface); } .b-td b { display: block; font: 700 22px/1 var(--f-big); } .b-td small { font: 700 10px var(--f-big); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.b-tl li.k-release .b-td b { color: var(--buy); } .b-tl li.k-event .b-td b { color: var(--fair); } .b-tl li.k-rumour .b-td b { color: var(--wait); }
.b-tl b a { color: inherit; } .b-tl small { display: block; margin-top: 2px; font-size: 13px; color: var(--mute); line-height: 1.45; } .b-tl em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--mute); white-space: nowrap; padding-top: 4px; }
.b-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; color: #FFD27A; font-weight: 600; text-decoration: none; }
@media (max-width: 560px) { .b-mv a { grid-template-columns: 40px minmax(0, 1fr) 84px; } .b-tl li { grid-template-columns: 48px minmax(0, 1fr); } .b-tl em { grid-column: 2; padding: 0; } }

/* ========== 3 · Market ========== */
.m-top { position: relative; isolation: isolate; padding: clamp(18px, 3vw, 32px); border-radius: 28px; background: radial-gradient(60% 70% at 85% 0%, color-mix(in srgb, var(--v) 16%, transparent), transparent 70%), linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 60%, var(--deep))); box-shadow: inset 0 0 0 1px var(--line); }
.m-eye { font: 700 11px var(--f-big); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.m-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-5); flex-wrap: wrap; margin-top: 10px; }
.m-title { font: 700 clamp(22px, 3vw, 30px) var(--f-big); letter-spacing: -.03em; }
.m-read { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .m-read b { font: 700 clamp(56px, 9vw, 96px)/.9 var(--f-big); letter-spacing: -.055em; } .m-read span { font-size: 15px; color: var(--mute); } .m-read em { font-style: normal; font-weight: 700; }
.m-breadth { width: min(100%, 360px); } .m-bar { display: flex; gap: 3px; height: 14px; border-radius: 99px; overflow: hidden; }
.m-bar i { display: block; min-width: 4px; } .m-bar .u { background: var(--buy); } .m-bar .f { background: color-mix(in srgb, var(--text) 22%, transparent); } .m-bar .d { background: #FF8A7A; }
.rv .m-bar i { transform: scaleX(0); transform-origin: left; } .rv.in .m-bar i { transform: none; transition: transform .9s var(--ease-out) .2s; }
.m-breadth p { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; color: var(--mute); } .m-breadth p b { display: block; font: 700 22px var(--f-big); color: var(--text); } .m-breadth p .up b { color: var(--buy); } .m-breadth p .dn b { color: #FF8A7A; } .m-breadth small { font-size: 12px; color: var(--faint); }
.m-plot { height: 280px; margin-top: var(--sp-5); } .m-top .ranges { justify-content: flex-start; }
.m-map { position: relative; aspect-ratio: 16 / 8; border-radius: 20px; overflow: hidden; background: var(--deep); }
.m-tile { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; padding: 10px 12px; background: var(--h); box-shadow: inset 0 0 0 1.5px var(--deep); color: var(--text); text-decoration: none; overflow: hidden; transition: filter var(--dur-2); }
.m-tile:hover { filter: brightness(1.15); z-index: 2; } .m-tile:focus-visible { outline: 2px solid var(--text); outline-offset: -3px; z-index: 3; }
.m-tile b { font-size: clamp(11px, 1.3vw, 15px); font-weight: 700; line-height: 1.2; text-shadow: 0 1px 8px #0006; } .m-tile span { font: 700 clamp(12px, 1.6vw, 20px) var(--f-big); letter-spacing: -.02em; }
.m-tile.tiny { padding: 6px; } .m-tile.tiny span { display: none; } .m-tile.tiny b { font-size: 10px; }
.rv .m-tile { opacity: 0; transform: scale(.94); } .rv.in .m-tile { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.m-scale { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--mute); } .m-scale i { flex: 0 1 200px; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #FF8A7A, var(--surface), var(--buy)); }
.m-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); } .m-h3 { margin-bottom: 8px; font: 700 13px var(--f-big); letter-spacing: .04em; text-transform: uppercase; }
.m-list { list-style: none; margin: 0; padding: 4px 12px; border-radius: var(--r); background: var(--surface); } .m-list li + li { border-top: 1px solid var(--line); }
.m-list a { display: grid; grid-template-columns: 40px minmax(0, 1fr) 84px 64px; gap: 12px; align-items: center; min-height: 60px; color: inherit; text-decoration: none; }
.m-list img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: #fff; padding: 2px; } .m-list b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .m-list small { font-size: 12px; color: var(--mute); } .m-list a > b.num { text-align: right; font: 700 15px var(--f-big); }
.m-none { padding: 18px 0; color: var(--mute); font-size: 14px; }
.m-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .m-vs > div { padding: 18px; border-radius: 20px; background: var(--surface); }
.m-vs small { font-size: 12px; font-weight: 600; color: var(--mute); } .m-vs b { display: block; margin: 4px 0; font: 700 40px var(--f-big); letter-spacing: -.04em; } .m-vs span { font-size: 12px; color: var(--faint); } .m-vs p { grid-column: 1 / -1; color: var(--mute); }
@media (max-width: 760px) { .m-map { aspect-ratio: 3 / 4; } .m-two { grid-template-columns: 1fr; } .m-plot { height: 220px; } .m-list a { grid-template-columns: 40px minmax(0, 1fr) 56px; } .m-list .m-sp { display: none; } }

/* ========== 4 · Collection ========== */
.c-h { margin-bottom: var(--sp-4); font: 700 20px var(--f-big); letter-spacing: -.02em; }
.c-dg { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.c-deal { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 84px; padding: 12px 16px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: inherit; text-decoration: none; transition: transform var(--dur-2) var(--ease-out); }
.c-deal:hover { transform: translateY(-2px); } .c-deal:focus-visible { outline: 2px solid var(--text); }
.c-deal img { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; background: #fff; padding: 3px; } .c-deal small { display: block; font: 700 10px var(--f-big); letter-spacing: .08em; text-transform: uppercase; color: var(--buy); }
.c-deal b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .c-deal em { font-style: normal; font-size: 13px; color: var(--mute); } .c-deal svg { color: var(--mute); }
.c-deal.next small { color: var(--wait); } .c-deal.quiet small { color: var(--mute); }
.c-days { width: 56px; text-align: center; } .c-days b { display: block; font: 700 28px/1 var(--f-big); color: var(--wait); } .c-days small { color: var(--mute) !important; }
.c-mv { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.c-mv a { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 76px; padding: 10px 14px; border-radius: 18px; background: var(--surface); color: inherit; text-decoration: none; }
.c-mv a:hover { background: var(--raise); } .c-mv img { width: 48px; height: 60px; object-fit: contain; border-radius: 6px; } .c-mv img.box { height: 48px; background: #fff; padding: 2px; }
.c-mv b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .c-mv span small { font-size: 12px; color: var(--mute); } .c-mv em { font: 700 15px var(--f-big); font-style: normal; text-align: right; } .c-mv em small { display: block; font: 500 11px var(--f-ui); color: var(--faint); }
.c-rings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.c-rings a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px; border-radius: 20px; background: var(--surface); color: inherit; text-decoration: none; text-align: center; } .c-rings a:hover { background: var(--raise); }
.c-ring { position: relative; width: 84px; height: 84px; display: grid; place-items: center; } .c-ring svg { position: absolute; inset: 0; } .c-ring b { font: 700 18px var(--f-big); }
.c-ring .t { fill: none; stroke: color-mix(in srgb, var(--text) 10%, transparent); stroke-width: 7; } .c-ring .f { fill: none; stroke: var(--buy); stroke-width: 7; stroke-linecap: round; }
.rv .c-ring .f { stroke-dashoffset: 220; } .rv.in .c-ring .f { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease-out) .2s; }
.c-rings b { font-size: 14px; } .c-rings small { font-size: 12px; color: var(--mute); }
.c-chase { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.c-chase a { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; }
.c-chase img { width: 100%; height: auto; aspect-ratio: 200 / 279; border-radius: 10px; box-shadow: 0 18px 36px -18px #000; transition: transform var(--dur-3) var(--ease-out); } .c-chase a:hover img { transform: translateY(-6px) rotate(-1.5deg); }
.c-chase a:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 12px; }
.c-chase b { display: block; font-size: 14px; font-weight: 600; } .c-chase small { display: block; font-size: 12px; color: var(--mute); } .c-chase em { font: 700 16px var(--f-big); font-style: normal; color: #FFD27A; }

/* less motion: everything lands still */
@media (prefers-reduced-motion: reduce) {
  .l-art img, .l-ring, .l-live i, .l-line .l-dot { animation: none !important; }
  .l-ring { display: none; } .l-run { animation: none; flex-wrap: wrap; width: auto; } .l-dup { display: none; } .l-track { -webkit-mask-image: none; mask-image: none; }
  .rv .m-tile, .rv .m-bar i { opacity: 1; transform: none; }
}
.m-era { padding: 0; } .m-era button { min-height: 44px; }

/* ========== 5 · Live 2 ========== */
.h5v .t-buy { --t: var(--buy); } .h5v .t-bad { --t: #FF8A7A; } .h5v .t-wait { --t: var(--wait); } .h5v .t-fair { --t: var(--fair); }
.v-opts { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-bottom: 10px; }
.v-opts span { margin-right: 6px; font: 700 10px var(--f-big); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.v-opts button, .v-opt button { all: unset; box-sizing: border-box; cursor: pointer; min-height: 44px; padding: 0 14px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--mute); }
.v-opts button[aria-pressed=true], .v-opt button[aria-pressed=true] { background: var(--text); color: var(--deep); } .v-opts button:focus-visible, .v-opt button:focus-visible { box-shadow: 0 0 0 2px var(--text); }
/* shared bits of both heroes */
.v-bg { position: absolute; inset: -25%; z-index: -2; background-size: cover; background-position: center; filter: blur(70px) saturate(1.7); opacity: .5; }
.v-eye { display: inline-flex; align-items: center; gap: 9px; font: 700 11px var(--f-big); letter-spacing: .1em; text-transform: uppercase; color: var(--t); }
.v-live { width: 10px; height: 10px; border-radius: 50%; background: var(--t); animation: l-beat 1.6s ease-out infinite; }
.v-title { font: 700 clamp(24px, 4vw, 44px)/1.05 var(--f-big); letter-spacing: -.03em; text-wrap: balance; }
.v-big { font: 700 clamp(44px, 8vw, 84px)/.92 var(--f-big); letter-spacing: -.05em; color: var(--t); }
.v-sub { font-size: 15px; line-height: 1.5; color: color-mix(in srgb, var(--text) 75%, var(--mute)); max-width: 52ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.v-go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; align-self: flex-start; min-height: 52px; padding: 0 22px; border-radius: 16px; background: var(--t); color: var(--deep); font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 14px 34px -14px var(--t); transition: filter var(--dur-2), transform var(--dur-1); }
.v-go:hover { filter: brightness(1.08); } .v-go:active { transform: scale(.97); } .v-go:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; } .v-go.sm { min-height: 44px; padding: 0 16px; font-size: 14px; }
.v-clock { display: flex; gap: 8px; } .v-clock > span { min-width: 64px; padding: 10px 6px; text-align: center; border-radius: 14px; background: color-mix(in srgb, var(--deep) 55%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); }
.v-clock b { display: block; font: 700 clamp(26px, 4.5vw, 44px)/1 var(--f-big); letter-spacing: -.04em; } .v-clock small { font: 700 10px var(--f-big); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.takeover { animation: v-glow 2.6s ease-in-out infinite; }
@keyframes v-glow { 0%, 100% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--buy) 55%, transparent), 0 0 0 0 transparent; } 50% { box-shadow: inset 0 0 0 2px var(--buy), 0 0 70px -12px color-mix(in srgb, var(--buy) 70%, transparent); } }
/* hero 1: stories */
.v-st { position: relative; isolation: isolate; height: clamp(500px, 72vh, 580px); border-radius: 28px; overflow: hidden; background: var(--surface); }
.v-bars { position: absolute; z-index: 4; top: 14px; left: 16px; right: 16px; display: flex; gap: 5px; }
.v-bars i { flex: 1; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--text) 22%, transparent); overflow: hidden; } .v-bars b { display: block; height: 100%; width: 0; background: var(--text); border-radius: inherit; }
.v-bars i.done b { width: 100%; } .v-bars i.run b { animation: v-fill var(--dur) linear forwards; } .v-bars i.hold b { animation-play-state: paused; }
.v-bars i.now:not(.run) b { width: 100%; opacity: .55; animation: none; }
@keyframes v-fill { to { width: 100%; } }
.v-stage { position: absolute; inset: 0; outline: none; cursor: pointer; touch-action: pan-y; } .v-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--text); border-radius: 28px; }
.v-slide { position: absolute; inset: 0; isolation: isolate; overflow: hidden; opacity: 0; visibility: hidden; transform: scale(1.03); transition: opacity .55s var(--ease-out), transform .8s var(--ease-out), visibility 0s linear .55s; }
.v-slide.on { opacity: 1; visibility: visible; transform: none; transition: opacity .55s var(--ease-out), transform .8s var(--ease-out), visibility 0s; z-index: 1; }
.v-slide::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 70% 35%, color-mix(in srgb, var(--t) 22%, transparent), transparent 70%), linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--deep) 85%, transparent) 78%); }
.v-art { position: absolute; z-index: 0; left: 0; right: 0; top: 46px; height: 42%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.v-pic { max-height: 100%; max-width: 62%; object-fit: contain; filter: drop-shadow(0 30px 40px #000c); animation: l-float 7s ease-in-out infinite; }
.v-art.box .v-pic { background: #fff; padding: 12px; border-radius: 22px; max-height: 92%; aspect-ratio: 1; }
.v-art.tcard .v-pic { border-radius: 14px; aspect-ratio: 200 / 279; } .v-art:has(.v-logo) .v-pic { display: none; }
.v-logo { max-width: 70%; max-height: 60%; object-fit: contain; filter: drop-shadow(0 12px 30px #000a); animation: l-float 7s ease-in-out infinite; }
.v-copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; }
.v-st .v-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 22px 26px; }
.v-spark { width: min(100%, 320px); height: 56px; } .v-spark svg { height: 56px; }
.v-ctl { position: absolute; z-index: 5; top: 28px; right: 12px; display: flex; gap: 4px; }
.v-b { all: unset; box-sizing: border-box; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--text); background: color-mix(in srgb, var(--deep) 45%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.v-b:hover { background: color-mix(in srgb, var(--deep) 70%, transparent); } .v-b:focus-visible { box-shadow: 0 0 0 2px var(--text); }
@media (min-width: 861px) {
  .v-st { height: 460px; }
  .v-art { left: auto; right: 4%; top: 40px; bottom: 30px; height: auto; width: 44%; } .v-pic { max-width: 80%; }
  .v-st .v-copy { top: 0; bottom: 0; right: auto; width: 54%; justify-content: center; padding: 48px 40px; }
  .v-slide::after { background: radial-gradient(50% 70% at 75% 50%, color-mix(in srgb, var(--t) 24%, transparent), transparent 70%), linear-gradient(90deg, color-mix(in srgb, var(--deep) 80%, transparent) 30%, transparent 70%); }
  .v-ctl { top: auto; bottom: 18px; right: 18px; }
}
/* hero 2: holo */
.v-holo { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: var(--sp-6); padding: clamp(20px, 4vw, 44px); border-radius: 28px; background: var(--surface); }
.v-holo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 25% 50%, color-mix(in srgb, var(--t) 22%, transparent), transparent 70%), linear-gradient(90deg, transparent 40%, color-mix(in srgb, var(--deep) 70%, transparent)); }
.v-hc { --mx: 50%; --my: 30%; --rx: 0deg; --ry: 0deg; display: grid; place-items: center; perspective: 1100px; touch-action: pan-y; }
.v-hc-in { position: relative; width: min(260px, 70vw); aspect-ratio: 200 / 279; border-radius: 16px; overflow: hidden; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s var(--ease-out); box-shadow: 0 40px 70px -24px #000d, 0 0 0 1px #fff3; }
.v-hc.box .v-hc-in { aspect-ratio: 1; background: #fff; } .v-hc.box img { object-fit: contain; padding: 14px; box-sizing: border-box; }
.v-hc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-shine { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, #ff7eb3 0%, #ffd27a 8%, #7af0c8 16%, #7ab8ff 24%, #c79bff 32%, #ff7eb3 40%); background-size: 260% 260%; background-position: var(--mx) var(--my); mix-blend-mode: color-dodge; opacity: .32; animation: v-holo 7s linear infinite; }
.v-hc.box .v-shine { opacity: .18; } .v-hc.live .v-shine { animation: none; opacity: .5; }
.v-glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.6), transparent 42%); mix-blend-mode: overlay; }
@keyframes v-holo { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.v-more { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.v-more a { display: flex; flex-direction: column; gap: 2px; min-height: 56px; justify-content: center; padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, var(--deep) 50%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); text-decoration: none; }
.v-more a:hover { background: color-mix(in srgb, var(--deep) 75%, transparent); } .v-more a:focus-visible { outline: 2px solid var(--text); }
.v-more small { font: 700 9.5px var(--f-big); letter-spacing: .08em; text-transform: uppercase; color: var(--t); } .v-more b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) {
  .v-holo { grid-template-columns: 1fr; gap: 18px; text-align: left; padding-top: 24px; } .v-hc-in { width: min(190px, 52vw); } .v-hc.box .v-hc-in { width: min(200px, 56vw); }
  .v-holo .v-go { align-self: stretch; }
}
/* today strip, collection line, restock pulse */
.v-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.v-t { display: flex; flex-direction: column; gap: 2px; min-height: 84px; justify-content: center; padding: 12px 14px; border-radius: 18px; background: var(--surface); color: var(--text); text-decoration: none; transition: background var(--dur-2); }
.v-t:hover { background: var(--raise); } .v-t:focus-visible { outline: 2px solid var(--text); }
.v-t b { font: 700 30px/1 var(--f-big); letter-spacing: -.04em; } .v-t.buy b { color: var(--buy); } .v-t.wait b { color: var(--wait); } .v-t.zero b { color: var(--faint); } .v-t span { font-size: 12.5px; color: var(--mute); line-height: 1.3; }
.v-coll, .v-pulse { display: flex; align-items: center; gap: 12px; min-height: 52px; margin-top: 8px; padding: 0 16px; border-radius: 16px; background: var(--surface); color: var(--text); text-decoration: none; transition: background var(--dur-2); }
.v-coll:hover, .v-pulse:hover { background: var(--raise); } .v-coll:focus-visible, .v-pulse:focus-visible { outline: 2px solid var(--text); }
.v-coll span { font-size: 13px; color: var(--mute); } .v-coll b { font: 700 17px var(--f-big); } .v-coll em { font-style: normal; font-weight: 700; font-size: 13px; } .v-coll svg, .v-pulse svg { margin-left: auto; color: var(--mute); flex: none; }
.v-pulse { font-size: 14px; color: var(--mute); } .v-pulse b { color: var(--text); } .v-pulse span { min-width: 0; }
.v-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--wait); }
.v-pulse.hot { background: color-mix(in srgb, var(--buy) 12%, var(--surface)); } .v-pulse.hot .v-dot { --t: var(--buy); background: var(--buy); animation: l-beat 1.4s ease-out infinite; }
@media (max-width: 640px) { .v-strip { grid-template-columns: 1fr 1fr; } .v-t { min-height: 76px; } .v-t b { font-size: 26px; } }
/* movers: rail, race, podium */
.v-opt { padding: 0; }
.v-h3 { margin: 16px 0 8px; font: 700 12px var(--f-big); letter-spacing: .06em; text-transform: uppercase; } .v-h3:first-of-type { margin-top: 0; }
.v-rail { list-style: none; margin: 0; padding: 2px 2px 10px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.v-rail li { flex: none; width: 196px; scroll-snap-align: start; }
.v-rc { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 220px; padding: 14px; border-radius: 20px; overflow: hidden; background: var(--surface); color: var(--text); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: transform var(--dur-2) var(--ease-out); }
.v-rc:hover { transform: translateY(-3px); } .v-rc:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.v-rs { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 90px; opacity: .55; } .v-rs svg { width: 100%; height: 90px; }
.v-rc img, .v-race img, .v-pod img, .v-dl img { object-fit: contain; border-radius: 10px; background: #fff; padding: 3px; box-sizing: border-box; }
.v-rp { font: 700 26px/1 var(--f-big); letter-spacing: -.03em; margin-top: 6px; } .v-rc.up .v-rp { color: var(--buy); } .v-rc.dn .v-rp { color: #FF8A7A; }
.v-rn { font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .v-rc small, .v-pod small { font-size: 12px; color: var(--mute); }
.v-race { list-style: none; margin: 0; padding: 4px 12px; border-radius: var(--r); background: var(--surface); }
.v-race li + li { border-top: 1px solid var(--line); }
.v-race a { display: grid; grid-template-columns: 36px minmax(0, 200px) minmax(0, 1fr) 64px; gap: 12px; align-items: center; min-height: 56px; color: inherit; text-decoration: none; }
.v-race .v-rn { -webkit-line-clamp: 1; } .v-race b { text-align: right; font: 700 14px var(--f-big); } .v-race .up b { color: var(--buy); } .v-race .dn b { color: #FF8A7A; }
.v-track { position: relative; height: 14px; } .v-track::before { content: ""; position: absolute; left: 50%; top: -6px; bottom: -6px; width: 1px; background: var(--line); }
.v-track i { position: absolute; top: 0; bottom: 0; width: calc(var(--f) * 50%); border-radius: 99px; } .up .v-track i { left: 50%; background: linear-gradient(90deg, color-mix(in srgb, var(--buy) 40%, transparent), var(--buy)); transform-origin: left; } .dn .v-track i { right: 50%; background: linear-gradient(270deg, color-mix(in srgb, #FF8A7A 40%, transparent), #FF8A7A); transform-origin: right; }
.rv .v-track i { transform: scaleX(0); } .rv.in .v-track i { transform: none; transition: transform 1s var(--ease-out) .15s; }
.v-pod { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.v-pod a { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; height: 100%; padding: 18px 12px 16px; border-radius: 22px; background: var(--surface); color: var(--text); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); }
.v-pod a:hover { background: var(--raise); } .v-pod a:focus-visible { outline: 2px solid var(--text); }
.v-pod b { font: 700 24px var(--f-big); letter-spacing: -.03em; } .v-pod.up b { color: var(--buy); } .v-pod.dn b { color: #FF8A7A; }
.v-medal { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font: 700 13px var(--f-big); color: var(--deep); }
.v-medal.m1 { background: linear-gradient(135deg, #FFE7A1, #E8B84B); } .v-medal.m2 { background: linear-gradient(135deg, #F2F5F7, #A9B4BC); } .v-medal.m3 { background: linear-gradient(135deg, #F3C49B, #B87A4B); }
.v-more-l { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; color: #FFD27A; font-weight: 600; text-decoration: none; }
@media (max-width: 640px) { .v-race a { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "i n p" "i t t"; row-gap: 6px; padding: 8px 0; } .v-race img { grid-area: i; } .v-race .v-rn { grid-area: n; } .v-race b { grid-area: p; } .v-race .v-track { grid-area: t; } .v-pod { gap: 6px; } .v-pod a { padding: 34px 6px 12px; } .v-pod img { width: 64px; height: 64px; } .v-pod b { font-size: 17px; } .v-pod .v-rn { font-size: 12px; } }
/* deals, drops, pre-orders */
.v-deals { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.v-dh { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .v-dh svg { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--raise); box-sizing: border-box; }
.v-dh b { display: block; font: 700 15px var(--f-ui); } .v-dh small { font-size: 12px; color: var(--mute); }
.v-dl { list-style: none; margin: 0; padding: 4px 12px; border-radius: var(--r); background: var(--surface); } .v-dl li + li { border-top: 1px solid var(--line); }
.v-dl a { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 64px; color: inherit; text-decoration: none; }
.v-dl a:focus-visible { outline: 2px solid var(--text); }
.v-dl b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v-dl small { font-size: 12px; color: var(--mute); }
.v-badge { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font: 700 12px var(--f-big); padding: 6px 9px; border-radius: 9px; background: var(--raise); color: var(--mute); white-space: nowrap; }
.v-badge.buy { background: color-mix(in srgb, var(--buy) 16%, transparent); color: var(--buy); } .v-badge.fair { background: color-mix(in srgb, var(--fair) 16%, transparent); color: var(--fair); } .v-badge svg { width: 14px; height: 14px; }
.v-none { padding: 18px; border-radius: var(--r); background: var(--surface); color: var(--mute); font-size: 14px; }
.v-drops { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.v-drops a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 18px; border-radius: 22px; background: radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--wait) 14%, transparent), transparent 70%), var(--surface); color: inherit; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); }
.v-drops a:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wait) 40%, var(--line)); } .v-drops a:focus-visible { outline: 2px solid var(--text); }
.v-dlogo { height: 46px; width: auto; max-width: 70%; object-fit: contain; object-position: left; } .v-dn { font-size: 15px; font-weight: 700; } .v-drops small { font-size: 12px; color: var(--mute); }
.v-drops .v-clock > span { min-width: 52px; padding: 8px 4px; } .v-drops .v-clock b { font-size: 24px; }
@media (max-width: 760px) { .v-deals { grid-template-columns: 1fr; } }
/* chase card and market mood */
.v-two { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-6); align-items: start; } .v-two .w-sec { min-width: 0; }
.v-chc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px; border-radius: 24px; background: var(--surface); color: inherit; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); }
.v-chc:focus-visible { outline: 2px solid var(--text); } .v-hc.small .v-hc-in { width: clamp(120px, 14vw, 170px); }
.v-chi { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .v-chi b { font: 700 20px var(--f-big); letter-spacing: -.02em; } .v-chi small { font-size: 13px; color: var(--mute); } .v-chi em { font: 700 30px var(--f-big); font-style: normal; color: #FFD27A; }
.v-chi .v-go { --t: var(--text); margin-top: 4px; }
.v-gauge { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; border-radius: 24px; background: var(--surface); text-align: center; } .v-gauge svg { width: min(100%, 260px); }
.v-needle { transform-origin: 100px 100px; transform: rotate(var(--a)); transition: transform 1.2s var(--ease-out); } .rv .v-needle { transform: rotate(-90deg); } .rv.in .v-needle { transform: rotate(var(--a)); }
.v-gauge b { font: 700 24px var(--f-big); letter-spacing: -.02em; } .v-gauge small { font-size: 13px; color: var(--mute); }
@media (max-width: 860px) { .v-two { grid-template-columns: 1fr; gap: 0; } }
@media (max-width: 420px) { .v-chc { grid-template-columns: 1fr; justify-items: center; text-align: center; } .v-chi { align-items: center; } }
@media (prefers-reduced-motion: reduce) { .v-pic, .v-logo, .v-shine, .v-live, .takeover, .v-pulse.hot .v-dot { animation: none !important; } .v-slide { transition: none; } .v-hc-in { transform: none !important; } .rv .v-needle, .rv .v-track i { transform: none; } }

/* ---------- sealed images without the white box: each product on a soft spotlight that fades into the page ---------- */
.cut { --s: 56px; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); }
.cut::before { content: ""; position: absolute; inset: -6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(236, 246, 243, .95) 0%, rgba(236, 246, 243, .85) 42%, rgba(236, 246, 243, .28) 66%, transparent 78%); }
.cut img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: contain; background: none !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  -webkit-mask-image: radial-gradient(closest-side, #000 64%, rgba(0,0,0,.6) 78%, transparent 100%); mask-image: radial-gradient(closest-side, #000 64%, rgba(0,0,0,.6) 78%, transparent 100%); }

/* ---------- stories: more light and motion ---------- */
.v-aur { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.v-aur i { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--t) 55%, transparent), transparent 70%); filter: blur(30px); opacity: .55; animation: v-drift 14s ease-in-out infinite alternate; }
.v-aur i:nth-child(1) { left: -20%; top: -25%; } .v-aur i:nth-child(2) { right: -25%; top: 10%; animation-delay: -5s; background: radial-gradient(closest-side, color-mix(in srgb, var(--fair) 45%, transparent), transparent 70%); }
.v-aur i:nth-child(3) { left: 20%; bottom: -40%; animation-delay: -9s; background: radial-gradient(closest-side, color-mix(in srgb, #C79BFF 40%, transparent), transparent 70%); }
@keyframes v-drift { 50% { transform: translate(12%, 8%) scale(1.15); } 100% { transform: translate(-8%, 14%) scale(.95); } }
.v-spk { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.v-spk i { position: absolute; left: var(--x); top: var(--y); width: 8px; height: 8px; transform: scale(var(--z)); background: radial-gradient(closest-side, #fff, transparent); opacity: 0; animation: v-tw 2.8s ease-in-out var(--d) infinite; }
.v-spk i::before, .v-spk i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 1.5px; background: linear-gradient(90deg, transparent, #fff, transparent); transform: translate(-50%, -50%); }
.v-spk i::after { transform: translate(-50%, -50%) rotate(90deg); }
@keyframes v-tw { 0%, 100% { opacity: 0; transform: scale(calc(var(--z) * .4)) rotate(0); } 45% { opacity: .95; transform: scale(var(--z)) rotate(45deg); } }
.v-slide .v-art { translate: calc(var(--px, 0) * -22px) calc(var(--py, 0) * -14px); transition: translate .6s var(--ease-out); }
.v-slide .v-bg { translate: calc(var(--px, 0) * 16px) calc(var(--py, 0) * 10px); transition: translate .8s var(--ease-out); }
.v-slide.on .v-art { animation: v-kb 7.5s var(--ease-out) both; }
@keyframes v-kb { from { scale: .9; opacity: .3; } 18% { opacity: 1; } to { scale: 1.05; } }
.v-slide .v-copy > * { opacity: 0; transform: translateY(16px); }
.v-slide.on .v-copy > * { opacity: 1; transform: none; transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.v-slide.on .v-copy > :nth-child(2) { transition-delay: .08s; } .v-slide.on .v-copy > :nth-child(3) { transition-delay: .16s; } .v-slide.on .v-copy > :nth-child(4) { transition-delay: .24s; } .v-slide.on .v-copy > :nth-child(5) { transition-delay: .32s; } .v-slide.on .v-copy > :nth-child(6) { transition-delay: .4s; }
.v-bars b { box-shadow: 0 0 10px color-mix(in srgb, var(--text) 70%, transparent); }
/* the box: big, on its spotlight; the card: cropped to the card (no black square behind it), with the holo foil */
.v-st .v-art.box .cut.v-pic { --s: min(230px, 30vh); background: none; padding: 0; aspect-ratio: 1; max-width: none; max-height: none; filter: drop-shadow(0 24px 40px #0009); }
.v-cardw { position: relative; height: 100%; max-height: 100%; aspect-ratio: 200 / 279; border-radius: 14px; overflow: hidden; box-shadow: 0 34px 60px -20px #000d, 0 0 0 1px #fff3; animation: l-float 7s ease-in-out infinite; }
.v-cardw .v-pic { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; aspect-ratio: auto; border-radius: 0; animation: none; filter: none; }
.v-cardw .v-shine { animation-duration: 5s; opacity: .38; }
@media (min-width: 861px) { .v-st .v-art.box .cut.v-pic { --s: 340px; } .v-cardw { height: 92%; } }
/* the holo hero's box: on the spotlight too */
.v-hc.box .v-hc-in { background: radial-gradient(closest-side, rgba(236, 246, 243, .95) 30%, rgba(236, 246, 243, .55) 62%, transparent 82%); box-shadow: none; overflow: visible; }
.v-hc.box img { -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }
.v-hc.box .v-shine, .v-hc.box .v-glare { border-radius: 50%; }
/* lists, rails and podium: the spotlight replaces the white tile */
.v-rc .cut, .v-pod .cut { margin: 0 auto 0 0; } .v-pod .cut { margin: 0 auto; }

/* ---------- drops: what kind of drop ---------- */
.v-dk { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; font: 700 10px var(--f-big); letter-spacing: .06em; text-transform: uppercase; background: color-mix(in srgb, var(--k) 16%, transparent); color: var(--k); }
.v-dk.t-buy { --k: var(--buy); } .v-dk.t-fair { --k: var(--fair); } .v-dk.t-wait { --k: var(--wait); } .v-dk.t-event { --k: #C79BFF; } .v-dk.t-x { --k: var(--mute); }
.v-key { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.v-pt { font: 700 10px var(--f-big); letter-spacing: .06em; text-transform: uppercase; color: var(--fair); margin-right: 6px; }
.v-pre a { grid-template-columns: 48px minmax(0, 1fr) auto auto; }
@media (max-width: 520px) { .v-pre .v-pt { display: none; } }

/* ---------- news ---------- */
.v-ng { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
.v-ni { position: relative; display: block; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--fair) 30%, var(--surface)), color-mix(in srgb, #C79BFF 25%, var(--surface))); }
.v-ni img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.v-nl { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; border-radius: 24px; overflow: hidden; color: var(--text); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); }
.v-nl .v-ni { position: absolute; inset: 0; z-index: -2; } .v-nl::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 25%, color-mix(in srgb, var(--deep) 92%, transparent) 82%); }
.v-nl:hover .v-ni img, .v-nr a:hover .v-ni img { transform: scale(1.05); } .v-nl:focus-visible, .v-nr a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.v-nl .v-nb { display: flex; flex-direction: column; gap: 10px; padding: 22px; } .v-nl b { font: 700 clamp(20px, 2.4vw, 26px)/1.2 var(--f-big); letter-spacing: -.02em; text-wrap: balance; }
.v-nm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--mute); }
.v-nt { font: 700 10px var(--f-big); letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 99px; background: color-mix(in srgb, var(--fair) 20%, transparent); color: var(--fair); }
.v-ext { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #FFD27A; }
.v-nr { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.v-nr a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 80px; padding: 8px; border-radius: 18px; background: var(--surface); color: inherit; text-decoration: none; }
.v-nr a:hover { background: var(--raise); } .v-nr .v-ni { width: 112px; height: 72px; border-radius: 12px; }
.v-nr .v-nb { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .v-nr b { font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 860px) { .v-ng { grid-template-columns: 1fr; } .v-nl { min-height: 280px; } .v-nr a { grid-template-columns: 96px minmax(0, 1fr); } .v-nr .v-ni { width: 96px; height: 64px; } }

/* ---------- chase and hottest cards: a rail of holo cards ---------- */
.v-ccr { list-style: none; margin: 0; padding: 4px 2px 14px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.v-ccr li { flex: none; width: 176px; scroll-snap-align: start; }
.v-cc { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; } .v-cc:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 16px; }
.v-cc .v-hc { margin-bottom: 6px; } .v-cc .v-hc-in { width: 100%; }
.v-cc b { font-size: 14px; font-weight: 600; line-height: 1.3; } .v-cc small { font-size: 12px; color: var(--mute); } .v-cc em { font: 700 18px var(--f-big); font-style: normal; color: #FFD27A; } .v-cc .v-badge { align-self: flex-start; }

/* ---------- more: the pages behind Home ---------- */
.v-sg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v-sc { position: relative; overflow: hidden; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 92px; padding: 16px 18px; border-radius: 22px; background: var(--surface); color: var(--text); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: transform var(--dur-2) var(--ease-out); }
.v-sc:hover { transform: translateY(-2px); } .v-sc:focus-visible { outline: 2px solid var(--text); }
.v-sc.live { background: radial-gradient(70% 90% at 0% 50%, color-mix(in srgb, #FF6B6B 18%, transparent), transparent 70%), var(--surface); }
.v-si { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--raise); } .v-sc.live .v-si { color: #FF8A7A; } .v-sc.live .v-si svg { animation: l-beat 1.8s ease-out infinite; border-radius: 50%; --t: #FF8A7A; }
.v-sc b { display: block; font: 700 16px var(--f-big); letter-spacing: -.01em; } .v-sc small { font-size: 13px; color: var(--mute); } .v-sc > svg { color: var(--mute); }
@media (max-width: 640px) { .v-sg { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .v-aur i, .v-spk i, .v-cardw, .v-slide.on .v-art, .v-sc.live .v-si svg { animation: none !important; } .v-spk { display: none; } .v-slide .v-copy > * { opacity: 1; transform: none; } }
.v-st .v-art .cut.v-pic { animation: l-float 7s ease-in-out infinite; }

/* ========== News (news.html) ========== */
.ns-top h1, .lv-top h1 { font: 700 clamp(30px, 5vw, 48px)/1.05 var(--f-big); letter-spacing: -.035em; } .ns-top p, .lv-top > p:last-child { margin-top: 8px; color: var(--mute); max-width: 60ch; }
.ns-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; margin-top: var(--sp-4); padding-top: 8px; padding-bottom: 8px; }
.ns-bar .chips { display: flex; gap: 6px; flex-wrap: wrap; } .ns-bar .chip { min-height: 44px; } .ns-tcg[aria-pressed=true] { background: color-mix(in srgb, var(--buy) 16%, transparent); color: var(--buy); }
.ns-grid { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ns-grid a { display: flex; flex-direction: column; height: 100%; border-radius: 22px; overflow: hidden; background: var(--surface); color: inherit; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: transform var(--dur-2) var(--ease-out); }
.ns-grid a:hover { transform: translateY(-3px); } .ns-grid a:hover .v-ni img { transform: scale(1.05); } .ns-grid a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.ns-grid .v-ni { aspect-ratio: 16 / 9; } .ns-b { display: flex; flex-direction: column; gap: 10px; padding: 16px; flex: 1; } .ns-b b { font-size: 16px; font-weight: 700; line-height: 1.35; flex: 1; }
.ns-grid li.lead { grid-column: 1 / -1; } .ns-grid li.lead a { display: grid; grid-template-columns: 1.3fr 1fr; } .ns-grid li.lead .v-ni { aspect-ratio: auto; min-height: 280px; } .ns-grid li.lead .ns-b { justify-content: center; padding: 28px; } .ns-grid li.lead b { flex: 0; font: 700 clamp(22px, 2.6vw, 30px)/1.2 var(--f-big); letter-spacing: -.02em; }
.ns-foot { margin-top: var(--sp-5); }
@media (max-width: 760px) { .ns-grid li.lead a { grid-template-columns: 1fr; } .ns-grid li.lead .v-ni { min-height: 200px; } .ns-grid li.lead .ns-b { padding: 18px; } }

/* ========== Live on eBay (live.html) ========== */
.lv-top { position: relative; isolation: isolate; } .lv-top::before { content: ""; position: absolute; z-index: -1; inset: -100px -30vw auto -30vw; height: 420px; background: radial-gradient(40% 60% at 25% 40%, color-mix(in srgb, #FF6B6B 16%, transparent), transparent 70%); pointer-events: none; }
.lv-eye { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px; font: 700 11px var(--f-big); letter-spacing: .1em; text-transform: uppercase; color: #FF8A7A; }
.lv-eye i { --t: #FF8A7A; width: 10px; height: 10px; border-radius: 50%; background: #FF8A7A; animation: l-beat 1.4s ease-out infinite; }
.lv-sample { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-3); padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--wait) 12%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wait) 35%, transparent); font-size: 13px; color: var(--mute); }
.lv-sample b { color: var(--wait); font: 700 11px var(--f-big); letter-spacing: .08em; text-transform: uppercase; }
.lv-bar { margin-top: -16px; padding-top: 8px; padding-bottom: 8px; }   /* the page column already spaces sections 32px apart */ .lv-bar .lv-seg { max-width: 420px; margin: 0; }
.lv-row { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: -24px; }
.lv-chips { display: flex; gap: 6px; flex-wrap: wrap; } .lv-chips .chip { min-height: 40px; } .lv-div { width: 1px; height: 24px; background: var(--line); }
@media (pointer: coarse), (max-width: 760px) { .lv-chips .chip { min-height: 44px; } .lv-div { display: none; } .lv-bar .lv-seg { max-width: none; } }

.lv-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: var(--sp-4) 0; }
.lv-strip > div { padding: 12px 14px; border-radius: 16px; background: var(--surface); } .lv-strip b { display: block; font: 700 26px var(--f-big); letter-spacing: -.03em; } .lv-strip span { font-size: 12px; color: var(--mute); }
.lv-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 10px; }
.lv-card { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.lv-list li.urgent .lv-card { box-shadow: inset 0 0 0 1px color-mix(in srgb, #FF8A7A 55%, transparent); }
.lv-cimg { width: 88px; display: block; } .lv-cimg img { width: 100%; aspect-ratio: 200 / 279; object-fit: cover; border-radius: 8px; box-shadow: 0 12px 24px -12px #000; display: block; }
.lv-t { min-width: 0; display: flex; flex-direction: column; gap: 6px; } .lv-t a { color: var(--text); text-decoration: none; } .lv-t a:hover b { text-decoration: underline; } .lv-t a:focus-visible { outline: 2px solid var(--text); }
.lv-t b { font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lv-t small { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 12px; color: var(--mute); }
.lv-tl { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--f-ui); color: var(--mute); font-variant-numeric: tabular-nums; } .lv-tl.hot { color: #FF8A7A; } .lv-tl.hot svg { animation: l-beat 1.2s ease-out infinite; border-radius: 50%; --t: #FF8A7A; }
.lv-p { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; } .lv-p > b { font: 700 20px var(--f-big); letter-spacing: -.02em; } .lv-p small { font-size: 11px; color: var(--faint); }
.lv-go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 12px; background: var(--raise); color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; } .lv-go:hover { filter: brightness(1.12); } .lv-go:focus-visible { outline: 2px solid var(--text); }
.lv-sold { list-style: none; margin: 0; padding: 4px 12px; border-radius: var(--r); background: var(--surface); } .lv-sold li + li { border-top: 1px solid var(--line); }
.lv-sold a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 60px; color: inherit; text-decoration: none; } .lv-sold b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lv-sold small { font-size: 12px; color: var(--mute); } .lv-sold a > b.num { font: 700 15px var(--f-big); }
@media (max-width: 560px) {
  .lv-card { grid-template-columns: 72px minmax(0, 1fr); } .lv-card .cut.lv-img { --s: 72px !important; } .lv-cimg { width: 72px; }
  .lv-p { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; gap: 8px 10px; } .lv-p .lv-go { margin-left: auto; }
  .lv-strip b { font-size: 21px; }
}
.lv-t a { display: flex; align-items: center; min-height: 44px; }

/* Live on eBay and News, one tap from the top of Home */
.v-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .v-top .v-opts { margin: 0; }
.v-quick { display: flex; gap: 8px; }
.v-qb { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 99px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; transition: background var(--dur-2); }
.v-qb:hover { background: var(--raise); } .v-qb:focus-visible { outline: 2px solid var(--text); } .v-qb svg { width: 16px; height: 16px; color: var(--mute); }
.v-qb b { font: 700 11px var(--f-big); padding: 2px 7px; border-radius: 99px; background: color-mix(in srgb, var(--fair) 20%, transparent); color: var(--fair); }
.v-qb.live { background: radial-gradient(90% 140% at 0% 50%, color-mix(in srgb, #FF6B6B 22%, transparent), transparent 70%), var(--surface); }
.v-qb.live i { --t: #FF8A7A; width: 9px; height: 9px; border-radius: 50%; background: #FF8A7A; animation: l-beat 1.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .v-qb.live i { animation: none; } }

/* with cut-out pictures the spotlight isn't needed: the product stands on its own */
.cut::before { display: none; } .cut img { -webkit-mask-image: none !important; mask-image: none !important; }
.v-hc.box .v-hc-in { background: none; } .v-hc.box img { -webkit-mask-image: none; mask-image: none; padding: 0; filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .55)); }
.v-hc.box .v-shine, .v-hc.box .v-glare { display: none; }

/* Home 4: sealed boxes in the fan are cut-outs now, so they stand on their own instead of on a white card */
/* Home, signed out: the sign-up card where your own numbers would be */
.v-join { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: var(--sp-4) 0; padding: 18px 20px; border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--buy) 14%, var(--surface)), var(--surface) 70%); box-shadow: inset 0 0 0 1px var(--line); }
.v-join h2 { font: 700 18px/1.25 var(--f-big); letter-spacing: -.01em; } .v-join p { margin-top: 6px; color: var(--mute); max-width: 46em; line-height: 1.5; }
.v-join-acts { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.v-join-go { all: unset; box-sizing: border-box; cursor: pointer; min-height: 48px; padding: 0 20px; border-radius: 12px; background: var(--buy); color: var(--deep); font-weight: 700; display: inline-flex; align-items: center; }
.v-join-in { all: unset; cursor: pointer; color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; min-height: 40px; display: inline-flex; align-items: center; }
.v-join-go:focus-visible, .v-join-in:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
/* pre-orders: the row's link, then its Remind me button beside it */
.v-pre li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.v-pre a { grid-template-columns: 48px minmax(0, 1fr) auto; }
.v-remind { border: 0; cursor: pointer; min-height: 36px; font: inherit; } .v-remind.on { color: var(--buy); }