/* B v2 only. A retains the original three study files byte for byte. */
html[data-cn-variant=b] { --cn-accent:#d6dde1; --cn-tint:4%; --cn-base:rgb(10 15 21 / .18); --cn-ink:#f4f0e9; --cn-muted:#d0d6dc; --cn-edge:#e8f0f438; --cn-shadow:#0003; }
html[data-cn-surface=light] { --cn-base:rgb(255 255 248 / .22); --cn-ink:#252d32; --cn-muted:#424c51; --cn-edge:#26353b3d; --cn-shadow:#292e351c; }
html[data-cn-busy=true][data-cn-surface=dark] { --cn-base:rgb(10 15 21 / .32); }
html[data-cn-busy=true][data-cn-surface=light] { --cn-base:rgb(255 255 248 / .38); }
html[data-cn-variant=b] .cn-header { --cn-ink:inherit; --cn-muted:inherit; --cn-edge:inherit; color:var(--cn-ink); background:linear-gradient(color-mix(in srgb,var(--cn-accent) var(--cn-tint),transparent),color-mix(in srgb,var(--cn-accent) var(--cn-tint),transparent)),var(--cn-base); border-color:var(--cn-edge); box-shadow:inset 0 1px 0 #fff3,inset 0 -1px 0 #00000012,0 10px 30px var(--cn-shadow); text-shadow:none; transition:transform .3s ease,background-color .2s,color .2s,border-color .2s; }
html[data-cn-variant=b] .cn-header .brand-mark { color:inherit; }
html[data-cn-variant=b] .cn-current-index { color:var(--cn-muted); }
html[data-cn-variant=b] .cn-links a { color:var(--cn-muted); }
html[data-cn-variant=b] .cn-links a[aria-current=page] { color:var(--cn-ink); background:color-mix(in srgb,var(--cn-accent) 14%,transparent); box-shadow:inset 0 1px 0 #fff2,0 1px 4px #0001; }
html[data-cn-variant=b] .cn-links a:is(:hover,:focus-visible) { color:var(--cn-ink); background:color-mix(in srgb,var(--cn-destination) 20%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cn-destination) 48%,transparent); }
html[data-cn-variant=b] :is(.cn-header,.cn-menu) .cn-button { color:var(--cn-ink); background:linear-gradient(145deg,#ffffff0c,#00000008),color-mix(in srgb,var(--cn-accent) 6%,transparent); border-color:var(--cn-edge); box-shadow:inset 0 1px 0 #fff2,2px 3px 6px #0002,-1px -1px 4px #fff1; }
html[data-cn-variant=b] :is(.cn-header,.cn-menu) .cn-button:hover { background:color-mix(in srgb,var(--cn-accent) 12%,transparent); }
html[data-cn-variant=b] :is(.cn-header,.cn-menu) .cn-button:is(:active,[aria-pressed=true]) { box-shadow:inset 2px 2px 5px #0002,inset -1px -1px 3px #fff2; }
html[data-cn-variant=b] :is(.cn-header,.cn-menu) :is(a,button):focus-visible { outline-color:var(--cn-destination,var(--cn-accent)); }
html[data-cn-variant=b] .cn-hover-preview { background:linear-gradient(color-mix(in srgb,var(--cn-destination) 10%,transparent),color-mix(in srgb,var(--cn-destination) 10%,transparent)),var(--cn-base); border-color:color-mix(in srgb,var(--cn-destination) 65%,transparent); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 12px 30px var(--cn-shadow); }
html[data-cn-variant=b] .cn-hover-preview p { color:var(--cn-ink); }
html[data-cn-variant=b] .cn-hover-preview small { color:var(--cn-muted); }
html[data-cn-variant=b] .cn-menu { --cn-ink:#f4f0e9;--cn-muted:#c6cdd2;--cn-edge:#eef2f038;color:var(--cn-ink);background:linear-gradient(color-mix(in srgb,var(--cn-accent) 7%,transparent),color-mix(in srgb,var(--cn-accent) 7%,transparent)),#101820ed; }
html[data-cn-variant=b][data-cn-surface=light] .cn-menu { --cn-ink:#252d32;--cn-muted:#424c51;--cn-edge:#26353b3d;background:linear-gradient(color-mix(in srgb,var(--cn-accent) 7%,transparent),color-mix(in srgb,var(--cn-accent) 7%,transparent)),#f4f1e8f2; }
html[data-cn-variant=b] .cn-menu :is(.cn-kicker,.cn-number,.cn-chapter,.cn-preview-line,figcaption,.cn-menu-bottom) { color:var(--cn-muted); }
html[data-cn-variant=b] .cn-menu figcaption a { color:var(--cn-ink); }
html[data-cn-variant=b] .cn-menu .cn-chapter[aria-current=page] { color:var(--cn-ink);background:color-mix(in srgb,var(--cn-accent) 14%,transparent); }
html[data-cn-variant=b] .cn-menu .cn-chapter:is(:hover,:focus-visible,.cn-previewing) { color:var(--cn-ink);background:color-mix(in srgb,var(--cn-destination) 20%,transparent); }
html[data-cn-variant=b] .cn-menu .cn-chapter[aria-current=page] .cn-number { color:var(--cn-ink); }
html[data-cn-variant=b] .cn-preview-photo { border-color:var(--cn-preview-accent,var(--cn-accent));background:color-mix(in srgb,var(--cn-preview-accent,var(--cn-accent)) 8%,#12171b); }
html[data-cn-variant=b] .cn-contact button[aria-pressed=true] { border-color:var(--cn-preview-accent,var(--cn-accent)); }
html[data-cn-variant=b] { scroll-padding-top:110px; }
html[data-cn-variant=b] .cn-opening-visible { opacity:1!important;transform:none!important;transition:none!important;animation:none!important; }
html[data-cn-variant=b]::view-transition-group(root),html[data-cn-variant=b]::view-transition-group(cn-navigation) { animation-duration:560ms;animation-timing-function:cubic-bezier(.22,.72,.22,1); }
html[data-cn-variant=b]::view-transition-old(root),html[data-cn-variant=b]::view-transition-new(root) { animation-duration:560ms;animation-timing-function:cubic-bezier(.22,.72,.22,1);box-shadow:0 0 12px #0002; }
html[data-cn-variant=b]::view-transition-old(cn-navigation) { opacity:1;animation:cn-glass-out 560ms ease both; }
html[data-cn-variant=b]::view-transition-new(cn-navigation) { animation:cn-glass-in 560ms ease both; }
@keyframes cn-glass-out { to {opacity:0} }
@keyframes cn-glass-in { from {opacity:0} to {opacity:1} }
html[data-cn-variant=b].cn-arrival main,html[data-cn-variant=b][data-cn-direction=back].cn-arrival main { animation:cn-fallback-fade 150ms ease-out both; }
@keyframes cn-fallback-fade { from {opacity:.5} to {opacity:1} }
@media(max-width:1200px) { html[data-cn-variant=b] .cn-current { gap:10px; } }
@media(max-width:760px) {
 html[data-cn-variant=b] .cn-header { -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); }
 html[data-cn-variant=b] .cn-header .cn-sound { position:relative;width:44px;min-height:44px;padding:0;font-size:0;gap:0; }
 html[data-cn-variant=b] .cn-sound::before { content:'';width:21px;height:21px;background:currentColor;mask:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="black" d="M3 9h4l5-4v14l-5-4H3z"/%3E%3Cpath fill="none" stroke="black" stroke-width="1.6" d="M15 8q5 4 0 8M18 5q8 7 0 14"/%3E%3C/svg%3E') center/contain no-repeat; }
 html[data-cn-variant=b] .cn-sound[aria-pressed=false]::before { opacity:.6; }
 html[data-cn-variant=b] .cn-sound[aria-pressed=false]::after { content:'';position:absolute;width:24px;height:1.5px;background:currentColor;transform:rotate(-45deg); }
 html[data-cn-variant=b] .cn-menu-button { min-height:44px;padding-inline:12px; }
 html[data-cn-variant=b] .cn-menu-top { background:#182128; }
 html[data-cn-variant=b][data-cn-surface=light] .cn-menu-top { background:#f0eee6; }
}
@media(prefers-reduced-motion:reduce) { html[data-cn-variant=b].cn-arrival main {animation:none!important} }
html[data-cn-variant=b]:has(body.reduced).cn-arrival main {animation:none!important}

html[data-cn-variant=b]:not(.cn-js) .cn-header .cn-menu-button {display:none}
html[data-cn-variant=b] .cn-close {min-height:44px}

html[data-cn-variant=b]::view-transition-group(cn-navigation) {animation:none}
/* One font and reserved slots: no webfont swap or recentering as controls initialise. */
html[data-cn-variant=b] :is(.cn-header,.cn-menu,.cn-fallback) { --sans:Arial,Helvetica,sans-serif; }
html[data-cn-variant=b] .cn-header { display:grid;grid-template-columns:244px minmax(0,1fr) 279px;gap:14px;font:400 13px/1.4 Arial,Helvetica,sans-serif; }
html[data-cn-variant=b] .cn-header .cn-brand { width:244px;min-width:0; }
html[data-cn-variant=b] .cn-header .cn-brand>span { font:700 18px/1 Arial,Helvetica,sans-serif;letter-spacing:1px; }
html[data-cn-variant=b] .cn-header .cn-links { min-width:0; }
html[data-cn-variant=b] .cn-header .cn-links a { font:400 12px/1.4 Arial,Helvetica,sans-serif; }
html[data-cn-variant=b] .cn-header .cn-actions { width:279px;display:grid;grid-template-columns:152px 118px;gap:9px; }
html[data-cn-variant=b] .cn-header .cn-sound { grid-column:1;grid-row:1;width:152px; }
html[data-cn-variant=b] .cn-header [data-motion-toggle] { grid-column:2;grid-row:1;width:118px; }
html[data-cn-variant=b] .cn-header .cn-menu-button { grid-column:2;grid-row:1; }
@media(min-width:761px) and (max-width:1200px) {
 html[data-cn-variant=b] .cn-header { grid-template-columns:224px minmax(0,1fr) 242px; }
 html[data-cn-variant=b] .cn-header .cn-brand { width:224px; }
 html[data-cn-variant=b] .cn-header .cn-brand>span { font-size:16px;letter-spacing:.8px; }
 html[data-cn-variant=b] .cn-header .cn-current { width:100%;margin:0;min-width:0;font:400 12px/1.4 Arial,Helvetica,sans-serif; }
 html[data-cn-variant=b] .cn-header .cn-current>span:last-child { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
 html[data-cn-variant=b] .cn-header .cn-current-index { flex-shrink:0; }
 html[data-cn-variant=b] .cn-header .cn-actions { width:242px;grid-template-columns:142px 91px; }
 html[data-cn-variant=b] .cn-header .cn-sound { width:142px; }
}
@media(max-width:760px) {
 html[data-cn-variant=b] .cn-header { grid-template-columns:minmax(0,1fr) 132px;gap:10px; }
 html[data-cn-variant=b] .cn-header .cn-brand { width:100%;gap:9px; }
 html[data-cn-variant=b] .cn-header .cn-brand>span { font-size:15px;letter-spacing:.6px;overflow:hidden;text-overflow:ellipsis; }
 html[data-cn-variant=b] .cn-header .cn-actions { width:132px;grid-template-columns:44px 81px;gap:7px;margin:0; }
 html[data-cn-variant=b] .cn-header .cn-sound { width:44px; }
}

/* A sibling of the filtered header can blur the actual article behind the card. */
html[data-cn-variant=b] .cn-hover-preview {--sans:Arial,Helvetica,sans-serif;position:fixed;z-index:90;background:linear-gradient(color-mix(in srgb,var(--cn-destination) 7%,transparent),color-mix(in srgb,var(--cn-destination) 7%,transparent)),rgb(16 23 30 / .68);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);max-height:calc(100dvh - 125px);overflow:hidden}
html[data-cn-variant=b][data-cn-surface=light] .cn-hover-preview {background:linear-gradient(color-mix(in srgb,var(--cn-destination) 7%,transparent),color-mix(in srgb,var(--cn-destination) 7%,transparent)),rgb(246 243 235 / .70)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 html[data-cn-variant=b] .cn-hover-preview {background:#17202afa}
 html[data-cn-variant=b][data-cn-surface=light] .cn-hover-preview {background:#f4f1e9fa}
}
