@charset "UTF-8";
.nx-card-media img,
.nx-figure img,
.nx-hero-media img {
background-color: var(--lqipc, var(--panel-2, #14161d));
background-image: var(--lqip, none);
background-repeat: no-repeat;
background-position: 50% 45%; 
background-size: cover;
}
.nx-card-media img:not([src]),
.nx-card-media img[src=""] { visibility: hidden; }
.nx-card.has-art .nx-card-media img { background-image: none; }
.nx-card.has-photo .nx-src { opacity: .78; }
@media (prefers-reduced-motion: reduce) {
.nx-card-media img { transition: none; }
}
.nx-credit {
unicode-bidi: isolate;
direction: ltr;
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
gap: .3em;
max-width: 100%;
font: 500 clamp(10px, .72rem, 12px)/1.35 var(--nx-ui, system-ui, sans-serif);
letter-spacing: .01em;
color: #fff;
text-shadow: 0 1px 2px rgb(0 0 0 / .55);
}
.nx-credit-label {
text-transform: uppercase;
letter-spacing: .08em;
font-size: .86em;
font-weight: 700;
opacity: .72;
}
.nx-credit-sep { opacity: .5; }
.nx-credit a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: from-font;
text-underline-offset: .18em;
text-decoration-color: rgb(255 255 255 / .45);
border-radius: 3px;
}
.nx-credit a:hover,
.nx-credit a:focus-visible { text-decoration-color: currentColor; }
.nx-credit a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nx-credit-by { font-weight: 600; }
.nx-credit-lic { font-variant-numeric: tabular-nums; opacity: .9; }
.nx-credit-by,
.nx-credit-src {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 22ch;
}
.nx-credit-lic { flex: 0 0 auto; }
.nx-art-credit {
background: linear-gradient(90deg, rgb(0 0 0 / .58), rgb(0 0 0 / .28));
backdrop-filter: saturate(1.1) blur(2px);
padding: .34em .7em;
border-radius: 999px;
max-width: min(92%, 60ch);
}
.nx-art-credit .nx-credit { text-shadow: none; }
.nx-src {
unicode-bidi: isolate;
direction: ltr;
opacity: .78;
font-weight: 500;
}
.nx-art-hero.has-art .nx-art-credit { display: none; }
@media (prefers-reduced-transparency: reduce) {
.nx-art-credit { backdrop-filter: none; background: rgb(0 0 0 / .7); }
}
@media (max-width: 460px) {
.nx-credit { gap: .25em; }
.nx-credit-label { display: none; } 
.nx-credit-by, .nx-credit-src { max-width: 14ch; }
}
.nx-credit-illus {
unicode-bidi: isolate;
flex: 0 0 auto;
align-self: center;
padding: .16em .52em .2em;
border-radius: 3px;
background: var(--nx-illus-bg, #f6c14b);
color: var(--nx-illus-ink, #1b1300);
font-weight: 800;
font-size: .92em;
line-height: 1.15;
letter-spacing: .04em;
text-transform: uppercase;
text-shadow: none;
white-space: nowrap;
}
.nx-credit-illus:lang(he),
.nx-credit-illus:lang(ar),
.nx-credit-illus:lang(fa),
.nx-credit-illus:lang(ur),
.nx-credit-illus:lang(zh),
.nx-credit-illus:lang(ja),
.nx-credit-illus:lang(ko),
.nx-credit-illus:lang(hi) {
letter-spacing: 0;
text-transform: none;
font-weight: 700;
}
.nx-credit.is-illus .nx-credit-label { opacity: .6; }
.nx-src .nx-illus { font-weight: 700; }
@media (max-width: 460px) {
.nx-credit-illus { display: inline-block; font-size: .95em; }
}
@media (prefers-contrast: more) {
.nx-credit-illus { background: #ffd24a; color: #000; outline: 1px solid #000; }
}
.nx-art-credit:has(.nx-credit.is-illus) {
border-radius: 10px;
background: rgb(0 0 0 / .58);
backdrop-filter: saturate(1.1) blur(3px);
}
.nx-credit.is-illus .nx-credit-by { max-width: 16ch; }
.nx-credit.is-illus .nx-credit-src { max-width: 13ch; }
.nx-artfoot {
display: block;
margin-block-start: clamp(18px, 2.2vw, 30px);
}
.nx-prov {
font-family: var(--f-ui, inherit);
font-size: .8rem;
line-height: 1.6;
color: var(--tx-dim);
margin: 0 0 10px;
max-inline-size: 62ch;
letter-spacing: .005em;
text-wrap: pretty;
}
.nx-prov a {
color: var(--tx-3);
text-decoration: underline;
text-decoration-color: var(--hair-2);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
transition: color .2s var(--ease, ease), text-decoration-color .2s var(--ease, ease);
}
.nx-prov a:hover,
.nx-prov a:focus-visible {
color: var(--tx-2);
text-decoration-color: currentColor;
}
.nx-prov-ai {
margin: 0;
padding-block-start: 14px;
border-block-start: 1px solid var(--hair);
font-size: .78rem;
line-height: 1.55;
color: var(--tx-dim);
text-wrap: pretty;
}
.nx-sources + .nx-artfoot .nx-prov-ai {
border-block-start: 0;
padding-block-start: 12px;
}
@media print {
.nx-prov,
.nx-prov-ai { color: #333; font-size: 8.5pt; }
.nx-prov a { color: #333; text-decoration: none; }
.nx-prov-ai { border-block-start: 1px solid #999; }
}
@media screen and (max-width: 640px) {
.nx-prov { max-inline-size: none; font-size: .78rem; }
}
@media (forced-colors: active) {
.nx-prov-ai { border-block-start: 1px solid CanvasText; }
}
.nx-topicchips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-block: 18px 4px;
}
.nx-topicchip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 13px 6px 10px;
border: 1px solid var(--hair);
border-radius: var(--r-pill);
background: var(--surface-2);
color: var(--tx-2);
font: 600 .78rem/1 var(--f-ui);
letter-spacing: .01em;
text-decoration: none;
white-space: nowrap;
transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
[dir="rtl"] .nx-topicchip { padding: 6px 10px 6px 13px; }
.nx-topicchip-dot {
inline-size: 7px;
block-size: 7px;
border-radius: 50%;
background: var(--sec-2);
box-shadow: 0 0 0 3px hsl(var(--sec) 70% 60% / .16);
flex: none;
}
.nx-topicchip:hover,
.nx-topicchip:focus-visible {
border-color: var(--sec-hair);
background: var(--sec-soft);
color: var(--tx);
}
.nx-topicchip.is-followed {
border-color: var(--sec-hair);
color: var(--sec-1);
}
.nx-topicchip.is-followed .nx-topicchip-dot { background: var(--sec-1); }
.nx-tophead {
position: relative;
padding-block: clamp(26px, 4.4vw, 54px) clamp(18px, 2.4vw, 30px);
overflow: clip;
}
.nx-tophead::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: calc(var(--gut) * -1);
block-size: 100%;
background:
radial-gradient(120% 150% at 0% 0%, hsl(var(--sec) 70% 40% / .20), transparent 62%),
linear-gradient(180deg, hsl(var(--sec) 60% 30% / .10), transparent 78%);
pointer-events: none;
z-index: 0;
}
[dir="rtl"] .nx-tophead::before { background:
radial-gradient(120% 150% at 100% 0%, hsl(var(--sec) 70% 40% / .20), transparent 62%),
linear-gradient(180deg, hsl(var(--sec) 60% 30% / .10), transparent 78%); }
.nx-tophead-in {
position: relative;
z-index: 1;
max-inline-size: 76ch;
}
.nx-tophead-eyebrow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-block-end: 14px;
}
.nx-topictag {
display: inline-flex;
align-items: center;
padding: 5px 11px;
border-radius: var(--r-s);
background: var(--sec-soft);
border: 1px solid var(--sec-hair);
color: var(--sec-1);
font: 700 var(--t-kick)/1 var(--f-ui);
text-transform: uppercase;
letter-spacing: .09em;
}
.nx-topichdesk,
.nx-topichot {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--tx-3);
font: 600 .76rem/1 var(--f-ui);
text-decoration: none;
transition: color .18s var(--ease);
}
.nx-topichdesk:hover { color: var(--tx); }
.nx-topichdesk .nx-i { color: var(--sec-1); }
.nx-topichot {
color: var(--live-hi);
padding-inline-start: 10px;
border-inline-start: 1px solid var(--hair);
}
.nx-topichot:hover { color: var(--live); }
.nx-topichot .nx-i { color: currentColor; }
.nx-tophead-h1 {
margin: 0;
font-family: var(--f-hl);
font-variation-settings: var(--hl-var);
font-weight: var(--hl-weight);
font-size: var(--t-lead);
line-height: var(--hl-lh);
letter-spacing: -.015em;
color: var(--tx);
text-wrap: balance;
}
.nx-tophead-sum {
margin: 16px 0 0;
max-inline-size: 66ch;
font: 400 clamp(1rem, .95rem + .3vw, 1.16rem)/var(--body-lh) var(--f-ui);
color: var(--tx-2);
}
.nx-tophead-dateline {
margin: 14px 0 0;
font: 500 var(--t-meta)/1.5 var(--f-ui);
color: var(--tx-dim);
}
.nx-tophead-acts {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 16px;
margin-block-start: 22px;
}
.nx-follow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border: 1px solid var(--sec-hair);
border-radius: var(--r-pill);
background: var(--sec-soft);
color: var(--sec-1);
font: 700 .84rem/1 var(--f-ui);
cursor: pointer;
transition: background .2s var(--ease), color .2s var(--ease),
border-color .2s var(--ease), transform .2s var(--ease);
}
.nx-follow:hover { background: hsl(var(--sec) 70% 60% / .22); color: var(--tx); }
.nx-follow .nx-i { transition: transform .3s var(--ease-out); }
.nx-follow.is-on {
background: var(--sec-2);
border-color: var(--sec-2);
color: var(--sec-ink);
}
.nx-follow.is-on .nx-i { fill: currentColor; transform: rotate(72deg); }
.nx-follow.is-pop { transform: scale(1.06); }
.nx-follow-hint {
font: 500 var(--t-meta)/1.4 var(--f-ui);
color: var(--tx-dim);
}
.nx-topstats {
display: flex;
flex-wrap: wrap;
gap: 0;
margin: 0 auto;
padding-block: 16px;
border-block: 1px solid var(--hair);
}
.nx-topstat {
flex: 1 1 auto;
min-inline-size: 120px;
padding-inline: 20px;
border-inline-start: 1px solid var(--hair);
}
.nx-topstat:first-child { padding-inline-start: 0; border-inline-start: 0; }
.nx-topstat dt {
margin: 0 0 5px;
font: 700 var(--t-kick)/1 var(--f-ui);
text-transform: uppercase;
letter-spacing: .09em;
color: var(--tx-dim);
}
.nx-topstat dd {
margin: 0;
font: 600 .95rem/1.3 var(--f-ui);
color: var(--tx-2);
}
.nx-topstat.is-lead dd {
font-family: var(--f-num);
font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
font-weight: 800;
line-height: 1;
letter-spacing: -.02em;
color: var(--sec-1);
font-variant-numeric: tabular-nums;
}
.nx-topfeed { margin-block-start: var(--rowgap); }
.nx-topfeed-lead { margin-block-end: clamp(18px, 2.4vw, 34px); }
.nx-timeline-hint {
margin: -6px 0 20px;
font: 500 var(--t-meta)/1.5 var(--f-ui);
color: var(--tx-dim);
}
.nx-timeline-list {
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.nx-timeline-list::before {
content: "";
position: absolute;
inset-block: 12px;
inset-inline-start: clamp(76px, 9vw, 132px);
inline-size: 2px;
background: linear-gradient(180deg, var(--sec-hair), var(--hair) 70%, transparent);
}
.nx-tl-item {
display: grid;
grid-template-columns: clamp(76px, 9vw, 132px) 1fr;
align-items: start;
gap: 0 clamp(18px, 2.4vw, 34px);
padding-block: 14px;
}
.nx-tl-when {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding-block-start: 4px;
padding-inline-end: 2px;
font: 700 var(--t-meta)/1.3 var(--f-num);
color: var(--tx-3);
font-variant-numeric: tabular-nums;
text-align: end;
}
.nx-tl-dot {
position: absolute;
inset-inline-end: -6px;
inline-size: 11px;
block-size: 11px;
border-radius: 50%;
background: var(--panel-3);
border: 2px solid var(--sec-2);
box-shadow: 0 0 0 4px var(--ink);
}
.nx-tl-item.is-breaking .nx-tl-dot {
background: var(--live);
border-color: var(--live);
box-shadow: 0 0 0 4px var(--ink), 0 0 16px var(--live-glow);
}
.nx-tl-body { min-inline-size: 0; }
.nx-tl-body .nx-card { margin: 0; }
.nx-topicrel-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 12px;
}
.nx-topiccard {
display: flex;
flex-direction: column;
gap: 6px;
padding: 15px 17px;
border: 1px solid var(--hair);
border-radius: var(--r-m);
background: linear-gradient(160deg, var(--panel), var(--ink-2));
text-decoration: none;
transition: border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
.nx-topiccard::before {
content: "";
display: block;
inline-size: 26px;
block-size: 3px;
border-radius: 2px;
background: var(--sec-2);
margin-block-end: 4px;
}
.nx-topiccard:hover,
.nx-topiccard:focus-visible {
border-color: var(--sec-hair);
background: linear-gradient(160deg, var(--panel-2), var(--ink-2));
transform: translateY(-2px);
}
.nx-topiccard-type {
font: 700 var(--t-kick)/1 var(--f-ui);
text-transform: uppercase;
letter-spacing: .09em;
color: var(--tx-dim);
}
.nx-topiccard-name {
font: 700 var(--t-list)/1.25 var(--f-ui);
color: var(--tx);
overflow-wrap: anywhere;
}
.nx-topiccard-n {
font: 500 var(--t-meta)/1 var(--f-ui);
color: var(--tx-3);
}
.nx-topiccard.is-followed { border-color: var(--sec-hair); }
.nx-topiccard.is-followed .nx-topiccard-name { color: var(--sec-1); }
.nx-trenddelta {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px 8px;
border-radius: var(--r-s);
font: 800 .68rem/1 var(--f-ui);
letter-spacing: .04em;
white-space: nowrap;
flex: none;
}
.nx-trenddelta.is-new { background: var(--live); color: #fff; box-shadow: 0 0 18px var(--live-glow); }
.nx-trenddelta.is-up { background: var(--ok-tint); color: var(--ok); }
.nx-trenddelta.is-down { background: hsl(216 30% 60% / .12); color: var(--tx-3); }
.nx-trenddelta.is-flat { background: rgba(255,255,255,.05); color: var(--tx-dim); }
.nx-trendpill-bar,
.nx-podcard-bar,
.nx-trendrow-bar {
display: block;
block-size: 4px;
border-radius: 2px;
background: var(--tap-3);
overflow: hidden;
}
.nx-trendpill-bar > i,
.nx-podcard-bar > i,
.nx-trendrow-bar > i {
display: block;
block-size: 100%;
border-radius: 2px;
background: linear-gradient(90deg, var(--sec-3), var(--sec-1));
}
[dir="rtl"] .nx-trendpill-bar > i,
[dir="rtl"] .nx-podcard-bar > i,
[dir="rtl"] .nx-trendrow-bar > i {
background: linear-gradient(270deg, var(--sec-3), var(--sec-1));
}
.nx-trendstrip {
margin-block: var(--rowgap);
padding: clamp(16px, 2vw, 24px);
border: 1px solid var(--hair);
border-radius: var(--r-l);
background:
radial-gradient(90% 200% at 0% 0%, var(--live-tint), transparent 60%),
linear-gradient(160deg, var(--panel), var(--ink-2));
}
[dir="rtl"] .nx-trendstrip { background:
radial-gradient(90% 200% at 100% 0%, var(--live-tint), transparent 60%),
linear-gradient(160deg, var(--panel), var(--ink-2)); }
.nx-trendstrip-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-block-end: 14px;
}
.nx-trendstrip-t {
display: flex;
align-items: center;
gap: 9px;
margin: 0;
font: 800 clamp(1rem, .94rem + .3vw, 1.18rem)/1 var(--f-ui);
letter-spacing: -.01em;
color: var(--tx);
text-transform: uppercase;
}
.nx-trendstrip-t .nx-i { color: var(--live-hi); }
.nx-trendstrip-rail {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(200px, 1fr);
gap: 10px;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: inline mandatory;
padding-block-end: 4px;
scrollbar-width: thin;
}
.nx-trendstrip-rail::-webkit-scrollbar { block-size: 6px; }
.nx-trendstrip-rail::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: 3px; }
.nx-trendpill {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 4px 12px;
padding: 12px 14px;
border: 1px solid var(--hair);
border-radius: var(--r-m);
background: var(--surface-2);
text-decoration: none;
scroll-snap-align: start;
transition: border-color .2s var(--ease), background .2s var(--ease);
}
.nx-trendpill:hover,
.nx-trendpill:focus-visible { border-color: var(--sec-hair); background: var(--sec-soft); }
.nx-trendpill-rank {
grid-row: 1 / 3;
font: 800 1.5rem/1 var(--f-num);
font-variant-numeric: tabular-nums;
color: var(--sec-1);
opacity: .55;
}
.nx-trendpill-body { min-inline-size: 0; }
.nx-trendpill-name {
display: block;
font: 700 .92rem/1.25 var(--f-ui);
color: var(--tx);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nx-trendpill-meta {
display: flex;
align-items: center;
gap: 7px;
margin-block-start: 4px;
font: 500 .72rem/1 var(--f-ui);
color: var(--tx-dim);
}
.nx-trendpill-meta i { font-style: normal; }
.nx-trendpill-bar { grid-column: 2; margin-block-start: 9px; }
.nx-trendpill.is-followed { border-color: var(--sec-hair); }
.nx-trendhead .nx-masthead-title .nx-i { color: var(--live-hi); }
.nx-trendtabs {
display: inline-flex;
gap: 4px;
margin-block-start: 20px;
padding: 4px;
border: 1px solid var(--hair);
border-radius: var(--r-pill);
background: var(--surface-2);
}
.nx-trendtab {
padding: 8px 18px;
border-radius: var(--r-pill);
font: 700 .8rem/1 var(--f-ui);
color: var(--tx-3);
text-decoration: none;
white-space: nowrap;
transition: background .2s var(--ease), color .2s var(--ease);
}
.nx-trendtab:hover { color: var(--tx); }
.nx-trendtab.is-on { background: var(--sec-2); color: var(--sec-ink); }
.nx-podium {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr;
gap: var(--gap);
margin-block: clamp(22px, 3vw, 38px);
align-items: stretch;
}
.nx-podcard {
display: flex;
flex-direction: column;
gap: 12px;
padding: clamp(14px, 1.6vw, 20px);
border: 1px solid var(--hair);
border-radius: var(--r-l);
background: linear-gradient(165deg, var(--panel), var(--ink-2));
min-inline-size: 0;
}
.nx-podcard.is-first {
border-color: var(--sec-hair);
background:
radial-gradient(80% 120% at 0% 0%, hsl(var(--sec) 70% 40% / .18), transparent 60%),
linear-gradient(165deg, var(--panel-2), var(--ink-2));
}
[dir="rtl"] .nx-podcard.is-first { background:
radial-gradient(80% 120% at 100% 0%, hsl(var(--sec) 70% 40% / .18), transparent 60%),
linear-gradient(165deg, var(--panel-2), var(--ink-2)); }
.nx-podcard-top {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
min-inline-size: 0;
}
.nx-podcard-rank {
font: 800 clamp(2rem, 1.4rem + 2vw, 3.2rem)/.85 var(--f-num);
font-variant-numeric: tabular-nums;
letter-spacing: -.04em;
color: var(--sec-1);
opacity: .45;
flex: none;
}
.nx-podcard.is-first .nx-podcard-rank { opacity: .85; }
.nx-podcard-id { min-inline-size: 0; flex: 1 1 auto; }
.nx-podcard-type {
display: block;
font: 700 var(--t-kick)/1 var(--f-ui);
text-transform: uppercase;
letter-spacing: .09em;
color: var(--tx-dim);
margin-block-end: 5px;
}
.nx-podcard-name {
display: block;
font-family: var(--f-hl);
font-variation-settings: var(--hl-var);
font-weight: var(--hl-weight);
font-size: var(--t-wide);
line-height: var(--hl-lh);
letter-spacing: -.01em;
color: var(--tx);
overflow-wrap: anywhere;
}
.nx-podcard-top:hover .nx-podcard-name { color: var(--sec-1); }
.nx-podcard-figs {
display: flex;
align-items: center;
gap: 10px;
font: 500 var(--t-meta)/1 var(--f-ui);
color: var(--tx-dim);
}
.nx-podcard-figs .nx-sep {
inline-size: 3px;
block-size: 3px;
border-radius: 50%;
background: currentColor;
opacity: .6;
margin: 0;
}
.nx-podcard-lead {
flex: 1 1 auto;
padding-block-start: 12px;
border-block-start: 1px solid var(--hair);
}
.nx-trendrows {
list-style: none;
margin: 0;
padding: 0;
border-block-start: 1px solid var(--hair);
}
.nx-trendrow { border-block-end: 1px solid var(--hair); }
.nx-trendrow-in {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) minmax(70px, 130px) auto auto;
align-items: center;
gap: 16px;
padding: 14px 10px;
border-radius: var(--r-s);
text-decoration: none;
transition: background .18s var(--ease);
}
.nx-trendrow-in:hover,
.nx-trendrow-in:focus-visible { background: var(--sec-soft); }
.nx-trendrow-rank {
font: 800 1.25rem/1 var(--f-num);
font-variant-numeric: tabular-nums;
color: var(--tx-dim);
text-align: center;
}
.nx-trendrow-in:hover .nx-trendrow-rank { color: var(--sec-1); }
.nx-trendrow-main { min-inline-size: 0; }
.nx-trendrow-name {
display: block;
font: 700 var(--t-list)/1.25 var(--f-ui);
color: var(--tx);
overflow-wrap: anywhere;
}
.nx-trendrow-sub {
display: block;
margin-block-start: 4px;
font: 500 var(--t-meta)/1.3 var(--f-ui);
color: var(--tx-dim);
}
.nx-trendrow-n {
font: 600 var(--t-meta)/1 var(--f-ui);
color: var(--tx-3);
white-space: nowrap;
}
.nx-trendrow.is-followed .nx-trendrow-name,
.nx-trendrow-in.is-followed .nx-trendrow-name { color: var(--sec-1); }
.nx-trendhow {
margin-block: var(--rowgap);
padding: clamp(16px, 2vw, 24px);
border: 1px solid var(--hair);
border-radius: var(--r-m);
background: var(--surface-2);
}
.nx-trendhow h2 {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 10px;
font: 700 .92rem/1 var(--f-ui);
text-transform: uppercase;
letter-spacing: .07em;
color: var(--tx-2);
}
.nx-trendhow h2 .nx-i { color: var(--sec-1); }
.nx-trendhow p {
margin: 0;
max-inline-size: 78ch;
font: 400 .92rem/var(--body-lh) var(--f-ui);
color: var(--tx-3);
}
@media screen and (max-width: 1180px) {
.nx-podium { grid-template-columns: 1fr 1fr; }
.nx-podcard.is-first { grid-column: 1 / -1; }
}
@media screen and (max-width: 980px) {
.nx-trendrow-in { grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 12px; }
.nx-trendrow-bar { display: none; }
}
@media screen and (max-width: 760px) {
.nx-tophead-h1 { font-size: var(--t-wide); }
.nx-topstat { min-inline-size: 45%; padding-inline: 14px; padding-block: 6px; }
.nx-topstat:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
.nx-timeline-list::before { inset-inline-start: 5px; }
.nx-tl-item { grid-template-columns: 1fr; gap: 8px; padding-inline-start: 26px; }
.nx-tl-when { justify-content: flex-start; padding-inline-start: 0; text-align: start; }
.nx-tl-dot { inset-inline-start: -26px; inset-inline-end: auto; }
.nx-podium { grid-template-columns: 1fr; }
.nx-podcard.is-first { grid-column: auto; }
.nx-trendstrip-rail { grid-auto-columns: minmax(172px, 78%); }
}
@media screen and (max-width: 480px) {
.nx-trendrow-in { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding-inline: 4px; }
.nx-trendrow-n { display: none; }
.nx-trendrow-rank { font-size: 1.05rem; }
.nx-trendtabs { inline-size: 100%; }
.nx-trendtab { flex: 1 1 auto; text-align: center; padding-inline: 10px; }
.nx-topicrel-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.nx-tophead-acts { gap: 8px 12px; }
.nx-follow-hint { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.nx-topicchip, .nx-topiccard, .nx-follow, .nx-follow .nx-i,
.nx-trendpill, .nx-trendtab, .nx-trendrow-in { transition: none; }
.nx-follow.is-pop { transform: none; }
.nx-topiccard:hover { transform: none; }
}
@media (forced-colors: active) {
.nx-topicchip, .nx-topiccard, .nx-trendpill, .nx-podcard,
.nx-trendhow, .nx-trendtabs, .nx-follow { border: 1px solid CanvasText; }
.nx-trendpill-bar > i, .nx-podcard-bar > i, .nx-trendrow-bar > i { background: CanvasText; }
.nx-trenddelta { border: 1px solid CanvasText; }
}
.nx-edbtn { inline-size: auto; padding-inline: 8px; }
.nx-edbtn-in {
display: inline-flex;
align-items: center;
gap: 5px;
}
.nx-edbtn-in b {
font-family: var(--f-num, inherit);
font-size: .66rem;
font-weight: 700;
letter-spacing: .09em;
color: var(--sec-1);
max-inline-size: 7ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nx-edbtn .nx-i { opacity: .85; }
#nxEdDrawer[hidden] { display: none; }
.nx-edmenu-note {
color: var(--tx-3);
font-size: .9rem;
line-height: 1.5;
margin: 0 0 16px;
}
.nx-edmenu-note a { color: var(--sec-1); text-decoration: underline; text-underline-offset: 3px; }
.nx-edgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 8px;
}
.nx-edopt {
display: grid;
grid-template-columns: 1fr auto;
gap: 2px 10px;
align-items: baseline;
padding: 11px 13px;
min-block-size: 44px;
border-radius: var(--r-m);
border: 1px solid transparent;
color: var(--tx-2);
transition: background .16s var(--ease), color .16s var(--ease);
}
.nx-edopt:hover { background: rgba(255,255,255,.06); color: var(--tx); }
.nx-edopt b { font-weight: 600; font-size: .95rem; unicode-bidi: plaintext; }
.nx-edopt-meta {
font-family: var(--f-num, inherit);
font-size: .64rem;
letter-spacing: .09em;
color: var(--tx-dim);
}
.nx-edopt-lang {
grid-column: 1 / -1;
font-size: .74rem;
color: var(--tx-dim);
}
.nx-edopt.is-on {
background: var(--sec-soft);
border-color: var(--sec-hair);
color: var(--tx);
}
.nx-edopt.is-on .nx-edopt-meta,
.nx-edopt.is-on .nx-edopt-lang { color: var(--sec-1); }
.nx-edmenu-more {
display: inline-block;
margin-block-start: 16px;
font-size: .84rem;
color: var(--tx-3);
text-decoration: underline;
text-underline-offset: 3px;
}
.nx-edmenu-more:hover { color: var(--tx); }
.nx-ednear {
border-block-start: 1px solid var(--sec-hair);
padding-block-start: clamp(18px, 2vw, 30px);
}
.nx-ednear .nx-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.nx-ednear-note {
margin: -6px 0 18px;
color: var(--tx-3);
font-size: var(--t-dek);
max-inline-size: 62ch;
}
.nx-edstatus {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-block-start: 14px;
color: var(--tx-3);
font-size: .92rem;
}
.nx-edstatus b { color: var(--sec-1); font-weight: 700; }
.nx-edaxes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gap);
margin-block: clamp(20px, 3vw, 40px);
}
.nx-edaxis {
position: relative;
padding: clamp(16px, 2vw, 26px);
border: 1px solid var(--hair-2);
border-radius: var(--r-l);
background: linear-gradient(180deg, var(--panel-2), var(--panel));
box-shadow: var(--sh-1);
}
.nx-edaxis::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 0;
inline-size: 3px;
border-start-start-radius: var(--r-l);
border-end-start-radius: var(--r-l);
background: linear-gradient(180deg, var(--sec-1), transparent);
}
.nx-edaxis.is-lang { --sec: 44; }
.nx-edaxis-k {
display: block;
font-size: var(--t-kick);
letter-spacing: .13em;
text-transform: uppercase;
color: var(--tx-dim);
}
.nx-edaxis-v {
display: block;
margin-block: 6px 10px;
font-family: var(--f-hl);
font-variation-settings: var(--hl-var);
font-weight: var(--hl-weight);
font-size: clamp(1.3rem, 1.05rem + 1vw, 2rem);
line-height: var(--hl-lh);
color: var(--tx);
unicode-bidi: plaintext;
}
.nx-edaxis p {
margin: 0 0 14px;
color: var(--tx-2);
font-size: var(--t-dek);
line-height: 1.62;
}
.nx-edcards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
gap: var(--gap);
}
.nx-edcard {
display: grid;
align-content: start;
gap: 8px;
padding: clamp(14px, 1.6vw, 20px);
border: 1px solid var(--hair);
border-radius: var(--r-l);
background: var(--panel);
color: var(--tx-2);
transition: border-color .18s var(--ease), background .18s var(--ease), translate .18s var(--ease);
}
.nx-edcard:hover { border-color: var(--sec-hair); background: var(--panel-2); translate: 0 -2px; }
.nx-edcard.is-on { border-color: var(--sec-hair); background: var(--sec-soft); }
.nx-edcard-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding-block-end: 8px;
border-block-end: 1px solid var(--hair);
}
.nx-edcard-name {
font-family: var(--f-hl);
font-variation-settings: var(--hl-var);
font-weight: var(--hl-weight);
font-size: 1.06rem;
line-height: 1.25;
color: var(--tx);
unicode-bidi: plaintext;
}
.nx-edcard-tag {
flex: none;
font-size: .62rem;
letter-spacing: .1em;
padding: 3px 7px;
border-radius: var(--r-pill);
color: var(--sec-1);
background: var(--sec-soft);
border: 1px solid var(--sec-hair);
}
.nx-edcard-row {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
gap: 10px;
font-size: .82rem;
line-height: 1.5;
}
.nx-edcard-row i {
font-style: normal;
color: var(--tx-dim);
font-size: var(--t-kick);
letter-spacing: .1em;
text-transform: uppercase;
padding-block-start: 2px;
}
.nx-edcard-cc {
display: block;
color: var(--tx-dim);
font-size: .72rem;
word-break: break-word;
}
.nx-edcard-lang {
margin-block-start: 4px;
padding-block-start: 8px;
border-block-start: 1px solid var(--hair);
font-size: .78rem;
color: var(--tx-3);
}
.nx-edcard.is-on .nx-edcard-lang { color: var(--sec-1); }
.nx-edauto {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-block-start: clamp(16px, 2vw, 24px);
color: var(--tx-dim);
font-size: .84rem;
}
.nx-ednow-note {
margin: -6px 0 16px;
color: var(--tx-3);
font-size: var(--t-dek);
max-inline-size: 62ch;
}
.nx-numlist.is-ednow { max-inline-size: 900px; }
@media screen and (max-width: 900px) {
.nx-edaxes { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 620px) {
.nx-edcards { grid-template-columns: minmax(0, 1fr); }
.nx-edgrid { grid-template-columns: minmax(0, 1fr); }
.nx-edcard-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
.nx-edbtn-in b { max-inline-size: 5ch; }
}
.nx-alertbar {
position: relative;
z-index: 95; 
display: flex;
align-items: stretch;
background: linear-gradient(100deg, var(--live), var(--live-hi) 46%, var(--live));
color: #fff;
box-shadow: 0 10px 28px -18px var(--live-glow);
overflow-anchor: none;
}
.nx-alertbar[hidden] { display: none; }
.nx-alertbar-in {
inline-size: min(100% - (var(--gut) * 2), var(--wrap));
margin-inline: auto;
display: flex;
align-items: center;
gap: clamp(8px, 1.2vw, 16px);
min-block-size: 44px;
padding-block: 8px;
padding-inline-end: 34px; 
color: inherit;
text-decoration: none;
}
.nx-alertbar-tag {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 7px;
font: 800 var(--t-kick)/1 var(--f-ui);
letter-spacing: .12em;
text-transform: uppercase;
padding: 5px 9px;
border-radius: var(--r-s);
background: rgb(0 0 0 / .26);
white-space: nowrap;
}
.nx-alertbar-tag .nx-live-dot { background: #fff; box-shadow: 0 0 0 0 rgb(255 255 255 / .6); }
.nx-alertbar-line {
flex: 1 1 auto;
min-inline-size: 0;
font: 700 clamp(.86rem, .8rem + .3vw, 1.02rem)/1.35 var(--f-ui);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nx-alertbar-go {
flex: 0 0 auto;
font: 700 var(--t-meta)/1 var(--f-ui);
padding: 7px 12px;
border-radius: var(--r-pill);
background: rgb(255 255 255 / .16);
border: 1px solid rgb(255 255 255 / .3);
white-space: nowrap;
}
.nx-alertbar-in:hover .nx-alertbar-go { background: rgb(255 255 255 / .26); }
.nx-alertbar-x {
position: absolute;
inset-inline-end: max(6px, calc((100% - var(--wrap)) / 2));
inset-block-start: 50%;
translate: 0 -50%;
inline-size: 30px;
block-size: 30px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: transparent;
color: rgb(255 255 255 / .8);
cursor: pointer;
}
.nx-alertbar-x:hover { background: rgb(0 0 0 / .22); color: #fff; }
.nx-alertbar.is-in { animation: nx-alert-in .34s var(--ease-out) both; }
@keyframes nx-alert-in { from { opacity: 0; translate: 0 -100%; } to { opacity: 1; translate: 0 0; } }
.nx-ld { display: block; }
.nx-ld-head { padding-block: clamp(18px, 3vw, 40px) 0; }
.nx-ld-head-in { max-inline-size: 940px; }
.nx-ld-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-block-end: 14px;
}
.nx-ld-status {
display: inline-flex;
align-items: center;
gap: 7px;
font: 800 var(--t-kick)/1 var(--f-ui);
letter-spacing: .12em;
text-transform: uppercase;
padding: 6px 11px;
border-radius: var(--r-s);
background: var(--live);
color: #fff;
}
.nx-ld-status.is-developing { background: var(--warn); color: #fff; }
.nx-ld-status.is-developing .nx-live-dot { background: #fff; }
.nx-ld-status.is-closed {
background: var(--panel-3);
color: var(--tx-2);
box-shadow: inset 0 0 0 1px var(--hair);
}
.nx-ld-sec,
.nx-ld-chip {
font: 600 var(--t-meta)/1 var(--f-ui);
padding: 6px 10px;
border-radius: var(--r-pill);
background: var(--panel-2);
color: var(--tx-2);
box-shadow: inset 0 0 0 1px var(--hair);
text-decoration: none;
white-space: nowrap;
}
.nx-ld-sec { color: var(--sec-1); box-shadow: inset 0 0 0 1px var(--sec-hair); }
.nx-ld-sec:hover { background: var(--sec-soft); }
.nx-ld-title {
font: var(--hl-weight) var(--t-lead)/var(--hl-lh) var(--f-hl);
font-variation-settings: var(--hl-var);
color: var(--tx);
margin: 0;
text-wrap: balance;
}
.nx-ld-times {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-block-start: 12px;
font: 500 var(--t-meta)/1.5 var(--f-ui);
color: var(--tx-dim);
}
.nx-ld-auto {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--sec-1);
}
.nx-ld-auto::before {
content: "";
inline-size: 6px;
block-size: 6px;
border-radius: 50%;
background: currentColor;
animation: nx-ld-breathe 2.4s var(--ease) infinite;
}
@keyframes nx-ld-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.nx-ld-hero {
margin: clamp(18px, 2.6vw, 30px) 0 0;
border-radius: var(--r-l);
overflow: hidden;
position: relative;
box-shadow: var(--sh-2);
}
.nx-ld-hero img {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
.nx-ld-hero figcaption {
position: absolute;
inset-block-end: 0;
inset-inline: 0;
padding: 22px 16px 10px;
font: 500 var(--t-meta)/1.3 var(--f-ui);
color: var(--on-img-2);
background: linear-gradient(0deg, var(--scrim-2), transparent);
}
.nx-ld-cols {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: clamp(24px, 3.4vw, 56px);
align-items: start;
padding-block: clamp(24px, 3.6vw, 46px) clamp(40px, 6vw, 90px);
}
.nx-ld-main { min-inline-size: 0; }
.nx-ld-know {
border-radius: var(--r-l);
background:
linear-gradient(160deg, var(--sec-soft), transparent 62%),
var(--panel);
box-shadow: inset 0 0 0 1px var(--sec-hair), var(--sh-1);
padding: clamp(16px, 2.2vw, 26px);
margin-block-end: clamp(22px, 3vw, 34px);
}
.nx-ld-know-h {
display: flex;
align-items: center;
gap: 9px;
margin: 0 0 12px;
font: 800 var(--t-tile)/1.2 var(--f-ui);
letter-spacing: -.01em;
color: var(--tx);
}
.nx-ld-know-h .nx-i { color: var(--sec-1); }
.nx-ld-know-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.nx-ld-know-list li {
position: relative;
padding-inline-start: 20px;
font: 500 var(--t-dek)/1.62 var(--f-ui);
color: var(--tx-2);
}
.nx-ld-know-list li::before {
content: "";
position: absolute;
inset-inline-start: 2px;
inset-block-start: .62em;
inline-size: 7px;
block-size: 7px;
border-radius: 2px;
background: var(--sec-2);
rotate: 45deg;
}
.nx-ld-know-list a { color: inherit; text-decoration: none; }
.nx-ld-know-list a:hover { color: var(--tx); text-decoration: underline; text-underline-offset: 3px; }
.nx-ld-closed {
margin: 0 0 22px;
padding: 12px 16px;
border-radius: var(--r-m);
background: var(--panel-2);
box-shadow: inset 0 0 0 1px var(--hair);
font: 500 var(--t-meta)/1.6 var(--f-ui);
color: var(--tx-3);
}
.nx-ld-streamhead {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-block-end: 6px;
}
.nx-ld-h2 {
margin: 0;
font: 800 var(--t-sect)/1.15 var(--f-ui);
letter-spacing: -.02em;
color: var(--tx);
}
.nx-ld-newest { font: 500 var(--t-meta)/1 var(--f-ui); color: var(--tx-dim); white-space: nowrap; }
.nx-ld-stream {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.nx-ld-entry {
display: grid;
grid-template-columns: 62px minmax(0, 1fr);
gap: clamp(10px, 1.4vw, 18px);
padding-block: clamp(16px, 2vw, 24px);
position: relative;
}
.nx-ld-entry::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 61px;
inline-size: 1px;
background: var(--hair);
}
.nx-ld-entry:first-child::before { inset-block-start: 22px; }
.nx-ld-entry:last-child::before { inset-block-end: auto; block-size: 22px; }
.nx-ld-rail {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
position: relative;
padding-inline-end: 15px;
}
.nx-ld-time {
font: 700 .82rem/1 var(--f-num);
color: var(--tx-3);
font-variant-numeric: tabular-nums;
padding-block-start: 3px;
}
.nx-ld-node {
position: absolute;
inset-block-start: 4px;
inset-inline-end: 0;
inline-size: 11px;
block-size: 11px;
border-radius: 50%;
background: var(--panel-3);
box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 1px var(--hair-2);
}
.nx-ld-node.is-key {
background: var(--live);
box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--live-glow);
}
.nx-ld-body { min-inline-size: 0; }
.nx-ld-keytag {
display: inline-flex;
align-items: center;
gap: 5px;
margin-block-end: 8px;
font: 800 .68rem/1 var(--f-ui);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--live-hi);
}
.nx-ld-hl {
margin: 0 0 6px;
font: var(--hl-weight) var(--t-tile)/calc(var(--hl-lh) + .16) var(--f-hl);
font-variation-settings: var(--hl-var);
color: var(--tx);
text-wrap: pretty;
}
.nx-ld-txt {
margin: 0;
font: 400 var(--t-dek)/var(--body-lh) var(--f-ui);
color: var(--tx-2);
text-wrap: pretty;
}
.nx-ld-media {
margin: 12px 0 0;
border-radius: var(--r-m);
overflow: hidden;
position: relative;
max-inline-size: 620px;
}
.nx-ld-media img {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
.nx-ld-media figcaption {
padding: 6px 2px 0;
font: 500 .72rem/1.4 var(--f-ui);
color: var(--tx-dim);
}
.nx-ld-media figcaption a { color: inherit; }
.nx-ld-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
margin-block-start: 10px;
font: 500 var(--t-meta)/1.4 var(--f-ui);
}
.nx-ld-src { color: var(--tx-dim); }
.nx-ld-src a { color: var(--tx-3); text-decoration: none; }
.nx-ld-src a:hover { color: var(--sec-1); }
.nx-ld-more {
display: inline-flex;
align-items: center;
gap: 3px;
color: var(--sec-1);
text-decoration: none;
font-weight: 700;
}
.nx-ld-more:hover { text-decoration: underline; text-underline-offset: 3px; }
[dir="rtl"] .nx-ld-more .nx-i,
[dir="rtl"] .nx-ld-toflash .nx-i:last-child { scale: -1 1; }
.nx-ld-empty {
padding: 40px 0;
color: var(--tx-dim);
font: 500 var(--t-dek)/1.6 var(--f-ui);
}
.nx-ld-entry.is-new .nx-ld-body { animation: nx-ld-arrive .5s var(--ease-out) both; }
.nx-ld-entry.is-new .nx-ld-node { animation: nx-ld-ping 1.4s var(--ease) 2; }
@keyframes nx-ld-arrive { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
@keyframes nx-ld-ping {
0% { box-shadow: 0 0 0 3px var(--ink), 0 0 0 4px var(--live-glow); }
70% { box-shadow: 0 0 0 3px var(--ink), 0 0 0 14px transparent; }
100% { box-shadow: 0 0 0 3px var(--ink), 0 0 0 4px transparent; }
}
.nx-ld-pillwrap {
position: sticky;
inset-block-start: calc(var(--top-h) + 10px);
z-index: 40;
display: flex;
justify-content: center;
block-size: 0;
overflow: visible;
pointer-events: none;
}
.nx-ld-pill {
pointer-events: auto;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 9px 18px;
border: 0;
border-radius: var(--r-pill);
background: var(--live);
color: #fff;
font: 700 var(--t-meta)/1 var(--f-ui);
cursor: pointer;
box-shadow: 0 10px 26px -10px var(--live-glow), 0 0 0 1px hsl(2 88% 70% / .5);
animation: nx-ld-pill-in .3s var(--ease-out) both;
}
.nx-ld-pill[hidden] { display: none; }
.nx-ld-pill:hover { background: var(--live-hi); }
.nx-ld-pill .nx-live-dot { background: #fff; }
@keyframes nx-ld-pill-in { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }
.nx-ld-rail-col {
position: sticky;
inset-block-start: calc(var(--top-h) + 16px);
display: grid;
gap: clamp(18px, 2.2vw, 28px);
min-inline-size: 0;
}
.nx-ld-h3 {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
font: 800 var(--t-mini)/1.2 var(--f-ui);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--tx-3);
}
.nx-ld-h3 .nx-i { color: var(--live); }
.nx-ld-keys,
.nx-ld-stories,
.nx-ld-others {
padding: clamp(14px, 1.6vw, 20px);
border-radius: var(--r-l);
background: var(--panel);
box-shadow: inset 0 0 0 1px var(--hair);
}
.nx-ld-keylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nx-ld-keylist a {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 10px;
padding: 8px 6px;
border-radius: var(--r-s);
text-decoration: none;
color: var(--tx-2);
}
.nx-ld-keylist a:hover { background: var(--panel-2); color: var(--tx); }
.nx-ld-keytime {
font: 700 .76rem/1.5 var(--f-num);
color: var(--live);
font-variant-numeric: tabular-nums;
}
.nx-ld-keytxt {
font: 500 .84rem/1.45 var(--f-ui);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nx-ld-cards { display: grid; gap: 6px; }
.nx-ld-otherlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nx-ld-otherlist a {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 6px;
border-radius: var(--r-s);
font: 600 .86rem/1.4 var(--f-ui);
color: var(--tx-2);
text-decoration: none;
}
.nx-ld-otherlist a:hover { background: var(--panel-2); color: var(--sec-1); }
.nx-ld-toflash {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-radius: var(--r-m);
background: var(--panel-2);
box-shadow: inset 0 0 0 1px var(--hair);
color: var(--tx-2);
font: 700 var(--t-meta)/1 var(--f-ui);
text-decoration: none;
}
.nx-ld-toflash:hover { color: var(--tx); box-shadow: inset 0 0 0 1px var(--hair-2); }
.nx-ld-toflash .nx-i:first-child { color: var(--live); }
.nx-ld-toflash .nx-i:last-child { margin-inline-start: auto; }
@media (max-width: 1180px) {
.nx-ld-cols { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 980px) {
.nx-ld-cols {
display: flex;
flex-direction: column;
gap: 0;
}
.nx-ld-main { display: contents; }
.nx-ld-know { order: 1; margin-block-end: 20px; }
.nx-ld-closed { order: 2; }
.nx-ld-rail-col { order: 3; position: static; gap: 0; margin-block-end: 24px; }
.nx-ld-streamhead { order: 4; }
.nx-ld-pillwrap { order: 5; }
.nx-ld-stream { order: 6; }
.nx-ld-stories,
.nx-ld-others,
.nx-ld-toflash { display: none; }
}
@media (max-width: 720px) {
.nx-ld-head { padding-block-start: 14px; }
.nx-ld-hero { border-radius: var(--r-m); margin-block-start: 16px; }
.nx-ld-entry {
grid-template-columns: 22px minmax(0, 1fr);
gap: 10px;
padding-block: 14px;
}
.nx-ld-entry::before { inset-inline-start: 5px; }
.nx-ld-entry:last-child::before { block-size: 16px; }
.nx-ld-rail { align-items: flex-start; padding-inline-end: 0; }
.nx-ld-time {
position: absolute;
inset-inline-start: 32px;
inset-block-start: 0;
font-size: .76rem;
}
.nx-ld-node { inset-inline-start: 0; inset-inline-end: auto; inset-block-start: 3px; }
.nx-ld-body { padding-block-start: 20px; }
.nx-ld-keytag { margin-block-end: 6px; }
.nx-alertbar-go { display: none; } 
.nx-alertbar-in { padding-inline-end: 30px; }
.nx-alertbar-x { inset-inline-end: 2px; }
.nx-ld-pillwrap { inset-block-start: calc(var(--top-h) + 4px); }
}
@media (max-width: 430px) {
.nx-ld-chips { gap: 6px; }
.nx-ld-chip:last-of-type { display: none; } 
.nx-ld-media { margin-block-start: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.nx-alertbar.is-in,
.nx-ld-pill,
.nx-ld-entry.is-new .nx-ld-body,
.nx-ld-entry.is-new .nx-ld-node,
.nx-ld-auto::before { animation: none; }
}
@media print {
.nx-alertbar,
.nx-ld-pillwrap,
.nx-ld-rail-col { display: none; }
.nx-ld-cols { display: block; }
.nx-ld-entry { break-inside: avoid; }
}
.nx-cmt {
--cmt-measure: min(860px, 92vw);
--cmt-indent: clamp(20px, 3.4vw, 44px);
--cmt-av: clamp(30px, 3.2vw, 38px);
inline-size: var(--cmt-measure);
margin: clamp(34px, 5vw, 64px) auto clamp(30px, 4vw, 52px);
padding-block-start: clamp(20px, 3vw, 32px);
border-block-start: 1px solid var(--hair);
font-family: var(--f-ui);
color: var(--tx);
scroll-margin-block-start: calc(var(--top-h) + 16px);
}
.nx-cmt-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-block-end: 14px;
}
.nx-cmt-h {
font-family: var(--f-hl);
font-variation-settings: var(--hl-var);
font-weight: var(--hl-weight);
font-size: calc(clamp(1.15rem, .95rem + .7vw, 1.55rem) * var(--hl-scale));
line-height: var(--hl-lh);
letter-spacing: -.012em;
margin: 0;
padding-inline-start: 13px;
border-inline-start: 3px solid oklch(58% .14 var(--sec, 212));
}
:root[data-script="hebrew"] .nx-cmt-h,
:root[data-script="arabic"] .nx-cmt-h { letter-spacing: 0; }
.nx-cmt-sorts {
display: inline-flex;
gap: 2px;
padding: 3px;
border-radius: var(--r-pill);
background: var(--tap-1);
border: 1px solid var(--hair);
}
.nx-cmt-sort {
font-size: var(--t-meta);
font-weight: 600;
letter-spacing: .01em;
color: var(--tx-3);
text-decoration: none;
padding: 5px 13px;
border-radius: var(--r-pill);
white-space: nowrap;
transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nx-cmt-sort:hover { color: var(--tx); }
.nx-cmt-sort.is-on {
color: var(--sec-on, #fff);
background: oklch(56% .13 var(--sec, 212));
box-shadow: var(--sh-1);
}
.nx-cmt-empty {
margin: 0 0 18px;
color: var(--tx-3);
font-size: var(--t-dek);
line-height: 1.6;
}
.nx-cmt-flash {
margin: 0 0 16px;
padding: 11px 15px;
border-radius: var(--r-m);
border-inline-start: 3px solid var(--ok);
background: var(--ok-tint);
color: var(--tx);
font-size: var(--t-dek);
line-height: 1.55;
}
.nx-cmt-flash.is-err {
border-inline-start-color: var(--warn);
background: var(--warn-tint);
}
.nx-cmt-closed {
margin: 0 0 18px;
padding: 12px 15px;
border-radius: var(--r-m);
background: var(--tap-1);
color: var(--tx-3);
font-size: var(--t-dek);
}
.nx-cmt-form {
margin-block-end: clamp(24px, 3.4vw, 36px);
padding: clamp(14px, 1.8vw, 20px);
border: 1px solid var(--hair);
border-radius: var(--r-l);
background: var(--surface);
box-shadow: var(--sh-1);
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.nx-cmt-form:focus-within {
border-color: var(--sec-hair);
box-shadow: var(--sh-2);
}
.nx-cmt-fields {
display: grid;
gap: 8px;
}
.nx-cmt-lbl {
font-size: var(--t-kick);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--tx-dim);
}
.nx-cmt-form .nx-cmt-lbl:first-of-type { margin-block-end: -4px; }
.nx-cmt-name-in,
.nx-cmt-body-in {
inline-size: 100%;
font: inherit;
font-size: 1rem;
line-height: var(--body-lh);
color: var(--tx);
background: var(--paper);
border: 1px solid var(--hair-2);
border-radius: var(--r-m);
padding: 10px 13px;
transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.nx-cmt-name-in { max-inline-size: 22rem; }
.nx-cmt-body-in {
min-block-size: 5.2em;
resize: vertical;
field-sizing: content; 
max-block-size: 40vh;
}
.nx-cmt-name-in::placeholder,
.nx-cmt-body-in::placeholder { color: var(--tx-dim); opacity: .72; }
.nx-cmt-name-in:focus-visible,
.nx-cmt-body-in:focus-visible {
outline: 2px solid oklch(56% .13 var(--sec, 212));
outline-offset: 1px;
border-color: transparent;
background: var(--surface);
}
.nx-cmt-formfoot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-block-start: 12px;
}
.nx-cmt-rules {
margin: 0;
flex: 1 1 16rem;
font-size: var(--t-meta);
line-height: 1.5;
color: var(--tx-dim);
}
.nx-cmt-post {
font: inherit;
font-weight: 700;
font-size: .95rem;
letter-spacing: .005em;
color: var(--sec-on, #fff);
background: oklch(56% .13 var(--sec, 212));
border: 0;
border-radius: var(--r-pill);
padding: 10px 26px;
cursor: pointer;
box-shadow: var(--sh-1);
transition: transform .16s var(--ease), filter .16s var(--ease), box-shadow .16s var(--ease);
}
.nx-cmt-post:hover { filter: brightness(1.06); box-shadow: var(--sh-2); }
.nx-cmt-post:active { transform: translateY(1px); }
.nx-cmt-post[disabled] { opacity: .55; cursor: default; transform: none; filter: none; }
.nx-cmt-replying {
margin: 0 0 10px;
font-size: var(--t-dek);
color: var(--tx-2);
}
.nx-cmt-replying .nx-cmt-act { margin-inline-start: 8px; }
.nx-cmt-hp {
position: absolute;
inset-inline-start: -9999px;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
opacity: 0;
}
.nx-cmt-note {
margin: 10px 0 0;
font-size: var(--t-dek);
color: var(--tx-2);
}
.nx-cmt-note.is-err { color: var(--warn); }
.nx-cmt-note[hidden] { display: none; }
.nx-cmt-list { display: grid; gap: 2px; }
.nx-cmt-thread {
padding-block: 14px;
border-block-start: 1px solid var(--hair);
}
.nx-cmt-thread:first-child { border-block-start: 0; }
.nx-cmt-item {
padding-block: 4px;
scroll-margin-block-start: calc(var(--top-h) + 20px);
}
.nx-cmt-item.is-held {
padding: 12px 14px;
border-radius: var(--r-m);
background: var(--warn-tint);
border: 1px dashed var(--warn-hair);
}
.nx-cmt-head {
display: flex;
align-items: center;
gap: 10px;
margin-block-end: 7px;
}
.nx-cmt-av {
flex: none;
inline-size: var(--cmt-av);
block-size: var(--cmt-av);
border-radius: 34%;
display: grid;
place-items: center;
font-family: var(--f-ui);
font-weight: 800;
font-size: calc(var(--cmt-av) * .44);
line-height: 1;
color: light-dark(oklch(30% .10 var(--av, 212)), oklch(94% .04 var(--av, 212)));
background: light-dark(oklch(90% .055 var(--av, 212)), oklch(34% .06 var(--av, 212)));
box-shadow: inset 0 0 0 1px light-dark(oklch(78% .07 var(--av, 212) / .7),
oklch(60% .07 var(--av, 212) / .45));
user-select: none;
}
.nx-cmt-who { min-inline-size: 0; }
.nx-cmt-name {
font-weight: 700;
font-size: .94rem;
color: var(--tx);
overflow-wrap: anywhere;
}
.nx-cmt-you {
margin-inline-start: 7px;
font-size: var(--t-kick);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: oklch(48% .12 var(--sec, 212));
background: var(--sec-chip);
border-radius: var(--r-pill);
padding: 2px 7px;
vertical-align: 1px;
}
.nx-cmt-meta {
display: block;
font-size: var(--t-meta);
color: var(--tx-dim);
}
.nx-cmt-edited { margin-inline-start: 8px; font-style: italic; }
.nx-cmt-heldnote {
margin: 0 0 8px;
font-size: var(--t-meta);
font-weight: 600;
color: var(--warn);
}
.nx-cmt-in { padding-inline-start: calc(var(--cmt-av) + 10px); }
.nx-cmt-body {
margin: 0 0 8px;
font-size: 1rem;
line-height: var(--body-lh);
color: var(--tx-2);
overflow-wrap: anywhere; 
}
.nx-cmt-link {
color: oklch(46% .14 var(--sec, 212));
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
}
.nx-cmt-link:hover { text-decoration-color: currentColor; }
.nx-cmt-acts {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.nx-cmt-act,
.nx-cmt-vote {
font: inherit;
font-size: var(--t-meta);
font-weight: 600;
color: var(--tx-dim);
background: none;
border: 0;
border-radius: var(--r-pill);
padding: 5px 10px;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
transition: color .15s var(--ease), background-color .15s var(--ease);
}
.nx-cmt-act:hover,
.nx-cmt-vote:hover { color: var(--tx); background: var(--tap-2); }
.nx-cmt-act.is-danger:hover { color: var(--live); background: var(--live-tint); }
.nx-cmt-act.is-quiet { opacity: .72; }
.nx-cmt-act.is-quiet:hover { opacity: 1; }
.nx-cmt-vote.is-on { color: oklch(48% .13 var(--sec, 212)); background: var(--sec-chip); }
.nx-cmt-vote.is-down.is-on { color: var(--live); background: var(--live-tint); }
.nx-cmt-n:empty,
.nx-cmt-n[data-zero] { display: none; }
.nx-cmt-vote svg { flex: none; }
.nx-sr {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.nx-cmt-replies {
margin-block-start: 10px;
margin-inline-start: var(--cmt-indent);
padding-inline-start: clamp(10px, 1.4vw, 16px);
border-inline-start: 2px solid var(--hair-2);
display: grid;
gap: 12px;
}
.nx-cmt-replies .nx-cmt-item { --cmt-av: clamp(26px, 2.6vw, 30px); }
.nx-cmt-fold {
margin-block-start: 2px;
}
.nx-cmt-fold > summary {
font-size: var(--t-meta);
font-weight: 700;
color: oklch(48% .12 var(--sec, 212));
cursor: pointer;
padding: 5px 0;
list-style: none;
}
.nx-cmt-fold > summary::-webkit-details-marker { display: none; }
.nx-cmt-fold > summary::before {
content: "";
display: inline-block;
inline-size: 14px;
border-block-start: 1px solid currentColor;
margin-inline-end: 8px;
vertical-align: 4px;
opacity: .6;
}
.nx-cmt-fold[open] > summary { color: var(--tx-dim); }
.nx-cmt-fold[open] { display: grid; gap: 12px; }
.nx-cmt-inline {
margin-block-start: 10px;
display: grid;
gap: 8px;
}
.nx-cmt-inline textarea {
inline-size: 100%;
font: inherit;
font-size: .97rem;
line-height: var(--body-lh);
color: var(--tx);
background: var(--paper);
border: 1px solid var(--hair-2);
border-radius: var(--r-m);
padding: 9px 12px;
min-block-size: 4em;
resize: vertical;
}
.nx-cmt-inline textarea:focus-visible {
outline: 2px solid oklch(56% .13 var(--sec, 212));
outline-offset: 1px;
border-color: transparent;
}
.nx-cmt-inline-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nx-cmt-inline .nx-cmt-post { padding: 7px 20px; font-size: .88rem; }
.nx-cmt-more-wrap { margin-block-start: 18px; text-align: center; }
.nx-cmt-more {
display: inline-block;
font-size: .9rem;
font-weight: 700;
color: var(--tx-2);
text-decoration: none;
padding: 9px 26px;
border: 1px solid var(--hair-2);
border-radius: var(--r-pill);
background: var(--surface);
transition: border-color .16s var(--ease), color .16s var(--ease), background-color .16s var(--ease);
}
.nx-cmt-more:hover {
color: oklch(46% .13 var(--sec, 212));
border-color: var(--sec-hair);
background: var(--sec-tint);
}
.nx-cmt-more.is-busy { opacity: .6; pointer-events: none; }
.nx-cmt-foot {
margin: clamp(20px, 3vw, 30px) 0 0;
padding-block-start: 14px;
border-block-start: 1px solid var(--hair);
font-size: var(--t-meta);
line-height: 1.6;
color: var(--tx-dim);
}
.nx-cmt-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.nx-cmt-foot a:hover { color: var(--tx-2); }
.nx-cmt-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--t-meta);
font-weight: 600;
color: var(--tx-dim);
}
.nx-cmt-badge svg { flex: none; opacity: .8; }
@media screen and (max-width: 560px) {
.nx-cmt { --cmt-indent: 16px; }
.nx-cmt-in { padding-inline-start: 0; }
.nx-cmt-top { gap: 10px; }
.nx-cmt-sorts { inline-size: fit-content; }
.nx-cmt-formfoot { align-items: stretch; }
.nx-cmt-post { inline-size: 100%; }
.nx-cmt-name-in { max-inline-size: none; }
}
@media (prefers-reduced-motion: reduce) {
.nx-cmt-post,
.nx-cmt-act,
.nx-cmt-vote,
.nx-cmt-more { transition: none; }
}
@media print {
.nx-cmt-form,
.nx-cmt-acts,
.nx-cmt-sorts,
.nx-cmt-more-wrap { display: none; }
}
@media (forced-colors: active) {
.nx-cmt-av { border: 1px solid CanvasText; }
.nx-cmt-sort.is-on,
.nx-cmt-post { border: 1px solid ButtonText; }
}
.nx-timeline {
max-inline-size: min(860px, 92vw);
margin: clamp(28px, 4vw, 48px) auto;
padding-inline: clamp(4px, 2vw, 16px);
}
.nx-timeline-t {
font-size: clamp(1.05rem, 2vw, 1.35rem);
font-weight: 800;
letter-spacing: -0.01em;
margin-block-end: 14px;
padding-inline-start: 14px;
border-inline-start: 3px solid hsl(var(--sec, 212) 70% 58%);
}
.nx-timeline.is-developing .nx-timeline-t::after {
content: "";
display: inline-block;
inline-size: 8px;
block-size: 8px;
margin-inline-start: 10px;
border-radius: 50%;
background: var(--live);
box-shadow: 0 0 0 0 var(--live-glow);
animation: nx-tl-pulse 2.2s ease-out infinite;
}
@keyframes nx-tl-pulse {
70% { box-shadow: 0 0 0 9px oklch(56% .21 26 / 0); }
100% { box-shadow: 0 0 0 0 oklch(56% .21 26 / 0); }
}
.nx-timeline .nx-timeline-list {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.nx-timeline .nx-timeline-list::before {
content: "";
position: absolute;
inset-block: 6px 6px;
inset-inline-start: 5px;
inline-size: 2px;
background: linear-gradient(
to bottom,
hsl(var(--sec, 212) 60% 55% / 0.55),
hsl(var(--sec, 212) 60% 55% / 0.08)
);
}
.nx-timeline-item {
position: relative;
padding-inline-start: 30px;
padding-block: 12px;
}
.nx-timeline-item::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-start: 19px;
inline-size: 12px;
block-size: 12px;
border-radius: 50%;
background: hsl(var(--sec, 212) 70% 58%);
box-shadow: 0 0 0 4px var(--paper);
}
.nx-timeline-item.is-correction::before { background: var(--warn); }
.nx-timeline-time {
display: block;
font-size: 0.78rem;
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
opacity: 0.62;
margin-block-end: 3px;
}
.nx-timeline-tag {
display: inline-block;
margin-inline-end: 8px;
padding: 2px 8px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--warn);
background: var(--warn-tint);
border: 1px solid var(--warn-hair);
}
.nx-timeline-txt {
margin: 0;
font-size: 1rem;
line-height: 1.62;
}
.nx-timeline-old {
margin: 6px 0 0;
font-size: 0.9rem;
opacity: 0.55;
}
.nx-timeline-old del { text-decoration-color: var(--warn); }
.nx-timeline-src {
margin: 6px 0 0;
font-size: 0.8rem;
opacity: 0.66;
}
.nx-timeline-src a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: hsl(var(--sec, 212) 60% 60% / 0.5);
}
.nx-timeline-src a:hover,
.nx-timeline-src a:focus-visible { color: hsl(var(--sec, 212) 75% 72%); }
@media (prefers-reduced-motion: reduce) {
.nx-timeline.is-developing .nx-timeline-t::after { animation: none; }
}
.is-feeds .nx-main { padding-block-end: clamp(40px, 6vw, 90px); }
.nx-feeds-head {
padding-block: clamp(26px, 5vw, 62px) clamp(18px, 3vw, 34px);
max-inline-size: 78ch;
}
.nx-feeds-title {
font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.9rem);
font-weight: 800;
letter-spacing: -.022em;
line-height: 1.02;
margin: 0;
background: linear-gradient(100deg, var(--tx) 30%, hsl(var(--sec) 84% 70%));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.nx-feeds-tag {
margin: 12px 0 0;
font-size: clamp(1.02rem, .95rem + .5vw, 1.34rem);
color: var(--tx-2);
font-weight: 600;
}
.nx-feeds-intro {
margin: 14px 0 0;
color: var(--tx-3);
font-size: var(--t-dek);
line-height: 1.62;
}
.nx-feeds { display: grid; gap: clamp(26px, 3.4vw, 46px); }
.nx-feeds-h {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 14px;
font-size: var(--t-sect);
font-weight: 700;
letter-spacing: -.012em;
color: var(--tx);
}
.nx-feeds-h::after {
content: "";
flex: 1;
block-size: 1px;
background: linear-gradient(to var(--_end, right), var(--hair-2), transparent);
}
[dir="rtl"] .nx-feeds-h::after { --_end: left; }
.nx-feeds-note {
margin: -6px 0 14px;
color: var(--tx-3);
font-size: .92rem;
max-inline-size: 70ch;
line-height: 1.6;
}
.nx-feed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nx-feed-grid {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.nx-feed {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 4px 14px;
padding: 14px 16px;
border: 1px solid var(--hair);
border-radius: var(--r-m);
background: linear-gradient(180deg, var(--panel), var(--panel-2));
transition: border-color .18s var(--ease), transform .18s var(--ease), background .18s var(--ease);
}
.nx-feed:hover {
border-color: var(--sec-hair);
background: linear-gradient(180deg, var(--panel-2), var(--panel));
transform: translateY(-1px);
}
.nx-feed-name {
display: flex;
align-items: center;
gap: 9px;
font-weight: 650;
color: var(--tx);
text-decoration: none;
font-size: 1.02rem;
min-inline-size: 0;
}
.nx-feed-name:hover { color: var(--sec-1); }
.nx-feed-dot {
inline-size: 20px;
block-size: 20px;
flex: 0 0 auto;
border-radius: 5px;
background: var(--sec-2);
position: relative;
}
.nx-feed-dot::before,
.nx-feed-dot::after {
content: "";
position: absolute;
inset-inline-start: 4px;
inset-block-end: 4px;
border: 2px solid var(--sec-ink);
border-block-start-color: transparent;
border-inline-end-color: transparent;
border-end-start-radius: 12px;
}
.nx-feed-dot::before { inline-size: 7px; block-size: 7px; }
.nx-feed-dot::after { inline-size: 12px; block-size: 12px; }
.nx-feed-note {
grid-column: 2;
grid-row: 1;
color: var(--tx-dim);
font-size: .78rem;
white-space: nowrap;
}
.nx-feed-url {
grid-column: 1 / -1;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .74rem;
color: var(--tx-dim);
text-align: start;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scrollbar-width: none;
padding-block-start: 2px;
}
.nx-feed-url::-webkit-scrollbar { display: none; }
.nx-feeds-hero .nx-feed {
padding: 20px 22px;
border-color: var(--sec-hair);
background:
radial-gradient(120% 180% at 0% 0%, hsl(var(--sec) 70% 50% / .16), transparent 60%),
linear-gradient(180deg, var(--panel-2), var(--panel));
}
.nx-feeds-hero .nx-feed-name { font-size: 1.16rem; }
.nx-feed-langs {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.nx-feed-langs a {
display: inline-block;
padding: 7px 13px;
border-radius: var(--r-pill);
border: 1px solid var(--hair);
background: var(--panel);
color: var(--tx-2);
text-decoration: none;
font-size: .88rem;
line-height: 1.2;
transition: border-color .16s var(--ease), color .16s var(--ease);
}
.nx-feed-langs a:hover { border-color: var(--sec-hair); color: var(--tx); }
.nx-feeds-machines .nx-feed { background: var(--ink-2); }
@media (max-width: 640px) {
.nx-feed { grid-template-columns: 1fr; }
.nx-feed-note { grid-column: 1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
.nx-feed { transition: none; }
.nx-feed:hover { transform: none; }
}
.nx-fg-page {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: clamp(24px, 3.4vw, 56px);
align-items: start;
}
.nx-fg-facts { --sec: 154; } 
.nx-fg-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: clamp(14px, 1.6vw, 22px);
}
.nx-fg-item {
position: relative;
padding: clamp(18px, 2vw, 26px);
padding-inline-start: clamp(22px, 2.4vw, 32px);
background: var(--panel);
border: 1px solid var(--hair);
border-radius: var(--r-l);
box-shadow: var(--sh-1);
}
.nx-fg-item::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: 3px;
border-start-start-radius: var(--r-l);
border-end-start-radius: var(--r-l);
background: linear-gradient(to bottom, var(--sec-1), var(--sec-3));
}
.nx-fg-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-block-end: 10px;
}
.nx-fg-kind {
font: 700 var(--t-kick) / 1 var(--f-ui);
letter-spacing: .09em;
text-transform: uppercase;
padding: 6px 10px;
border-radius: var(--r-pill);
color: var(--sec-1);
background: var(--sec-soft);
border: 1px solid var(--sec-hair);
}
.nx-fg-kind.is-retraction {
color: var(--live-hi);
background: var(--live-tint);
border-color: var(--live-hair);
}
.nx-fg-when,
.nx-fg-field {
font: 500 var(--t-meta) / 1 var(--f-ui);
color: var(--tx-3);
}
.nx-fg-field::before {
content: "·";
margin-inline-end: 8px;
color: var(--tx-dim);
}
.nx-fg-hl {
margin: 0 0 8px;
font: var(--hl-weight) var(--t-list) / var(--hl-lh) var(--f-hl);
font-variation-settings: var(--hl-var);
}
.nx-fg-hl a {
color: var(--tx);
text-decoration: none;
background-image: linear-gradient(var(--sec-hair), var(--sec-hair));
background-size: 0 1px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: background-size .3s var(--ease);
}
.nx-fg-hl a:hover,
.nx-fg-hl a:focus-visible { background-size: 100% 1px; }
.nx-fg-why {
margin: 0 0 10px;
font: 600 var(--t-dek) / 1.5 var(--f-ui);
color: var(--tx);
}
.nx-fg-note {
margin: 0 0 14px;
font: 400 var(--t-dek) / var(--body-lh) var(--f-ui);
color: var(--tx-2);
}
.nx-fg-diff {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-block: 4px 14px;
}
.nx-fg-side {
padding: 12px 14px;
border-radius: var(--r-m);
border: 1px solid var(--hair);
background: var(--panel-2);
min-width: 0;
}
.nx-fg-side h3 {
margin: 0 0 6px;
font: 700 var(--t-kick) / 1 var(--f-ui);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--tx-dim);
}
.nx-fg-side p {
margin: 0;
font: 400 .93rem / 1.6 var(--f-ui);
color: var(--tx-2);
overflow-wrap: anywhere;
}
.nx-fg-side.is-before p {
color: var(--tx-3);
text-decoration: line-through;
text-decoration-color: var(--live-hair);
text-decoration-thickness: 1px;
}
.nx-fg-side.is-after {
background: var(--ok-tint);
border-color: var(--ok-hair);
}
.nx-fg-side.is-after p { color: var(--tx); }
.nx-fg-side.is-after em { color: var(--tx-3); font-style: italic; }
.nx-fg-read {
display: inline-flex;
align-items: center;
gap: 4px;
font: 600 var(--t-meta) / 1 var(--f-ui);
color: var(--sec-1);
text-decoration: none;
}
.nx-fg-read:hover { color: var(--sec-2); }
.nx-fg-read .nx-i,
.nx-fg-about .nx-i { transition: transform .2s var(--ease); }
[dir="rtl"] .nx-fg-read .nx-i,
[dir="rtl"] .nx-fg-about .nx-i { transform: scaleX(-1); }
.nx-fg-read:hover .nx-i { transform: translateX(2px); }
[dir="rtl"] .nx-fg-read:hover .nx-i { transform: scaleX(-1) translateX(2px); }
.nx-fg-policy {
position: sticky;
top: calc(var(--top-h) + 18px);
padding: clamp(18px, 2vw, 24px);
border: 1px solid var(--hair);
border-radius: var(--r-l);
background:
linear-gradient(180deg, var(--ok-tint), transparent 60%),
var(--panel);
}
.nx-fg-policy h2 {
margin: 0 0 10px;
font: var(--hl-weight) var(--t-mini) / var(--hl-lh) var(--f-hl);
font-variation-settings: var(--hl-var);
color: var(--tx);
}
.nx-fg-policy p {
margin: 0 0 10px;
font: 400 .9rem / 1.65 var(--f-ui);
color: var(--tx-2);
}
.nx-fg-about {
display: inline-flex;
align-items: center;
gap: 4px;
font: 600 var(--t-meta) / 1 var(--f-ui);
color: var(--tx-3);
text-decoration: none;
}
.nx-fg-about:hover { color: var(--tx); }
.nx-fg-empty {
padding: clamp(34px, 5vw, 64px) clamp(20px, 3vw, 40px);
text-align: center;
border: 1px dashed var(--hair-2);
border-radius: var(--r-l);
background: var(--panel);
}
.nx-fg-empty h2 {
margin: 0 0 8px;
font: var(--hl-weight) var(--t-sect) / var(--hl-lh) var(--f-hl);
font-variation-settings: var(--hl-var);
color: var(--tx);
}
.nx-fg-empty p {
margin: 0 auto;
max-width: 46ch;
font: 400 var(--t-dek) / var(--body-lh) var(--f-ui);
color: var(--tx-3);
}
@media screen and (max-width: 980px) {
.nx-fg-page { grid-template-columns: minmax(0, 1fr); }
.nx-fg-policy { position: static; order: 2; }
.nx-fg-main { order: 1; }
}
@media screen and (max-width: 620px) {
.nx-fg-diff { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.nx-fg-hl a,
.nx-fg-read .nx-i,
.nx-fg-about .nx-i { transition: none; }
}
.nx-legal-facts { --sec: 232; } 
.nx-legal-page {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: clamp(24px, 3.4vw, 60px);
align-items: start;
}
.nx-legal-main {
max-inline-size: 74ch;
}
.nx-legal-h {
margin-block-start: clamp(34px, 3.4vw, 54px);
padding-block-start: clamp(16px, 1.6vw, 24px);
border-block-start: 1px solid var(--hair);
scroll-margin-block-start: 92px; 
}
.nx-legal-main > .nx-legal-h:first-child {
margin-block-start: 0;
padding-block-start: 0;
border-block-start: 0;
}
.nx-legal-list {
margin-block: 0 1.2em;
padding-inline-start: 0;
list-style: none;
}
.nx-legal-list li {
position: relative;
padding-inline-start: 1.5em;
margin-block-end: .5em;
color: var(--tx-2);
}
.nx-legal-list li::before {
content: "";
position: absolute;
inset-inline-start: .25em;
inset-block-start: .62em;
inline-size: 6px;
block-size: 6px;
border-radius: 50%;
background: var(--sec-deep);
}
.nx-legal-list.is-commit li { color: var(--tx); }
.nx-legal-out {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 650;
text-decoration: none;
color: var(--sec-deep);
}
.nx-legal-out:hover { text-decoration: underline; }
[dir="rtl"] .nx-legal-out .nx-i { transform: scaleX(-1); }
.nx-legal-mail {
font-family: var(--f-num);
font-size: .95em;
word-break: break-all;
}
.nx-legal-rail {
position: sticky;
inset-block-start: 92px;
padding: clamp(16px, 1.6vw, 22px);
background: var(--panel);
border: 1px solid var(--hair);
border-radius: var(--r-l);
}
.nx-legal-railh {
margin: 0 0 10px;
font-size: .74rem;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--tx-dim);
}
.nx-legal-toc { display: flex; flex-direction: column; }
.nx-legal-toc a {
padding: 7px 0;
font-size: .92rem;
color: var(--tx-2);
text-decoration: none;
border-block-end: 1px solid var(--hair);
}
.nx-legal-toc a:last-child { border-block-end: 0; }
.nx-legal-toc a:hover { color: var(--tx); }
.nx-legal-rev {
margin: 14px 0 0;
font-size: .78rem;
color: var(--tx-dim);
}
.nx-td {
margin-block: clamp(30px, 4vw, 60px) clamp(40px, 5vw, 80px);
scroll-margin-block-start: 92px;
}
.nx-td-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: clamp(20px, 2.6vw, 40px);
align-items: start;
}
.nx-td-form,
.nx-td-check {
padding: clamp(20px, 2.4vw, 32px);
background: linear-gradient(180deg, var(--panel-2), var(--panel));
border: 1px solid var(--hair-2);
border-radius: var(--r-l);
box-shadow: var(--sh-1);
}
.nx-td-h {
margin: 0 0 6px;
font-family: var(--f-hl);
font-weight: var(--hl-weight);
font-size: calc(1.42rem * var(--hl-scale));
line-height: var(--hl-lh);
}
.nx-td-intro { margin: 0 0 20px; color: var(--tx-3); font-size: .92rem; }
.nx-td-f { display: block; margin-block-end: 16px; }
.nx-td-l {
display: block;
margin-block-end: 6px;
font-size: .82rem;
font-weight: 650;
letter-spacing: .02em;
color: var(--tx-2);
}
.nx-td-l.is-req::after {
content: "";
display: inline-block;
inline-size: 5px;
block-size: 5px;
margin-inline-start: 7px;
border-radius: 50%;
background: var(--live);
vertical-align: middle;
}
.nx-td-in {
inline-size: 100%;
padding: 11px 13px;
font: inherit;
font-size: .95rem;
color: var(--tx);
background: var(--ink-2);
border: 1px solid var(--hair-2);
border-radius: var(--r-m);
transition: border-color .14s ease, box-shadow .14s ease;
}
.nx-td-in::placeholder { color: var(--tx-dim); }
.nx-td-in:focus-visible {
outline: none;
border-color: var(--sec-deep);
box-shadow: 0 0 0 3px var(--sec-deep);
}
.nx-td-in:invalid:not(:placeholder-shown) { border-color: hsl(2 70% 52% / .7); }
.nx-td-area { resize: vertical; min-block-size: 8em; line-height: 1.55; }
select.nx-td-in { appearance: none; cursor: pointer; }
.nx-td-help {
display: block;
margin-block-start: 6px;
font-size: .8rem;
line-height: 1.5;
color: var(--tx-dim);
}
.nx-td-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nx-td-row .nx-td-f { margin-block-end: 16px; }
.nx-td-hp {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.nx-td-go {
display: inline-flex;
align-items: center;
gap: 8px;
margin-block-start: 6px;
padding: 12px 26px;
font: inherit;
font-weight: 700;
font-size: .95rem;
color: var(--sec-on);
background: var(--sec-deep);
border: 0;
border-radius: var(--r-pill);
cursor: pointer;
transition: filter .14s ease, transform .14s ease;
}
.nx-td-go:hover { filter: brightness(1.08); }
.nx-td-go:active { transform: translateY(1px); }
.nx-td-go:focus-visible { outline: 2px solid var(--tx); outline-offset: 3px; }
.nx-td-go.is-small { padding: 9px 18px; font-size: .88rem; }
.nx-td-note {
margin-block: 16px 0;
font-size: .8rem;
line-height: 1.55;
color: var(--tx-dim);
}
.nx-td-ok {
margin-block-end: clamp(18px, 2vw, 28px);
padding: clamp(20px, 2.4vw, 30px);
background: linear-gradient(180deg, hsl(154 60% 30% / .22), var(--panel));
border: 1px solid hsl(154 60% 46% / .4);
border-radius: var(--r-l);
}
.nx-td-ok h2 { margin: 0 0 8px; font-size: calc(1.3rem * var(--hl-scale)); font-family: var(--f-hl); }
.nx-td-ok p { margin: 0 0 10px; color: var(--tx-2); }
.nx-td-ref {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 12px;
margin-block: 14px 6px !important;
}
.nx-td-ref span { font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; color: var(--tx-dim); }
.nx-td-ref b {
font-family: var(--f-num);
font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem);
letter-spacing: .06em;
color: hsl(154 70% 70%);
user-select: all; 
}
.nx-td-next { font-size: .9rem; color: var(--tx-3) !important; }
.nx-td-err {
margin-block-end: 18px;
padding: 13px 17px;
background: hsl(2 60% 30% / .25);
border: 1px solid hsl(2 70% 56% / .45);
border-radius: var(--r-m);
color: #ffd9d4;
font-size: .93rem;
}
.nx-td-err.is-inline { margin-block: 14px 0; }
.nx-td-checkf { display: flex; gap: 10px; flex-wrap: wrap; }
.nx-td-checkf .nx-td-in { flex: 1 1 11em; min-inline-size: 0; letter-spacing: .05em; }
.nx-td-state {
margin-block-start: 18px;
padding: 16px 18px;
background: var(--ink-2);
border: 1px solid var(--hair);
border-inline-start: 3px solid var(--tx-dim);
border-radius: var(--r-m);
}
.nx-td-state.is-new { border-inline-start-color: hsl(38 90% 60%); }
.nx-td-state.is-reviewing { border-inline-start-color: var(--sec-deep); }
.nx-td-state.is-actioned { border-inline-start-color: hsl(154 64% 54%); }
.nx-td-state.is-declined { border-inline-start-color: hsl(2 70% 60%); }
.nx-td-sref { margin: 0; font-family: var(--f-num); font-size: .9rem; color: var(--tx-3); }
.nx-td-slab { margin: 10px 0 2px; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tx-dim); }
.nx-td-sval { margin: 0; font-size: 1.06rem; font-weight: 650; color: var(--tx); }
.nx-td-swhen { margin: 8px 0 0; font-size: .82rem; color: var(--tx-dim); }
.nx-cred-facts { --sec: 268; }
.nx-cred-page {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
grid-template-areas: "intro drawn" "list list";
gap: clamp(22px, 2.8vw, 44px);
align-items: start;
}
.nx-cred-intro { grid-area: intro; max-inline-size: 68ch; }
.nx-cred-drawn { grid-area: drawn; }
.nx-cred-main { grid-area: list; }
.nx-cred-drawnh {
margin: 0 0 10px;
font-size: .74rem;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--tx-dim);
}
.nx-cred-drawnrow { display: grid; gap: 8px; }
.nx-cred-drawnart {
inline-size: 100%;
block-size: auto;
border-radius: var(--r-m);
border: 1px solid var(--hair);
}
.nx-cred-pending {
margin-block-end: clamp(18px, 2vw, 28px);
padding: clamp(16px, 1.8vw, 24px);
background: hsl(38 70% 30% / .16);
border: 1px solid hsl(38 80% 56% / .32);
border-radius: var(--r-l);
}
.nx-cred-pending h3 { margin: 0 0 8px; font-size: 1.04rem; }
.nx-cred-pending p { margin: 0; color: var(--tx-2); font-size: .93rem; line-height: 1.62; }
.nx-cred-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: clamp(14px, 1.6vw, 22px);
}
.nx-cred {
display: grid;
grid-template-columns: 108px minmax(0, 1fr);
gap: 14px;
padding: 14px;
background: var(--panel);
border: 1px solid var(--hair);
border-radius: var(--r-l);
}
.nx-cred.is-licensed { border-color: hsl(154 50% 46% / .32); }
.nx-cred.is-bare { border-color: hsl(2 60% 56% / .3); }
.nx-cred-media {
inline-size: 108px;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--r-m);
background: var(--panel-2);
}
.nx-cred-img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.nx-cred-body { min-inline-size: 0; }
.nx-cred-author {
margin: 0 0 6px;
font-weight: 650;
font-size: .98rem;
color: var(--tx);
overflow-wrap: anywhere;
}
.nx-cred-author em { color: var(--tx-dim); font-weight: 400; }
.nx-cred-lic { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nx-cred-tag {
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .08em;
padding: 3px 8px;
border-radius: var(--r-pill);
}
.nx-cred-tag.is-ok { background: hsl(154 55% 34% / .35); color: hsl(154 70% 76%); }
.nx-cred-tag.is-pending { background: hsl(38 70% 34% / .3); color: hsl(38 90% 76%); }
.nx-cred-licname { font-family: var(--f-num); font-size: .84rem; color: var(--tx-2); }
.nx-cred-licname.is-none { color: var(--tx-dim); font-family: inherit; font-style: italic; }
a.nx-cred-licname { color: var(--sec-deep); }
.nx-cred-meta {
margin: 0 0 6px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 12px;
font-size: .82rem;
color: var(--tx-dim);
}
.nx-cred-prov { overflow-wrap: anywhere; }
.nx-cred-src {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--tx-3);
text-decoration: none;
}
.nx-cred-src:hover { color: var(--tx); }
[dir="rtl"] .nx-cred-src .nx-i { transform: scaleX(-1); }
.nx-cred-used { margin: 0; font-size: .8rem; color: var(--tx-dim); }
.nx-cred-used span { margin-inline-end: 6px; }
.nx-cred-used a { color: var(--sec-deep); text-decoration: none; }
.nx-cred-used a:hover { text-decoration: underline; }
.nx-cred-empty {
padding: clamp(32px, 5vw, 64px);
text-align: center;
background: var(--panel);
border: 1px dashed var(--hair-2);
border-radius: var(--r-l);
}
.nx-cred-empty h2 { margin: 0 0 8px; }
.nx-cred-empty p { margin: 0; color: var(--tx-3); }
@media screen and (max-width: 1080px) {
.nx-legal-page,
.nx-td-grid { grid-template-columns: minmax(0, 1fr); }
.nx-legal-rail { position: static; order: -1; }
.nx-legal-toc { flex-direction: row; flex-wrap: wrap; gap: 6px 10px; }
.nx-legal-toc a { border-block-end: 0; padding: 5px 11px; border: 1px solid var(--hair); border-radius: var(--r-pill); font-size: .84rem; }
.nx-cred-page { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "drawn" "list"; }
.nx-cred-drawnrow { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 620px) {
.nx-td-row { grid-template-columns: minmax(0, 1fr); }
.nx-cred-list { grid-template-columns: minmax(0, 1fr); }
.nx-cred { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
.nx-cred-media { inline-size: 84px; }
.nx-td-ref b { font-size: 1.24rem; }
}
@media (prefers-reduced-motion: reduce) {
.nx-td-in, .nx-td-go { transition: none; }
}
.nx-pwa {
position: fixed;
z-index: 90; 
inset-block-end: max(18px, env(safe-area-inset-bottom));
inset-inline-end: max(18px, env(safe-area-inset-right));
inline-size: min(392px, calc(100vw - 32px));
background: var(--panel-2, #161a28);
border: 1px solid var(--hair-2, rgba(150, 170, 255, .22));
border-radius: var(--r-l, 18px);
box-shadow: var(--sh-2, 0 22px 44px -18px rgba(0, 0, 0, .85));
color: var(--tx, #f5f3ef);
opacity: 0;
transform: translateY(14px) scale(.985);
transition: opacity .34s var(--ease-out, cubic-bezier(.16, 1, .3, 1)),
transform .34s var(--ease-out, cubic-bezier(.16, 1, .3, 1));
}
.nx-pwa.is-on { opacity: 1; transform: none; }
.nx-pwa[hidden] { display: none; }
.nx-pwa-in {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: 12px 14px;
padding: 16px 18px;
}
.nx-pwa-icon {
inline-size: 48px;
block-size: 48px;
border-radius: 12px;
grid-row: 1;
image-rendering: -webkit-optimize-contrast;
}
.nx-pwa-txt { display: grid; gap: 3px; min-inline-size: 0; }
.nx-pwa-title {
font-family: var(--f-ui, system-ui, sans-serif);
font-size: .98rem;
font-weight: 700;
letter-spacing: -.005em;
line-height: 1.25;
}
.nx-pwa-sub {
font-size: .82rem;
line-height: 1.45;
color: var(--tx-3, #9299ae);
text-wrap: pretty;
}
.nx-pwa-btns {
grid-column: 1 / -1;
display: flex;
gap: 8px;
justify-content: flex-end;
}
.nx-pwa-btns button {
font: inherit;
font-size: .86rem;
font-weight: 600;
cursor: pointer;
padding: 9px 18px;
border-radius: var(--r-pill, 999px);
border: 1px solid var(--hair-2, rgba(150, 170, 255, .22));
background: transparent;
color: var(--tx-2, #c3c7d6);
transition: background .18s, color .18s, border-color .18s;
}
.nx-pwa-btns button:hover { border-color: var(--hair, rgba(150, 170, 255, .13)); color: var(--tx, #f5f3ef); }
.nx-pwa-btns button.nx-pwa-go {
background: var(--tx, #f5f3ef);
border-color: var(--tx, #f5f3ef);
color: var(--ink, #07080d);
}
.nx-pwa-btns button.nx-pwa-go:hover { background: #fff; border-color: #fff; color: var(--ink, #07080d); }
.nx-pwa-btns button:focus-visible {
outline: 2px solid var(--sec-1, hsl(212 84% 66%));
outline-offset: 2px;
}
@media screen and (max-width: 520px) {
.nx-pwa {
inset-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
inline-size: auto;
}
.nx-pwa-in { padding: 14px 15px; gap: 10px 12px; }
.nx-pwa-icon { inline-size: 40px; block-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
.nx-pwa { transition: opacity .01s; transform: none; }
}
@media (display-mode: standalone), (display-mode: minimal-ui), (display-mode: window-controls-overlay) {
.nx-pwa { display: none !important; }
}
@media print { .nx-pwa { display: none !important; } }
@property --nx-cond { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --nx-prog { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --nx-mask-s { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --nx-mask-e { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --nx-dir { syntax: "<number>"; inherits: true; initial-value: 1; }
:root { --nx-dir: 1; }
:root[dir="rtl"] { --nx-dir: -1; }
:root {
--nx-ease: var(--ease, cubic-bezier(.22, .8, .28, 1));
--nx-ease-out: var(--ease-out, cubic-bezier(.16, 1, .3, 1));
}
@keyframes nx-condense { to { --nx-cond: 1; } }
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
.nx-top {
animation: nx-condense linear both;
animation-timeline: scroll(root block);
animation-range: 0 210px;
}
.nx-top .nx-brand svg {
scale: calc(1 - .14 * var(--nx-cond));
transform-origin: 50% 50%;
}
.nx-top .nx-live-pill {
scale: calc(1 - .08 * var(--nx-cond));
transform-origin: calc(50% - 50% * var(--nx-dir)) 50%;
}
.nx-top .nx-capsule {
scale: calc(1 - .05 * var(--nx-cond));
transform-origin: calc(50% + 50% * var(--nx-dir)) 50%;
}
}
}
.nx-progress {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
block-size: 2px;
z-index: 3;
overflow: hidden;
pointer-events: none;
}
.nx-progress > i {
display: block;
block-size: 100%;
background: linear-gradient(calc(90deg * var(--nx-dir)), var(--sec-fill), var(--sec-base));
transform-origin: calc(50% - 50% * var(--nx-dir)) 50%;
scale: var(--nx-prog) 1;
}
@keyframes nx-progress { from { scale: 0 1; } to { scale: 1 1; } }
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
.nx-progress > i {
animation: nx-progress linear both;
animation-timeline: scroll(root block);
}
}
}
.nx-secband::after {
content: "";
position: absolute;
z-index: -1;
inset-block: -6%;
inset-inline: calc(var(--gut) * -1);
pointer-events: none;
background:
radial-gradient(52% 56% at calc(50% + 20% * var(--nx-dir)) 26%, var(--sec-glow), transparent 70%),
radial-gradient(44% 48% at calc(50% - 26% * var(--nx-dir)) 88%, var(--sec-soft), transparent 72%);
}
@keyframes nx-bandpar {
from { translate: calc(2.5% * var(--nx-dir)) 8%; }
to { translate: calc(-2.5% * var(--nx-dir)) -8%; }
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.nx-secband { view-timeline: --nx-band block; }
.nx-secband::after {
animation: nx-bandpar linear both;
animation-timeline: --nx-band;
animation-range: cover 0% cover 100%;
will-change: transform;
}
}
}
@keyframes nx-herodrift {
from { translate: 0 -3.2%; }
to { translate: 0 3.2%; }
}
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
.nx-heroblock .nx-card.is-hero .nx-card-media img {
scale: 1.07;
animation: nx-herodrift linear both;
animation-timeline: scroll(root block);
animation-range: 0 92vh;
}
}
}
@keyframes nx-railedge {
0% { --nx-mask-s: 0%; --nx-mask-e: 3.5%; }
9% { --nx-mask-s: 3.5%; --nx-mask-e: 3.5%; }
91% { --nx-mask-s: 3.5%; --nx-mask-e: 3.5%; }
100% { --nx-mask-s: 3.5%; --nx-mask-e: 0%; }
}
@supports (animation-timeline: scroll()) {
.nx-rowscroll-in {
-webkit-mask-image: linear-gradient(calc(90deg * var(--nx-dir)),
transparent 0, #000 var(--nx-mask-s),
#000 calc(100% - var(--nx-mask-e)), transparent 100%);
mask-image: linear-gradient(calc(90deg * var(--nx-dir)),
transparent 0, #000 var(--nx-mask-s),
#000 calc(100% - var(--nx-mask-e)), transparent 100%);
animation: nx-railedge linear both;
animation-timeline: scroll(self inline);
}
}
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
}
.nx-top { view-transition-name: nx-top; }
.nx-art-hero-img { view-transition-name: nx-hero; }
.nx-art-h1 { view-transition-name: nx-hl; }
::view-transition-old(root) { animation-duration: .16s; }
::view-transition-new(root) { animation-duration: .24s; }
::view-transition-old(nx-top),
::view-transition-new(nx-top) { animation: none; mix-blend-mode: normal; }
::view-transition-group(nx-top) { animation-duration: .28s; }
::view-transition-old(nx-hero),
::view-transition-new(nx-hero) {
block-size: 100%;
inline-size: 100%;
object-fit: cover;
mix-blend-mode: normal;
}
::view-transition-old(nx-hero) { animation-duration: .18s; }
::view-transition-new(nx-hero) { animation-duration: .34s; }
::view-transition-group(nx-hero) {
animation-duration: .42s;
animation-timing-function: var(--nx-ease-out);
}
::view-transition-old(nx-hl),
::view-transition-new(nx-hl) { mix-blend-mode: normal; block-size: auto; }
::view-transition-old(nx-hl) { animation-duration: .14s; }
::view-transition-new(nx-hl) { animation-duration: .3s; }
::view-transition-group(nx-hl) {
animation-duration: .42s;
animation-timing-function: var(--nx-ease-out);
}
:root:active-view-transition { overflow: clip; }
.nx-card .nx-hl { position: relative; }
.nx-card .nx-hl::after {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-end: -3px;
inline-size: 100%;
block-size: 2px;
border-radius: 2px;
background: linear-gradient(calc(90deg * var(--nx-dir)), var(--sec-base), transparent);
scale: 0 1;
transform-origin: calc(50% - 50% * var(--nx-dir)) 50%;
transition: scale .34s var(--nx-ease-out);
}
@media (hover: hover) {
.nx-card:hover .nx-hl::after { scale: 1 1; }
}
.nx-card:focus-within .nx-hl::after { scale: 1 1; }
@keyframes nx-beat {
0%, 100% { scale: 1; }
22% { scale: 1.07; }
46% { scale: .985; }
}
.nx-live-pill.is-beat { animation: nx-beat .82s var(--nx-ease-out) 2; }
@keyframes nx-pop {
from { scale: .82; opacity: 0; }
60% { scale: 1.04; }
to { scale: 1; opacity: 1; }
}
[data-nx="share"].is-done::after { animation: nx-pop .3s var(--nx-ease-out) both; }
[data-nx="share"].is-done { transition: color .18s var(--nx-ease); }
.nx-newpill {
display: inline-flex;
align-items: center;
gap: 6px;
margin-inline-start: auto;
padding: 4px 10px;
border-radius: var(--r-pill, 999px);
background: var(--on-live, #fff);
color: var(--live);
font-family: var(--f-num, inherit);
font-variant-numeric: tabular-nums;
font-size: .74rem;
font-weight: 800;
letter-spacing: .02em;
line-height: 1.2;
cursor: pointer;
scale: .8;
opacity: 0;
transition: scale .28s var(--nx-ease-out), opacity .28s var(--nx-ease-out);
}
.nx-newpill.is-on { scale: 1; opacity: 1; }
.nx-newpill::before {
content: "";
inline-size: 0;
block-size: 0;
border-inline: 4px solid transparent;
border-block-end: 6px solid currentColor;
}
.nx-newpill:hover { filter: brightness(.94); }
.nx-live > .nx-newpill { margin: 8px 14px; }
@keyframes nx-shimmer { to { translate: calc(320% * var(--nx-dir)) 0; } }
.nx-skel { position: relative; overflow: hidden; background: var(--surface-2, #f2f5fb); }
.nx-skel::after {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: -100%;
inline-size: 60%;
background: linear-gradient(calc(90deg * var(--nx-dir)),
transparent, var(--sec-soft), transparent);
animation: nx-shimmer 1.5s var(--nx-ease) infinite;
}
@media (prefers-reduced-motion: reduce) {
.nx-top,
.nx-top .nx-brand svg,
.nx-top .nx-live-pill,
.nx-top .nx-capsule,
.nx-secband,
.nx-secband::after,
.nx-heroblock .nx-card.is-hero .nx-card-media img,
.nx-rowscroll-in,
.nx-live-pill.is-beat,
[data-nx="share"].is-done::after,
.nx-skel::after {
animation: none !important;
animation-timeline: none !important;
view-timeline: none !important;
}
:root { --nx-cond: 0; }
.nx-top .nx-brand svg,
.nx-top .nx-live-pill,
.nx-top .nx-capsule { scale: none !important; }
.nx-secband::after { translate: none !important; will-change: auto; }
.nx-heroblock .nx-card.is-hero .nx-card-media img {
scale: none !important;
translate: none !important;
}
.nx-rowscroll-in {
-webkit-mask-image: linear-gradient(calc(90deg * var(--nx-dir)), transparent, #000 3%, #000 97%, transparent);
mask-image: linear-gradient(calc(90deg * var(--nx-dir)), transparent, #000 3%, #000 97%, transparent);
}
.nx-progress > i { animation: none !important; scale: var(--nx-prog, 0) 1; }
.nx-card .nx-hl::after { transition: none; }
.nx-newpill { transition: none; scale: 1; }
.nx-skel::after { display: none; }
}
@media print {
.nx-progress, .nx-newpill, .nx-secband::after { display: none !important; }
.nx-rowscroll-in { -webkit-mask-image: none; mask-image: none; }
}
@media (forced-colors: active) {
.nx-progress > i { background: Highlight; }
.nx-newpill { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; }
.nx-secband::after { display: none; }
.nx-card .nx-hl::after { background: CanvasText; }
}
.nx-theme { position: relative; display: inline-flex; }
.nx-theme-btn .nx-i { transition: rotate .4s var(--nx-ease-out, cubic-bezier(.16,1,.3,1)); }
.nx-theme-btn[aria-expanded="true"] .nx-i { rotate: 22deg; }
.nx-theme-g { display: none; }
:root[data-theme-pref="light"] .nx-theme-g.is-light,
:root[data-theme-pref="dark"] .nx-theme-g.is-dark,
:root[data-theme-pref="auto"] .nx-theme-g.is-auto,
:root:not([data-theme-pref]) .nx-theme-g.is-auto { display: block; }
.nx-thememenu {
position: absolute;
inset-block-start: calc(100% + 12px);
inset-inline-end: 0;
z-index: 40;
min-inline-size: 178px;
padding: 6px;
border-radius: var(--r-m, 12px);
background: var(--surface, #fff);
border: 1px solid var(--hair-2);
box-shadow: var(--sh-2);
display: grid;
gap: 2px;
transform-origin: calc(50% + 50% * var(--nx-dir, 1)) 0;
scale: .96;
opacity: 0;
translate: 0 -6px;
transition: scale .18s var(--nx-ease-out, ease), opacity .18s ease,
translate .18s var(--nx-ease-out, ease);
}
.nx-thememenu[hidden] { display: none; }
.nx-thememenu.is-open { scale: 1; opacity: 1; translate: 0 0; }
.nx-thememenu:not(.has-copy) { min-inline-size: 0; grid-auto-flow: column; }
.nx-thememenu:not(.has-copy) .nx-themeopt b { display: none; }
.nx-themeopt {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 11px;
border-radius: var(--r-s, 6px);
color: var(--tx-2);
font-size: .85rem;
font-weight: 600;
text-align: start;
transition: background .16s var(--nx-ease, ease), color .16s var(--nx-ease, ease);
}
.nx-themeopt:hover { background: var(--sec-soft); color: var(--tx); }
.nx-themeopt[aria-checked="true"] { color: var(--sec-deep, var(--sec-1)); background: var(--sec-soft); }
.nx-themeopt .nx-i { flex: none; }
.nx-themeopt::after {
content: "";
margin-inline-start: auto;
inline-size: 7px;
block-size: 7px;
border-radius: 50%;
background: currentColor;
scale: 0;
transition: scale .2s var(--nx-ease-out, ease);
}
.nx-themeopt[aria-checked="true"]::after { scale: 1; }
.nx-thememenu:not(.has-copy) .nx-themeopt::after { display: none; }
.nx-drawer-theme { display: flex; align-items: center; gap: 6px; padding-block: 4px; }
.nx-drawer-theme .nx-themeopt {
flex: 1;
justify-content: center;
border: 1px solid var(--hair);
padding-block: 10px;
}
.nx-drawer-theme .nx-themeopt::after { display: none; }
.nx-drawer-theme .nx-themeopt[aria-checked="true"] { border-color: var(--sec-hair); }
:root.nx-theming .nx-top,
:root.nx-theming .nx-art-hero-img,
:root.nx-theming .nx-art-h1 { view-transition-name: none; }
:root.nx-theming::view-transition-old(root),
:root.nx-theming::view-transition-new(root) {
animation-duration: .32s;
animation-timing-function: var(--nx-ease, ease);
}
@media (prefers-reduced-motion: reduce) {
.nx-thememenu { transition: none; scale: 1; translate: 0 0; }
.nx-thememenu:not(.is-open) { opacity: 1; }
.nx-themeopt, .nx-themeopt::after, .nx-theme-btn .nx-i { transition: none; }
.nx-themeopt[aria-checked="true"]::after { scale: 1; }
.nx-theme-btn .nx-i { rotate: none !important; }
}
@media print {
.nx-theme, .nx-drawer-theme { display: none !important; }
}
@media (forced-colors: active) {
.nx-thememenu { border: 1px solid CanvasText; background: Canvas; }
.nx-themeopt[aria-checked="true"] { color: Highlight; }
.nx-themeopt::after { background: Highlight; }
}
.nx-privacy-settings {
appearance: none;
border: 0;
border-block-end: 1px solid currentColor;
border-radius: 0;
padding: 0;
background: transparent;
color: inherit;
font: inherit;
cursor: pointer;
}
.nx-privacy-settings:hover,
.nx-privacy-settings:focus-visible {
color: var(--accent, #d4232f);
}
.nx-privacy-settings:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
@supports (content-visibility: auto) {
html:not([data-nx-render-eager]) .nx-main > .nx-ednear {
content-visibility: auto;
contain-intrinsic-block-size: auto 640px;
}
html:not([data-nx-render-eager]) .nx-main > .nx-trendstrip {
content-visibility: auto;
contain-intrinsic-block-size: auto 190px;
}
html:not([data-nx-render-eager]) .nx-main > .nx-secband {
content-visibility: auto;
contain-intrinsic-block-size: auto 1000px;
}
html:not([data-nx-render-eager]) .nx-main > .nx-sect.is-rail,
html:not([data-nx-render-eager]) .nx-art-related {
content-visibility: auto;
contain-intrinsic-block-size: auto 600px;
}
html:not([data-nx-render-eager]) .nx-main > .nx-sect.is-strip {
content-visibility: auto;
contain-intrinsic-block-size: auto 540px;
}
@media (max-width: 760px) {
html:not([data-nx-render-eager]) .nx-main > .nx-ednear { contain-intrinsic-block-size: auto 1840px; }
html:not([data-nx-render-eager]) .nx-main > .nx-secband { contain-intrinsic-block-size: auto 1040px; }
html:not([data-nx-render-eager]) .nx-main > .nx-sect.is-rail,
html:not([data-nx-render-eager]) .nx-art-related { contain-intrinsic-block-size: auto 560px; }
html:not([data-nx-render-eager]) .nx-main > .nx-sect.is-strip { contain-intrinsic-block-size: auto 2240px; }
}
}
@media screen and (min-width: 761px) {
body:has(.nx-alertbar) .nx-art-hero {
max-block-size: min(44svh, 460px);
}
}
.nx-rt-ready a.nx-rt-pressed,
.nx-rt-ready a.nx-rt-pending {
opacity: .72;
}
.nx-rt-ready.is-nx-nav-pending,
.nx-rt-ready.is-nx-nav-pending a {
cursor: progress;
}
.nx-rt-ready a.nx-rt-pending {
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.nx-rt-ready a.nx-rt-pressed,
.nx-rt-ready a.nx-rt-pending {
transition-property: opacity;
transition-duration: 80ms;
transition-timing-function: ease-out;
}
}
body.nx .nx-card.has-photo .nx-card-media {
background-color: var(--lqipc, var(--z8-surface-3, var(--panel-2, #14161d)));
background-image: none !important;
}
body.nx .nx-card.has-photo .nx-card-media::before,
body.nx .nx-card.has-photo .nx-card-media::after {
display: none !important;
content: none !important;
}
body.nx .nx-card.has-photo .nx-card-media > img {
position: relative;
z-index: 1;
display: block;
opacity: 1 !important;
filter: none !important;
mix-blend-mode: normal !important;
image-rendering: auto;
background-color: var(--lqipc, var(--z8-surface-3, var(--panel-2, #14161d)));
background-image: var(--lqip, none) !important;
background-repeat: no-repeat;
background-position: 50% 43%;
background-size: cover;
}
body.nx .nx-card.has-photo .nx-card-media > img:is(
[src*="/cache/art/"],
[src*="/api/art.php"]
) {
visibility: hidden;
}
body.nx .nx-card.has-photo .nx-card-media > .nx-scrim {
z-index: 2;
}
@media (forced-colors: active), print {
body.nx .nx-card.has-photo .nx-card-media > img {
visibility: visible;
}
}
:root,
:root[data-theme="light"] {
--news-paper: #f4f0e7;
--news-paper-2: #fbf8f1;
--news-surface: #fffdf8;
--news-ink: #071522;
--news-copy: #353a3e;
--news-muted: #706d66;
--news-faint: #9a958b;
--news-rule: #d5cec0;
--news-rule-strong: #a79c88;
--news-brass: #a88443;
--news-brass-bright: #c3a568;
--news-live: #a11c30;
--news-night: #071522;
--news-night-2: #0d2233;
--news-on-night: #f7f2e8;
--news-on-night-muted: #c5c0b6;
--news-radius: 2px;
--news-row-gap: clamp(58px, 6.4vw, 96px);
--news-shadow: 0 22px 64px -48px rgb(20 15 8 / .45);
--headline-weight: 700;
--headline-leading: 1.04;
--label-tracking: .075em;
--paper: var(--news-paper);
--paper-2: var(--news-paper-2);
--surface: var(--news-surface);
--surface-2: var(--news-paper-2);
--panel: var(--news-surface);
--panel-2: var(--news-paper-2);
--tx: var(--news-ink);
--tx-2: var(--news-copy);
--tx-3: var(--news-muted);
--tx-dim: var(--news-faint);
--hair: var(--news-rule);
--hair-2: var(--news-rule-strong);
--live: var(--news-live);
--rowgap: var(--news-row-gap);
--wrap: 1360px;
--top-h: 90px;
--gap: clamp(18px, 1.8vw, 28px);
--r-s: var(--news-radius);
--r-m: var(--news-radius);
--r-l: var(--news-radius);
--r-xl: var(--news-radius);
--sh-1: none;
--sh-2: var(--news-shadow);
--sh-hot: var(--news-shadow);
--photo-grade: saturate(.9) contrast(1.035);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--news-paper: #0b1117;
--news-paper-2: #101820;
--news-surface: #131d25;
--news-ink: #f5f0e6;
--news-copy: #d2cec5;
--news-muted: #aaa59b;
--news-faint: #89857d;
--news-rule: #303b43;
--news-rule-strong: #596169;
--news-brass: #c3a568;
--news-brass-bright: #d4bb87;
--news-night: #050b10;
--news-night-2: #0c1a25;
--news-shadow: 0 24px 70px -42px rgb(0 0 0 / .86);
}
}
:root[data-theme="dark"] {
--news-paper: #0b1117;
--news-paper-2: #101820;
--news-surface: #131d25;
--news-ink: #f5f0e6;
--news-copy: #d2cec5;
--news-muted: #aaa59b;
--news-faint: #89857d;
--news-rule: #303b43;
--news-rule-strong: #596169;
--news-brass: #c3a568;
--news-brass-bright: #d4bb87;
--news-night: #050b10;
--news-night-2: #0c1a25;
--news-shadow: 0 24px 70px -42px rgb(0 0 0 / .86);
}
:root[data-script="hebrew"] {
--headline-weight: 750;
--headline-leading: 1.12;
--label-tracking: 0;
}
:root[data-script="arabic"] {
--headline-weight: 700;
--headline-leading: 1.42;
--label-tracking: 0;
}
:root[data-script="devanagari"] {
--headline-weight: 700;
--headline-leading: 1.32;
--label-tracking: 0;
}
:root:is(
[data-script="sc"], [data-script="tc"], [data-script="jp"],
[data-script="kr"], [data-script="thai"], [data-script="tamil"],
[data-script="bengali"], [data-script="ethiopic"]
) {
--headline-leading: 1.32;
--label-tracking: 0;
}
html body.nx {
min-inline-size: 0;
background: var(--news-paper);
color: var(--news-ink);
}
body.nx::before,
body.nx::after { display: none; }
body.nx :is(.nx-hl, .nx-sect-title, .nx-art-h1, .nx-page-h1, .nx-live-title) {
font-family: var(--f-hl);
font-synthesis: none;
font-weight: var(--headline-weight);
line-height: var(--headline-leading);
letter-spacing: var(--label-tracking);
}
:root:is(
[data-script="hebrew"], [data-script="arabic"], [data-script="devanagari"],
[data-script="sc"], [data-script="tc"], [data-script="jp"],
[data-script="kr"], [data-script="thai"], [data-script="tamil"],
[data-script="bengali"], [data-script="ethiopic"]
) body.nx :is(.nx-kick-sec, .nx-badge, .nx-navlink, .nx-ticker-lbl, .nx-byline-brand) {
letter-spacing: 0;
text-transform: none;
}
body.nx :is(a, button, [tabindex]):focus-visible {
outline: 2px solid var(--news-live);
outline-offset: 3px;
}
body.nx .nx-top {
position: sticky;
inset-block-start: 0;
z-index: 90;
border: 0;
background: color-mix(in srgb, var(--news-paper-2) 94%, transparent);
box-shadow: none;
backdrop-filter: blur(14px) saturate(112%);
-webkit-backdrop-filter: blur(14px) saturate(112%);
}
body.nx .nx-top::before {
content: "";
position: absolute;
inset: 0;
block-size: auto;
pointer-events: none;
background: url("/assets/img/nxews-worldline.svg") center 42% / min(1120px, 86vw) auto no-repeat;
opacity: .055;
}
body.nx .nx-top::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: 0;
block-size: 4px;
opacity: 1;
background:
linear-gradient(var(--news-ink), var(--news-ink)) 0 0 / 100% 1px no-repeat,
linear-gradient(var(--news-brass), var(--news-brass)) 0 3px / 100% 1px no-repeat;
}
body.nx .nx-top.is-stuck {
background: color-mix(in srgb, var(--news-paper-2) 97%, transparent);
box-shadow: 0 18px 34px -30px rgb(7 21 34 / .55);
}
body.nx .nx-top-in {
position: relative;
display: grid;
grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr);
align-items: center;
gap: clamp(12px, 2vw, 28px);
min-block-size: 90px;
}
body.nx .nx-brand {
grid-column: 2;
grid-row: 1;
order: initial;
justify-self: center;
display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: 44px;
min-block-size: 44px;
padding: 0;
color: var(--news-ink);
}
body.nx .nx-brand-mark { display: block; line-height: 0; }
body.nx .nx-brand svg.nx-mark {
display: block;
inline-size: clamp(218px, 20vw, 286px);
block-size: auto;
overflow: visible;
color: currentColor;
filter: none;
direction: ltr;
unicode-bidi: isolate;
}
body.nx .nx-brand:hover { color: var(--news-ink); }
body.nx .nx-brand:hover svg { filter: none; }
body.nx .nx-nameplate-live { fill: var(--news-live); }
body.nx .nx-live-pill {
grid-column: 1;
grid-row: 1;
order: initial;
justify-self: start;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-inline-size: 44px;
min-block-size: 44px;
padding: 0 8px;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--news-live);
font-size: .7rem;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
}
body.nx .nx-live-pill::before,
body.nx .nx-live-pill::after { display: none; animation: none; }
body.nx .nx-live-wave i { background: currentColor; animation: none; }
body.nx .nx-live-wave i:nth-child(1) { block-size: 35%; }
body.nx .nx-live-wave i:nth-child(2) { block-size: 100%; }
body.nx .nx-live-wave i:nth-child(3) { block-size: 62%; }
body.nx .nx-capsule {
grid-column: 3;
grid-row: 1;
order: initial;
justify-self: end;
display: flex;
align-items: center;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body.nx .nx-caplinks { display: none; }
body.nx .nx-icons { display: flex; gap: 1px; }
body.nx .nx-ic,
body.nx .nx-burger {
inline-size: 44px;
block-size: 44px;
border: 0;
border-radius: 50%;
background: transparent;
box-shadow: none;
color: var(--news-ink);
}
body.nx :is(.nx-ic, .nx-burger):hover { background: rgb(168 132 67 / .1); color: var(--news-ink); }
body.nx .nx-burger { display: none; }
body.nx .nx-nav {
z-index: 25;
border: 0;
border-block-end: 1px solid var(--news-rule-strong);
background: var(--news-paper-2);
}
body.nx .nx-nav-in {
justify-content: center;
gap: clamp(2px, .4vw, 8px);
min-block-size: 43px;
-webkit-mask-image: none;
mask-image: none;
}
body.nx .nx-navlink {
min-block-size: 42px;
padding: 12px clamp(9px, .9vw, 14px) 10px;
color: var(--news-muted);
font-size: clamp(.76rem, .72rem + .12vw, .84rem);
font-weight: 650;
letter-spacing: .035em;
}
body.nx .nx-navlink::after {
inset-inline: 10px;
block-size: 2px;
border-radius: 0;
background: var(--sec-fill);
}
body.nx .nx-navlink:is(:hover, .is-on) { color: var(--news-ink); }
body.nx .nx-ticker {
z-index: 20;
border: 0;
border-block-end: 1px solid var(--news-rule);
background: var(--news-paper);
}
body.nx .nx-ticker-in { min-block-size: 31px; align-items: center; }
body.nx .nx-ticker-lbl {
align-self: stretch;
gap: 5px;
margin: 0 14px 0 0;
padding: 0 11px;
border: 0;
clip-path: none;
background: var(--news-live);
color: #fff;
font-size: .62rem;
letter-spacing: .1em;
}
[dir="rtl"] body.nx .nx-ticker-lbl { margin: 0 0 0 14px; clip-path: none; }
body.nx .nx-ticker-view { -webkit-mask-image: none; mask-image: none; }
body.nx .nx-ticker-item {
padding-block: 6px;
color: var(--news-copy);
font-size: .78rem;
}
body.nx .nx-ticker-item::after { background: var(--news-brass); }
body.nx .nx-main {
min-inline-size: 0;
padding-block: clamp(30px, 4vw, 56px) clamp(58px, 7vw, 104px);
background: transparent;
}
body.nx .nx-wrap,
body.nx .nx-card,
body.nx .nx-card-link,
body.nx .nx-card-body { min-inline-size: 0; }
body.nx.is-home .nx-heroblock {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(22px, 2.8vw, 38px);
padding-block-end: clamp(26px, 3.4vw, 44px);
border-block-end: 1px solid var(--news-rule-strong);
}
body.nx.is-home .nx-heroblock-main { display: grid; }
body.nx.is-home .nx-heroblock-main .nx-card.is-hero { min-block-size: clamp(520px, 48vw, 680px); }
body.nx.is-home .nx-heroblock-main .nx-card.is-hero > .nx-card-link {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(340px, .85fr);
grid-template-areas: "media copy";
min-block-size: 100%;
overflow: hidden;
border: 1px solid var(--news-ink);
border-radius: var(--news-radius);
background: var(--news-night);
box-shadow: var(--news-shadow);
color: var(--news-on-night);
}
[dir="rtl"] body.nx.is-home .nx-heroblock-main .nx-card.is-hero > .nx-card-link {
grid-template-columns: minmax(340px, .85fr) minmax(0, 1.55fr);
grid-template-areas: "copy media";
}
body.nx.is-home .nx-heroblock-main .nx-card.is-hero .nx-card-media {
grid-area: media;
block-size: 100%;
min-block-size: 520px;
aspect-ratio: auto;
border: 0;
border-radius: 0;
background: var(--news-night-2);
}
body.nx .nx-card-media img,
body.nx .nx-art-hero-img,
body.nx .nx-player-poster {
object-position: var(--focus-x, 50%) var(--focus-y, 42%);
}
body.nx.is-home .nx-heroblock-main .nx-card.is-hero .nx-scrim { display: none; }
body.nx.is-home .nx-heroblock-main .nx-card.is-hero .nx-card-body {
grid-area: copy;
align-self: stretch;
justify-content: center;
inline-size: auto;
padding: clamp(34px, 4.2vw, 68px) clamp(28px, 3.8vw, 58px);
border: 0;
background:
linear-gradient(90deg, rgb(183 154 93 / .18), transparent 18%) top / 100% 1px no-repeat,
var(--news-night);
color: var(--news-on-night);
}
[dir="rtl"] body.nx.is-home .nx-heroblock-main .nx-card.is-hero .nx-card-body {
background:
linear-gradient(270deg, rgb(183 154 93 / .18), transparent 18%) top / 100% 1px no-repeat,
var(--news-night);
}
body.nx.is-home .nx-heroblock-main .nx-card.is-hero .nx-card-body::before {
content: "";
position: static;
display: block;
inline-size: 68px;
block-size: 2px;
margin-block-end: 8px;
background: var(--news-brass);
}
body.nx.is-home .nx-heroblock-main .nx-card.is-hero .nx-hl {
max-inline-size: 15ch;
color: var(--news-on-night);
font-size: calc(clamp(2.7rem, 4.5vw, 5.45rem) * var(--hl-scale));
line-height: var(--headline-leading);
text-shadow: none;
text-wrap: balance;
}
html[data-script="hebrew"] body.nx.is-home .nx-heroblock-main .nx-card.is-hero .nx-hl {
max-inline-size: 17ch;
font-size: clamp(2.55rem, 4.1vw, 4.9rem);
}
body.nx.is-home .nx-heroblock-main .nx-card.is-hero .nx-dek {
max-inline-size: 42ch;
color: var(--news-on-night-muted);
font-size: clamp(1rem, .94rem + .28vw, 1.22rem);
line-height: 1.6;
text-shadow: none;
}
body.nx.is-home .nx-heroblock-main .nx-card.is-hero .nx-meta {
color: var(--news-on-night-muted);
}
body.nx.is-home .nx-heroblock-main .nx-card.is-hero .nx-kick-sec {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
color: var(--news-brass-bright);
}
body.nx.is-home .nx-heroblock-stack {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(18px, 2vw, 30px);
align-items: stretch;
}
body.nx.is-home .nx-heroblock-stack > .nx-card > .nx-card-link {
display: flex;
flex-direction: column;
block-size: 100%;
border: 0;
border-block-end: 1px solid var(--news-rule-strong);
border-radius: 0;
background: transparent;
box-shadow: none;
}
body.nx.is-home .nx-heroblock-stack > .nx-card .nx-card-media {
order: 0;
block-size: auto;
min-block-size: 0;
aspect-ratio: 3 / 2;
border-radius: var(--news-radius);
}
body.nx.is-home .nx-heroblock-stack > .nx-card .nx-card-body {
order: 1;
gap: 8px;
padding: 16px 1px 20px;
}
body.nx.is-home .nx-heroblock-stack > .nx-card .nx-hl {
font-size: calc(clamp(1.25rem, 1.02rem + .75vw, 1.85rem) * var(--hl-scale));
line-height: max(var(--headline-leading), 1.14);
}
body.nx.is-home .nx-heroblock-stack > .nx-card .nx-dek {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
}
body.nx .nx-card > .nx-card-link {
overflow: hidden;
border: 0;
border-radius: var(--news-radius);
background: transparent;
box-shadow: none;
color: var(--news-ink);
transition: none;
}
body.nx .nx-card-media {
overflow: hidden;
aspect-ratio: 3 / 2;
border: 0;
border-radius: var(--news-radius);
background: var(--news-paper-2);
box-shadow: inset 0 0 0 1px rgb(7 21 34 / .08);
}
body.nx .nx-card-media::before,
body.nx .nx-card-media::after { display: none; }
body.nx .nx-card .nx-scrim { display: none; }
body.nx .nx-card-media img {
filter: var(--photo-grade);
transform: none;
transition: transform .4s ease, filter .3s ease;
}
body.nx .nx-card.has-art .nx-card-media img {
filter: grayscale(.72) sepia(.1) saturate(.42) contrast(1.08);
}
body.nx .nx-card:not(.is-hero) .nx-card-body {
gap: 8px;
padding: 15px 1px 18px;
border: 0;
background: transparent;
}
body.nx .nx-kicker { min-block-size: 18px; gap: 7px; }
body.nx .nx-card .nx-kick-sec,
body.nx .nx-art-head .nx-kick-sec {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--news-muted);
font-size: clamp(.66rem, .63rem + .08vw, .72rem);
font-weight: 750;
letter-spacing: var(--label-tracking);
text-transform: uppercase;
}
body.nx .nx-card .nx-kick-sec::before,
body.nx .nx-art-head .nx-kick-sec::before {
content: "";
inline-size: 18px;
block-size: 2px;
flex: none;
background: var(--sec-fill);
}
body.nx .nx-badge {
padding: 3px 7px;
border: 0;
border-radius: 1px;
box-shadow: none;
font-size: .66rem;
}
body.nx .nx-badge.is-breaking,
body.nx .nx-badge.is-live { background: var(--news-live); color: #fff; }
body.nx .nx-badge.is-live .nx-live-dot { background: #fff; box-shadow: none; animation: none; }
body.nx .nx-card .nx-hl {
color: var(--news-ink);
font-size: calc(clamp(1.08rem, .97rem + .35vw, 1.38rem) * var(--hl-scale));
line-height: max(var(--headline-leading), 1.16);
text-shadow: none;
}
body.nx .nx-card.is-lead .nx-hl {
font-size: calc(clamp(1.55rem, 1.18rem + 1.06vw, 2.5rem) * var(--hl-scale));
}
body.nx .nx-card .nx-dek {
color: var(--news-copy);
font-size: clamp(.88rem, .84rem + .12vw, .96rem);
line-height: 1.55;
}
body.nx .nx-card:is(.is-tile, .is-vod) .nx-dek { display: none; }
body.nx .nx-card .nx-meta {
gap: 5px 10px;
margin-block-start: auto;
padding: 0;
color: var(--news-muted);
font-size: max(.72rem, 12px);
line-height: 1.35;
}
body.nx .nx-card .nx-meta .nx-src,
body.nx .nx-card .nx-credit-label,
body.nx .nx-card .nx-credit-illus {
max-inline-size: 42ch;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--news-faint);
font-size: inherit;
font-weight: 500;
}
body.nx .nx-card:is(.is-list, .is-mini) > .nx-card-link {
overflow: visible;
border: 0;
border-block-end: 1px solid var(--news-rule);
border-radius: 0;
background: transparent;
}
body.nx .nx-card.is-list .nx-card-body { padding: 14px 4px 15px; }
body.nx .nx-card.is-mini .nx-card-body { padding: 12px 3px; }
body.nx .nx-card.is-mini .nx-hl { font-weight: 650; }
@media (hover: hover) and (pointer: fine) {
body.nx .nx-card:hover > .nx-card-link {
transform: none;
border-color: transparent;
box-shadow: none;
}
body.nx .nx-card:hover .nx-card-media img { transform: scale(1.012); }
body.nx .nx-card:hover .nx-hl {
color: var(--news-ink);
text-decoration: underline;
text-decoration-color: var(--news-brass);
text-decoration-thickness: 1px;
text-underline-offset: .14em;
}
body.nx .nx-card:hover .nx-kick-sec { background: transparent; box-shadow: none; color: var(--news-ink); }
}
body.nx .nx-sect { margin-block-start: var(--news-row-gap); }
body.nx .nx-sect-head {
position: relative;
min-block-size: 46px;
margin-block-end: clamp(20px, 2.3vw, 32px);
padding: 0 0 12px;
border: 0;
border-block-end: 1px solid var(--news-rule-strong);
background: transparent;
}
body.nx .nx-sect-head::after {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-end: -1px;
inline-size: clamp(54px, 7vw, 96px);
block-size: 2px;
background: var(--news-brass);
}
body.nx .nx-sect-title {
gap: 10px;
color: var(--news-ink);
font-size: calc(clamp(1.7rem, 1.32rem + 1vw, 2.55rem) * var(--hl-scale));
}
body.nx .nx-sect-title::before {
inline-size: 5px;
block-size: 5px;
border-radius: 50%;
background: var(--sec-fill);
box-shadow: 0 0 0 1px var(--news-paper), 0 0 0 3px var(--news-rule);
}
body.nx .nx-more {
min-inline-size: 44px;
min-block-size: 44px;
justify-content: end;
padding: 0;
color: var(--news-muted);
}
body.nx .nx-latestband { margin-block-start: clamp(42px, 5vw, 76px); }
body.nx .nx-latest {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: clamp(24px, 3vw, 48px);
border-block: 1px solid var(--news-rule);
}
body.nx .nx-latest > .nx-card:nth-child(n + 7) { display: none; }
body.nx .nx-latest .nx-card-link { block-size: 100%; }
body.nx.is-home .nx-tri {
grid-template-columns: minmax(0, 7fr) minmax(220px, 2.35fr) minmax(220px, 2.35fr);
gap: clamp(24px, 2.8vw, 42px);
margin-block-start: var(--news-row-gap);
padding-block: clamp(30px, 3.6vw, 52px);
border-block: 1px solid var(--news-rule-strong);
}
body.nx .nx-tri-main .nx-grid { gap: clamp(20px, 2vw, 30px); }
body.nx .nx-tri-main .nx-grid > .nx-card { border-block-end: 1px solid var(--news-rule); }
body.nx :is(.nx-live, .nx-tri-read .nx-numlist) {
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body.nx .nx-live-head {
min-block-size: 47px;
padding-inline: 0;
border: 0;
border-block-end: 2px solid var(--news-live);
background: transparent;
color: var(--news-live);
}
body.nx :is(.nx-live-body, .nx-live-item) { border-radius: 0; background: transparent; box-shadow: none; }
body.nx .nx-numlist > li + li > .nx-card { border-block-start: 0; }
body.nx .nx-rank { color: var(--news-brass); opacity: .7; font-family: var(--f-hl); }
body.nx.is-home .nx-secband {
padding-block: 0;
border: 0;
background: transparent;
}
body.nx.is-home .nx-secband::before { display: none; }
body.nx.is-home .nx-secband-in { gap: clamp(26px, 3.2vw, 52px); }
body.nx.is-home .nx-secband.is-flip .nx-secband-lead { order: 2; }
body.nx.is-home .nx-secband.is-flip .nx-secband-rest { order: 1; }
body.nx.is-home .nx-secband-rest .nx-card { border-block-end: 1px solid var(--news-rule); }
body.nx.is-home .nx-sect.is-vodrail {
padding: clamp(30px, 4vw, 56px);
border: 1px solid #183246;
border-radius: var(--news-radius);
background:
url("/assets/img/nxews-worldline.svg") center 14% / 980px auto no-repeat,
var(--news-night);
color: var(--news-on-night);
box-shadow: var(--news-shadow);
}
body.nx.is-home .nx-sect.is-vodrail .nx-sect-head { border-block-end-color: rgb(247 242 232 / .28); }
body.nx.is-home .nx-sect.is-vodrail :is(.nx-sect-title, .nx-hl) { color: var(--news-on-night); }
body.nx.is-home .nx-sect.is-vodrail :is(.nx-dek, .nx-meta, .nx-more) { color: var(--news-on-night-muted); }
body.nx.is-home .nx-sect.is-vodrail .nx-card-body { padding-inline: 0; }
body.nx .nx-rowscroll-in { gap: clamp(20px, 2vw, 30px); }
body.nx .nx-rowscroll-in > .nx-card { scroll-snap-align: start; }
body.nx.is-article .nx-main { padding-block-start: clamp(42px, 6vw, 88px); }
body.nx .nx-art-in {
grid-template-columns:
minmax(0, 1fr)
[wide-start] minmax(0, 120px)
[text-start] min(820px, 100%) [text-end]
minmax(0, 120px) [wide-end]
minmax(0, 1fr);
row-gap: clamp(26px, 3.2vw, 46px);
}
body.nx .nx-art-head {
gap: clamp(14px, 1.7vw, 22px);
padding-block-start: 20px;
border-block-start: 2px solid var(--news-brass);
}
body.nx .nx-art-h1 {
max-inline-size: 18ch;
color: var(--news-ink);
font-size: calc(clamp(3rem, 4.9vw, 5.75rem) * var(--hl-scale));
text-wrap: balance;
}
html[data-script="hebrew"] body.nx .nx-art-h1 {
max-inline-size: 20ch;
font-size: clamp(2.75rem, 4.4vw, 5.2rem);
}
body.nx .nx-art-dek {
max-inline-size: 50ch;
color: var(--news-copy);
font-size: clamp(1.14rem, 1.02rem + .48vw, 1.48rem);
line-height: 1.58;
}
body.nx .nx-byline {
padding-block: 15px;
border-color: var(--news-rule);
color: var(--news-muted);
}
body.nx .nx-byline-brand { color: var(--news-ink); }
body.nx .nx-byline-brand::before { inline-size: 18px; block-size: 2px; border-radius: 0; background: var(--news-brass); }
body.nx .nx-share {
min-block-size: 44px;
padding: 8px 14px;
border: 1px solid var(--news-rule-strong);
border-radius: var(--news-radius);
background: transparent;
color: var(--news-ink);
box-shadow: none;
}
body.nx .nx-share:hover { border-color: var(--news-brass); background: transparent; color: var(--news-ink); }
body.nx .nx-art-in > .nx-art-hero {
grid-column: wide;
inline-size: 100%;
max-block-size: none;
margin: 0;
overflow: hidden;
aspect-ratio: 16 / 9;
border: 1px solid var(--news-rule-strong);
border-radius: var(--news-radius);
background: var(--news-paper-2);
box-shadow: var(--news-shadow);
}
body.nx .nx-art-hero::before { display: none; }
body.nx .nx-art-hero .nx-scrim {
background: linear-gradient(to top, rgb(4 10 15 / .7), transparent 30%);
}
body.nx .nx-art-credit {
inset-block-end: 10px;
inset-inline-end: 13px;
color: #f3eee4;
font-size: max(.72rem, 12px);
text-shadow: 0 1px 6px rgb(0 0 0 / .72);
}
body.nx :is(.nx-keypoints, .nx-sources, .nx-artfoot) {
border-radius: var(--news-radius);
box-shadow: none;
}
body.nx .nx-keypoints {
padding: clamp(22px, 2.7vw, 36px);
border: 1px solid var(--news-rule-strong);
background: var(--news-paper-2);
}
body.nx .nx-keypoints::before { inline-size: 2px; background: var(--news-brass); }
body.nx .nx-keypoints-t { color: var(--news-ink); }
body.nx .nx-keypoints li::before { background: var(--news-brass); box-shadow: none; }
body.nx .nx-origin-note { border-radius: var(--news-radius); background: var(--news-paper-2); }
body.nx :is(.nx-pagehead, .nx-secpage-head, .nx-topic-head, .nx-searchhead) {
border-radius: var(--news-radius);
background: transparent;
box-shadow: none;
}
body.nx :is(.nx-page-h1, .nx-secpage-h1, .nx-topic-h1) {
color: var(--news-ink);
font-family: var(--f-hl);
font-weight: var(--headline-weight);
line-height: var(--headline-leading);
}
@media screen and (max-width: 1099px) {
body.nx.is-home .nx-heroblock-main .nx-card.is-hero { min-block-size: 0; }
body.nx.is-home .nx-heroblock-main .nx-card.is-hero > .nx-card-link,
[dir="rtl"] body.nx.is-home .nx-heroblock-main .nx-card.is-hero > .nx-card-link {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "media" "copy";
}
body.nx.is-home .nx-heroblock-main .nx-card.is-hero .nx-card-media {
block-size: auto;
min-block-size: 0;
aspect-ratio: 16 / 9;
}
body.nx.is-home .nx-heroblock-main .nx-card.is-hero .nx-card-body {
min-block-size: 330px;
}
body.nx.is-home .nx-tri { grid-template-columns: minmax(0, 1fr); }
body.nx.is-home .nx-tri-main { grid-column: auto; }
body.nx.is-home .nx-tri-live,
body.nx.is-home .nx-tri-read { padding-block-start: 24px; border-block-start: 1px solid var(--news-rule); }
}
@media screen and (max-width: 900px) {
body.nx .nx-nav-in { justify-content: start; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
[dir="rtl"] body.nx .nx-nav-in { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 28px), transparent); }
body.nx.is-home .nx-heroblock-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.nx.is-home .nx-heroblock-stack > .nx-card:first-child { grid-column: 1 / -1; }
body.nx .nx-latest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.nx.is-home .nx-secband-in { grid-template-columns: minmax(0, 1fr); }
body.nx.is-home .nx-secband.is-flip :is(.nx-secband-lead, .nx-secband-rest) { order: initial; }
}
@media screen and (max-width: 760px) {
:root { --top-h: 62px; --gut: clamp(14px, 4vw, 22px); }
body.nx .nx-top-in { min-block-size: 62px; }
body.nx .nx-brand svg.nx-mark { inline-size: clamp(142px, 42vw, 184px); }
body.nx .nx-capsule { display: none; }
body.nx .nx-burger {
display: grid;
grid-column: 3;
grid-row: 1;
justify-self: end;
}
body.nx .nx-live-pill { padding: 0; }
body.nx .nx-navlink { padding-inline: 10px; }
body.nx .nx-ticker-lbl { padding-inline: 9px; margin-inline-end: 8px; }
body.nx .nx-main { padding-block-start: 24px; }
body.nx.is-home .nx-heroblock { gap: 22px; }
body.nx.is-home .nx-heroblock-main .nx-card.is-hero .nx-card-media { aspect-ratio: 4 / 3; }
body.nx.is-home .nx-heroblock-main .nx-card.is-hero .nx-card-body {
min-block-size: 0;
padding: clamp(28px, 8vw, 46px) clamp(22px, 6vw, 36px);
}
body.nx.is-home .nx-heroblock-main .nx-card.is-hero .nx-hl {
max-inline-size: none;
font-size: calc(clamp(2.1rem, 8.3vw, 3.45rem) * var(--hl-scale));
}
body.nx.is-home .nx-heroblock-stack { grid-template-columns: minmax(0, 1fr); gap: 0; }
body.nx.is-home .nx-heroblock-stack > .nx-card:first-child { grid-column: auto; }
body.nx.is-home .nx-heroblock-stack > .nx-card > .nx-card-link {
display: grid;
grid-template-columns: clamp(104px, 31vw, 128px) minmax(0, 1fr);
align-items: stretch;
min-block-size: 116px;
border-block-end: 1px solid var(--news-rule-strong);
}
body.nx.is-home .nx-heroblock-stack > .nx-card .nx-card-media {
block-size: 100%;
min-block-size: 108px;
aspect-ratio: auto;
border-radius: 0;
}
body.nx.is-home .nx-heroblock-stack > .nx-card .nx-card-body { padding: 13px 14px; }
body.nx.is-home .nx-heroblock-stack > .nx-card .nx-hl {
font-size: calc(clamp(1.05rem, 3.9vw, 1.28rem) * var(--hl-scale));
}
body.nx.is-home .nx-heroblock-stack > .nx-card :is(.nx-dek, .nx-src) { display: none; }
body.nx.is-home .nx-heroblock-main .nx-card.is-hero .nx-src { display: none; }
body.nx .nx-latest { grid-template-columns: minmax(0, 1fr); }
body.nx .nx-latest > .nx-card:nth-child(n + 5) { display: none; }
body.nx .nx-grid.is-4,
body.nx .nx-grid.is-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.nx.is-home .nx-sect.is-vodrail { padding: 28px 20px; }
body.nx .nx-art-h1 { font-size: calc(clamp(2.4rem, 9vw, 4.2rem) * var(--hl-scale)); }
body.nx .nx-art-in > .nx-art-hero { grid-column: wide; }
}
@media screen and (max-width: 560px) {
body.nx .nx-grid.is-2,
body.nx .nx-grid.is-3,
body.nx .nx-grid.is-4,
body.nx .nx-grid.is-6,
body.nx .nx-secband-rest.nx-grid.is-2,
body.nx .nx-secband-rest.nx-grid.is-3,
body.nx .nx-secband-rest.nx-grid.is-4 { grid-template-columns: minmax(0, 1fr); }
body.nx .nx-art-in > .nx-art-hero {
display: block;
overflow: visible;
aspect-ratio: auto;
border: 0;
box-shadow: none;
}
body.nx .nx-art-hero-img {
display: block;
inline-size: 100%;
aspect-ratio: 16 / 10;
border: 1px solid var(--news-rule-strong);
object-fit: cover;
}
body.nx .nx-art-hero .nx-scrim { display: none; }
body.nx .nx-art-credit {
position: static;
display: block;
max-inline-size: none;
padding-block: 8px 0;
color: var(--news-muted);
text-align: start;
text-shadow: none;
}
body.nx .nx-art-credit a { text-decoration-color: currentColor; }
body.nx .nx-byline { align-items: flex-start; }
body.nx .nx-share {
flex-basis: 100%;
inline-size: fit-content;
margin-inline-start: 0;
}
}
@media screen and (max-width: 390px) {
body.nx .nx-brand svg.nx-mark { inline-size: 136px; }
body.nx .nx-live-txt {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
body.nx.is-home .nx-heroblock-stack > .nx-card > .nx-card-link {
grid-template-columns: 96px minmax(0, 1fr);
}
}
@media (prefers-reduced-motion: reduce) {
body.nx .nx-ticker-track { animation: none; }
body.nx .nx-card-media img { transition: none; }
body.nx .nx-live-dot { animation: none; }
}
@media (prefers-contrast: more) {
:root { --news-rule: var(--news-rule-strong); }
body.nx .nx-card-media,
body.nx .nx-art-hero { border: 1px solid currentColor; }
}
@media (forced-colors: active) {
body.nx .nx-top,
body.nx.is-home .nx-heroblock-main .nx-card.is-hero > .nx-card-link,
body.nx.is-home .nx-sect.is-vodrail { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
body.nx.is-home .nx-heroblock-main .nx-card.is-hero :is(.nx-card-body, .nx-hl, .nx-dek, .nx-meta),
body.nx.is-home .nx-sect.is-vodrail :is(.nx-sect-title, .nx-hl, .nx-meta) { background: Canvas; color: CanvasText; }
}
@media print {
body.nx .nx-top,
body.nx .nx-nav,
body.nx .nx-ticker { display: none; }
body.nx.is-home .nx-heroblock-main .nx-card.is-hero > .nx-card-link {
grid-template-columns: 1fr;
grid-template-areas: "media" "copy";
border: 1px solid #777;
}
body.nx.is-home .nx-heroblock-main .nx-card.is-hero :is(.nx-card-body, .nx-hl, .nx-dek, .nx-meta) {
background: #fff;
color: #000;
}
}
body.nx .nx-top,
body.nx .nx-top.is-stuck {
background: var(--news-paper-2);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body.nx.is-home .nx-secband::after { display: none; }
body.nx .nx-card .nx-hl::after { display: none; }
body.nx .nx-live-pill,
body.nx .nx-live-pill:hover { transform: none; }
body.nx .nx-card-media img { animation: none; }
body.nx .nx-card.has-art .nx-card-media {
background: #091723;
box-shadow:
inset 0 0 0 1px rgb(168 132 67 / .42),
0 18px 38px -30px rgb(7 21 34 / .72);
}
body.nx .nx-card.has-art .nx-card-media img,
body.nx .nx-art-hero.has-art .nx-art-hero-img {
filter: none;
object-position: 50% 50%;
}
body.nx .nx-card.has-art.art-crop-1 .nx-card-media img {
object-position: 27% 50%;
scale: 1.12;
}
body.nx .nx-card.has-art.art-crop-2 .nx-card-media img {
object-position: 73% 50%;
scale: 1.09;
}
body.nx .nx-card.art-atlas .nx-card-media { --plate-accent: #a88443; }
body.nx .nx-card.art-ledger .nx-card-media { --plate-accent: #4f8278; }
body.nx .nx-card.art-dossier .nx-card-media { --plate-accent: #9d2b39; }
body.nx .nx-card.art-motion .nx-card-media { --plate-accent: #af813d; }
body.nx .nx-media-frame {
position: absolute;
z-index: 3;
inset: 9px;
display: none;
pointer-events: none;
background:
linear-gradient(var(--plate-accent, var(--news-brass)), var(--plate-accent, var(--news-brass))) 0 0 / 25px 1px no-repeat,
linear-gradient(var(--plate-accent, var(--news-brass)), var(--plate-accent, var(--news-brass))) 0 0 / 1px 25px no-repeat,
linear-gradient(var(--plate-accent, var(--news-brass)), var(--plate-accent, var(--news-brass))) 100% 0 / 25px 1px no-repeat,
linear-gradient(var(--plate-accent, var(--news-brass)), var(--plate-accent, var(--news-brass))) 100% 0 / 1px 25px no-repeat,
linear-gradient(var(--plate-accent, var(--news-brass)), var(--plate-accent, var(--news-brass))) 0 100% / 25px 1px no-repeat,
linear-gradient(var(--plate-accent, var(--news-brass)), var(--plate-accent, var(--news-brass))) 0 100% / 1px 25px no-repeat,
linear-gradient(var(--plate-accent, var(--news-brass)), var(--plate-accent, var(--news-brass))) 100% 100% / 25px 1px no-repeat,
linear-gradient(var(--plate-accent, var(--news-brass)), var(--plate-accent, var(--news-brass))) 100% 100% / 1px 25px no-repeat;
opacity: .78;
}
body.nx .nx-card.has-art .nx-media-frame,
body.nx .nx-art-hero.has-art .nx-media-frame { display: block; }
body.nx .nx-card .nx-credit-illus {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--news-muted);
font-size: max(.74rem, 12px);
font-weight: 620;
letter-spacing: .035em;
}
body.nx .nx-card .nx-credit-illus::before {
content: "";
inline-size: 12px;
block-size: 1px;
background: var(--news-brass);
}
body.nx.is-home :is(.nx-heroblock-main, .nx-sect.is-vodrail) .nx-credit-illus {
color: var(--news-on-night-muted);
}
body.nx .nx-masthead {
position: relative;
isolation: isolate;
overflow: hidden;
min-block-size: clamp(220px, 22vw, 330px);
margin-block-start: clamp(28px, 4vw, 58px);
padding: clamp(42px, 6vw, 84px) clamp(26px, 5vw, 76px);
border: 1px solid #253c4d;
border-radius: var(--news-radius);
background:
linear-gradient(90deg, rgb(5 13 20 / .96) 0%, rgb(5 13 20 / .82) 48%, rgb(5 13 20 / .36) 100%),
url("/assets/img/editorial/plate-atlas-wide.webp") 76% 50% / cover no-repeat,
var(--news-night);
box-shadow: var(--news-shadow);
color: var(--news-on-night);
}
[dir="rtl"] body.nx .nx-masthead {
background:
linear-gradient(270deg, rgb(5 13 20 / .96) 0%, rgb(5 13 20 / .82) 48%, rgb(5 13 20 / .36) 100%),
url("/assets/img/editorial/plate-atlas-wide.webp") 24% 50% / cover no-repeat,
var(--news-night);
}
body.nx .nx-masthead::before {
content: "";
position: absolute;
z-index: -1;
inset: 13px;
inline-size: auto;
block-size: auto;
border: 1px solid rgb(195 165 104 / .42);
border-radius: 0;
background: none;
opacity: 1;
filter: none;
box-shadow: none;
transform: none;
pointer-events: none;
}
body.nx .nx-masthead::after {
content: "";
position: absolute;
z-index: -1;
inset-inline: clamp(26px, 5vw, 76px);
inset-block-end: 28px;
block-size: 18px;
background: url("/assets/img/nxews-ledger-rule.svg") center / 100% 18px no-repeat;
opacity: .72;
pointer-events: none;
}
body.nx .nx-masthead > * { position: relative; z-index: 1; max-inline-size: 650px; }
body.nx .nx-masthead-title,
body.nx .nx-masthead-title .nx-i { color: var(--news-on-night); }
body.nx .nx-masthead-title { font-size: calc(clamp(2.6rem, 5vw, 5.3rem) * var(--hl-scale)); }
body.nx .nx-masthead-desc { color: var(--news-on-night-muted); font-size: clamp(1rem, .94rem + .3vw, 1.25rem); }
body.nx .nx-masthead.is-vodhead {
background:
linear-gradient(90deg, rgb(3 8 13 / .97), rgb(3 8 13 / .5)),
url("/assets/img/editorial/vod-ident.webp") center / cover no-repeat,
var(--news-night);
}
body.nx :is(.nx-secpage-lead, .nx-vodfeat) .nx-card.is-hero .nx-scrim {
z-index: 1;
display: block;
background:
linear-gradient(to top, rgb(3 9 14 / .94) 0%, rgb(3 9 14 / .58) 48%, transparent 82%),
linear-gradient(90deg, transparent 25%, rgb(3 9 14 / .72) 100%);
}
[dir="rtl"] body.nx :is(.nx-secpage-lead, .nx-vodfeat) .nx-card.is-hero .nx-scrim {
background:
linear-gradient(to top, rgb(3 9 14 / .94) 0%, rgb(3 9 14 / .58) 48%, transparent 82%),
linear-gradient(270deg, transparent 25%, rgb(3 9 14 / .72) 100%);
}
body.nx :is(.nx-secpage-lead, .nx-vodfeat) .nx-card.is-hero .nx-card-body {
position: relative;
z-index: 2;
background: transparent;
}
body.nx :is(.nx-secpage-lead, .nx-vodfeat) .nx-card.is-hero .nx-hl {
max-inline-size: 18ch;
color: var(--news-on-night);
font-size: calc(clamp(2.25rem, 4vw, 4.8rem) * var(--hl-scale));
text-shadow: 0 2px 24px rgb(0 0 0 / .65);
}
body.nx :is(.nx-secpage-lead, .nx-vodfeat) .nx-card.is-hero :is(.nx-dek, .nx-meta) {
color: var(--news-on-night-muted);
}
[dir="rtl"] body.nx .nx-masthead.is-vodhead {
background:
linear-gradient(270deg, rgb(3 8 13 / .97), rgb(3 8 13 / .5)),
url("/assets/img/editorial/vod-ident.webp") center / cover no-repeat,
var(--news-night);
}
body.nx .nx-sect-head::before {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: -9px;
block-size: 18px;
background: url("/assets/img/nxews-ledger-rule.svg") center / 100% 18px no-repeat;
opacity: .4;
pointer-events: none;
}
body.nx.is-home .nx-sect.is-vodrail {
position: relative;
isolation: isolate;
overflow: hidden;
background:
linear-gradient(100deg, rgb(3 8 13 / .98) 0%, rgb(3 8 13 / .84) 54%, rgb(3 8 13 / .45) 100%),
url("/assets/img/editorial/vod-ident.webp") center / cover no-repeat,
var(--news-night);
}
body.nx.is-home .nx-sect.is-vodrail::before {
content: "";
position: absolute;
z-index: -1;
inset: 12px;
display: block;
border: 1px solid rgb(195 165 104 / .32);
pointer-events: none;
}
body.nx.is-home .nx-sect.is-vodrail > * { position: relative; z-index: 1; }
body.nx.is-home .nx-sect.is-vodrail .nx-play {
border: 1px solid rgb(231 214 178 / .82);
background: rgb(4 11 17 / .72);
box-shadow:
0 0 0 7px rgb(168 132 67 / .18),
0 0 0 14px rgb(168 132 67 / .08);
}
body.nx .nx-art-hero.has-art { --plate-accent: var(--news-brass); background: #091723; }
body.nx .nx-art-hero.has-art .nx-art-credit { display: inline-flex; }
body.nx .nx-art-hero .nx-media-frame { inset: 14px; }
body.nx .nx-foot {
position: relative;
overflow: hidden;
border-block-start: 0;
background:
linear-gradient(90deg, rgb(4 11 17 / .98), rgb(4 11 17 / .88)),
url("/assets/img/editorial/plate-atlas-wide.webp") center 48% / cover no-repeat,
var(--news-night);
color: var(--news-on-night);
}
body.nx .nx-foot::before {
content: "";
position: absolute;
inset-inline: max(18px, calc((100% - var(--wrap)) / 2));
inset-block-start: 18px;
block-size: 18px;
background: url("/assets/img/nxews-ledger-rule.svg") center / 100% 18px no-repeat;
opacity: .8;
pointer-events: none;
}
body.nx .nx-foot::after { display: none; }
body.nx .nx-foot-in { position: relative; z-index: 1; }
body.nx .nx-foot :is(.nx-foot-brand p, .nx-foot-cols a, .nx-foot-legal) { color: var(--news-on-night-muted); }
body.nx .nx-foot :is(.nx-foot-cols h4, .nx-foot-more) { color: var(--news-brass-bright) !important; }
body.nx .nx-foot .nx-mark text { fill: var(--news-on-night); }
@media screen and (max-width: 760px) {
body.nx .nx-media-frame { inset: 6px; opacity: .62; }
body.nx .nx-art-hero .nx-media-frame { inset: 8px; }
body.nx .nx-card.has-art:not(.is-hero) .nx-card-media { display: none; }
body.nx .nx-card.has-art:not(.is-hero) > .nx-card-link,
body.nx.is-home .nx-heroblock-stack > .nx-card.has-art:not(.is-hero) > .nx-card-link {
display: block;
grid-template-columns: minmax(0, 1fr);
}
body.nx .nx-card.has-art:not(.is-hero) .nx-card-body { padding-block-start: 12px; }
body.nx .nx-masthead {
min-block-size: 230px;
padding: 44px 24px 54px;
background:
linear-gradient(180deg, rgb(5 13 20 / .72), rgb(5 13 20 / .97)),
url("/assets/img/editorial/plate-atlas-card.webp") center / cover no-repeat,
var(--news-night);
}
body.nx .nx-masthead.is-vodhead,
[dir="rtl"] body.nx .nx-masthead.is-vodhead {
background:
linear-gradient(180deg, rgb(3 8 13 / .7), rgb(3 8 13 / .98)),
url("/assets/img/editorial/vod-ident-square.webp") center / cover no-repeat,
var(--news-night);
}
body.nx .nx-masthead::before { inset: 8px; }
body.nx .nx-masthead::after { inset-inline: 24px; inset-block-end: 20px; }
body.nx .nx-masthead-title { font-size: calc(clamp(2.3rem, 12vw, 3.8rem) * var(--hl-scale)); }
body.nx.is-home .nx-sect.is-vodrail {
background:
linear-gradient(180deg, rgb(3 8 13 / .76), rgb(3 8 13 / .98)),
url("/assets/img/editorial/vod-ident-square.webp") center / cover no-repeat,
var(--news-night);
}
}
@media (prefers-reduced-motion: reduce) {
body.nx .nx-card-media img { transition: none; transform: none !important; }
}
@media (forced-colors: active) {
body.nx .nx-media-frame,
body.nx .nx-masthead::before,
body.nx .nx-masthead::after,
body.nx .nx-sect-head::before,
body.nx.is-home .nx-sect.is-vodrail::before,
body.nx .nx-foot::before { display: none; }
body.nx :is(.nx-masthead, .nx-foot, .nx-sect.is-vodrail) { background: Canvas; color: CanvasText; }
}
@media print {
body.nx .nx-media-frame,
body.nx .nx-masthead::before,
body.nx .nx-masthead::after,
body.nx .nx-sect-head::before,
body.nx.is-home .nx-sect.is-vodrail::before,
body.nx .nx-foot::before { display: none; }
body.nx :is(.nx-masthead, .nx-foot, .nx-sect.is-vodrail) { background: #fff; color: #000; }
}
html,
body.nx {
max-inline-size: 100%;
overflow-x: hidden;
}
@supports (overflow: clip) {
html,
body.nx { overflow-x: clip; }
}
@media screen and (max-width: 760px) {
body.nx.is-home :is(
.nx-main,
.nx-main > .nx-wrap,
.nx-sect.is-vodrail,
.nx-sect.is-vodrail > .nx-sect-head,
.nx-sect.is-vodrail .nx-rowscroll,
.nx-sect.is-vodrail .nx-rowscroll-in
) {
min-inline-size: 0;
max-inline-size: 100%;
}
body.nx.is-home .nx-sect.is-vodrail {
position: relative;
overflow: hidden;
}
body.nx.is-home .nx-sect.is-vodrail .nx-rowscroll {
inline-size: 100%;
overflow: hidden;
}
body.nx.is-home .nx-sect.is-vodrail .nx-rowscroll-in {
inline-size: 100%;
overflow-x: auto !important;
overflow-y: hidden !important;
overscroll-behavior-inline: contain;
touch-action: pan-x pan-y;
-webkit-overflow-scrolling: touch;
}
body.nx.is-home .nx-sect.is-vodrail .nx-rowscroll-in > .nx-card {
min-inline-size: 0;
max-inline-size: calc(100vi - (var(--gut) * 2));
}
}