/* Trends bar: one slim line above the header on every public page (markup: scripts/marquee.py, behaviour: marquee.js).
   Pure CSS motion (translateX on a duplicated track), no fonts or images, fixed height so nothing shifts.
   Stays in the page flow, so it scrolls away with the top of the page and never takes height from a phone. */
.mq{--mq-bg:#242323;--mq-fg:#f4efe9;--mq-mut:#c9c3b9;--mq-up:#a9dcbc;--mq-blue:#9db9f0;--mq-line:rgba(244,239,233,.28);
 position:relative;z-index:31;box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;height:34px;margin:0;
 padding:0 max(5%,calc((100% - 1320px)/2 + 66px));background:var(--mq-bg);color:var(--mq-fg);
 font:600 13px/1 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;letter-spacing:0;overflow:hidden}
.mq *{box-sizing:border-box}
.mq-off .mq{display:none}
.mq a{color:var(--mq-fg);text-decoration:none}
.mq-chip{display:inline-flex;align-items:center;gap:8px;flex:none;color:var(--mq-fg);white-space:nowrap}
.mq-chip time{color:var(--mq-mut);font-weight:500;font-variant-numeric:tabular-nums}
.mq-chip time::before{content:"";display:inline-block;width:1px;height:12px;margin-right:8px;vertical-align:-2px;background:var(--mq-line)}
.mq-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--mq-up)}
.mq-lab-s{display:none}
.mq-nav{flex:1 1 0;min-width:0;height:100%}
.mq-view{height:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.mq-track{display:flex;width:max-content;height:100%;will-change:transform;animation:mq-run var(--mq-t,90s) linear infinite}
.mq-list{display:flex;flex:none;align-items:center;min-width:100vw;height:100%;margin:0;padding:0 0 0 16px;list-style:none}
.mq-list li{display:flex;align-items:center;flex:none;height:100%;white-space:nowrap}
.mq-list li::after{content:"";flex:none;width:3px;height:3px;margin:0 16px;border-radius:50%;background:var(--mq-mut);opacity:.7}
.mq-list li.mq-g::after{display:none}
.mq-list li.mq-g{margin-right:14px;padding:4px 10px;height:auto;align-self:center;border:1px solid var(--mq-line);border-radius:999px;color:var(--mq-blue);font-size:12px;font-weight:600}
.mq-list a{display:inline-flex;align-items:center;gap:8px;height:100%;padding:0 2px}
.mq-q{color:var(--mq-fg)}
.mq-n{color:var(--mq-mut);font-weight:500;font-variant-numeric:tabular-nums}
.mq-up{display:inline-flex;align-items:center;gap:3px;color:var(--mq-up);font-weight:700;font-variant-numeric:tabular-nums}
.mq-up::before{content:"";width:0;height:0;border:4px solid transparent;border-top-width:0;border-bottom:6px solid currentColor}
.mq-tag{padding:3px 7px;border-radius:999px;background:var(--mq-fg);color:var(--mq-bg);font-size:12px;font-weight:700;line-height:1}
.mq-list a:hover .mq-q,.mq-all:hover{text-decoration:underline;text-underline-offset:4px}
.mq-all{display:inline-flex;align-items:center;gap:6px;flex:none;height:100%;color:var(--mq-mut);font-weight:600;white-space:nowrap}
.mq-all::after{content:"\2192";font-weight:500}
.mq-all:hover{color:var(--mq-fg)}
.mq-x{flex:none;width:34px;height:34px;margin:0 -9px 0 -4px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mq-mut);font:400 20px/1 system-ui,sans-serif;cursor:pointer;visibility:hidden}
.mq-js .mq-x{visibility:visible}
.mq-x:hover{color:var(--mq-fg)}
.mq a:focus-visible,.mq-x:focus-visible{outline:2px solid var(--mq-blue);outline-offset:-3px;border-radius:6px}
.mq-src{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes mq-run{to{transform:translateX(-50%)}}
@keyframes mq-pulse{0%{box-shadow:0 0 0 0 rgba(169,220,188,.55)}70%,100%{box-shadow:0 0 0 7px rgba(169,220,188,0)}}
@media(prefers-reduced-motion:no-preference){.mq-dot{animation:mq-pulse 2.4s ease-out infinite}}
/* Pause while the reader points at it (mouse only, so a tap never leaves it stuck), while a finger is down, and while a link has keyboard focus.
   Focus also turns the strip into a plain scrollable row so the focused link is always on screen. */
@media(hover:hover){.mq-nav:hover .mq-track{animation-play-state:paused}}
.mq-nav:active .mq-track{animation-play-state:paused}
.mq-view:focus-within{overflow-x:auto;scrollbar-width:none}
.mq-view:focus-within::-webkit-scrollbar{display:none}
.mq-view:focus-within .mq-track{animation:none;will-change:auto}
.mq-view:focus-within .mq-list+.mq-list{display:none}
/* Reduced motion: no animation. One copy of the list in a horizontally scrollable strip. */
@media(prefers-reduced-motion:reduce){
 .mq-track{animation:none;will-change:auto}
 .mq-view{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--mq-line) transparent;-webkit-overflow-scrolling:touch}
 .mq-list{min-width:0}
 .mq-list+.mq-list{display:none}
}
@media(max-width:1060px){.mq{padding:0 5%}}
@media(max-width:650px){
 .mq{height:36px;gap:10px;padding:0 6px 0 14px}
 .mq-lab{display:none}
 .mq-lab-s{display:inline}
 .mq-all{gap:4px}
 .mq-x{width:36px;height:36px;margin:0 -2px 0 -4px}
 .mq-list a{padding:0 4px}
}
@media print{.mq{display:none}}