/* NuvoMilo base styles: tokens, reset, typography, header and nav, footer, the LIVE ticker band, the Milo mascot and the guide and kit page components. Linked by EVERY page. home.css is added on the home pages only and kit.css on the kit pages only. */
/* NuvoMilo — "Milo, alive in 3D". System fonts, zero dependencies. Motion = transform/opacity only. */
:root{--ink:#1d1b18;--muted:#5b554c;--paper:#fffdf8;--cream:#fff6e6;--line:#ece5d8;--sky:#5aa9e6;--lilac:#9b8cff;--sun:#ffcc4d;--peach:#ffb48f;--sage:#a9cf93;--grad:linear-gradient(100deg,var(--sky),var(--lilac) 52%,var(--sun));--ease:cubic-bezier(.2,.8,.2,1);--t1:.2s;--t2:.4s;--t3:.8s;--radius:28px;--font:"Segoe UI Variable Display","Segoe UI Variable",-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
a,button,select{-webkit-tap-highlight-color:transparent}
button,select{cursor:pointer}
img{max-width:100%;display:block}
picture{display:contents}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #276a99;outline-offset:4px}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{line-height:1.06;letter-spacing:-.04em}
h1{font-size:clamp(46px,7vw,84px);font-weight:800;line-height:1.02}
h2{font-size:clamp(32px,4vw,52px);font-weight:800;letter-spacing:-.035em}
h3{font-size:27px;font-weight:800}
h1 em{font-style:normal;position:relative;z-index:0}
h1 em:after{content:'';position:absolute;left:-1%;right:-1%;bottom:.05em;height:.2em;border-radius:99px;background:var(--grad);z-index:-1;transform:rotate(-2deg);transform-origin:left;animation:underline 1s var(--ease) .75s backwards}
.wrap{max-width:1240px;margin:auto;padding-left:max(30px,env(safe-area-inset-left));padding-right:max(30px,env(safe-area-inset-right))}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:-100px;left:15px;z-index:100;background:var(--ink);color:#fff;padding:12px}
.skip:focus{top:10px}
[hidden]{display:none!important}
/* motion system keyframes */
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes underline{from{transform:rotate(-2deg) scaleX(0)}}
@keyframes fade{from{opacity:0}}
@keyframes glow{50%{opacity:.65;transform:scale(1.06)}}
/* header: glass, shrinks on scroll (JS toggles .is-small) */
.header{--hh:76px;--sh:.84;position:sticky;top:env(safe-area-inset-top,0px);z-index:30;height:var(--hh)}
.header:before{content:'';position:absolute;inset:0;background:rgba(255,253,248,.72);-webkit-backdrop-filter:saturate(1.5) blur(18px);backdrop-filter:saturate(1.5) blur(18px);border-bottom:1px solid transparent;transform-origin:top;transition:transform var(--t2) var(--ease),background-color var(--t2),box-shadow var(--t2),border-color var(--t2)}
.header.is-small:before{transform:scaleY(var(--sh));background:rgba(255,253,248,.88);border-color:var(--line);box-shadow:0 12px 30px -18px rgba(29,27,24,.4)}
.nav{position:relative;height:100%;display:flex;align-items:center;justify-content:space-between;gap:22px;transition:transform var(--t2) var(--ease)}
.header.is-small .nav{transform:translateY(calc(var(--hh)*(var(--sh) - 1)/2))}
.brand{display:flex;align-items:center;min-height:44px;width:176px;flex-shrink:0;transform-origin:left center;transition:transform var(--t2) var(--ease)}
.brand img{width:176px;height:auto}
.header.is-small .brand{transform:scale(.82)}
/* Header menus: <details> panels on desktop (>=1024 px), one "Menu" sheet below. Open/close works without JS; app.mjs adds Esc, outside click, aria-expanded and the scroll lock. */
.dnav{display:flex;align-items:center;gap:2px;font-size:15px;font-weight:700}
.dnav>a,.dnav summary{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;cursor:pointer}
.dnav>a:after,.dnav summary:after{content:'';position:absolute;left:12px;right:12px;bottom:7px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform var(--t2) var(--ease)}
.dnav>a:hover:after,.dnav>a:focus-visible:after,.dnav summary:hover:after,.dnav summary:focus-visible:after,.dnav details[open]>summary:after{transform:scaleX(1)}
summary{list-style:none}
summary::-webkit-details-marker{display:none}
summary:focus-visible{outline:3px solid #276a99;outline-offset:4px;border-radius:12px}
.dnav summary:before{content:'';order:2;width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform var(--t2) var(--ease)}
.dnav details[open]>summary:before{transform:translateY(2px) rotate(-135deg)}
.menu{position:relative}
.menu-panel{position:absolute;z-index:5;top:calc(100% + 8px);left:-12px;padding:18px;border:1px solid var(--line);border-radius:24px;background:var(--paper);box-shadow:0 34px 60px -30px rgba(40,50,110,.6);animation:rise .25s var(--ease) backwards}
.mp-cats{width:min(740px,calc(100vw - 60px))}
.mp-ideas{display:grid;grid-template-columns:1fr 1fr;gap:22px;width:min(660px,calc(100vw - 60px))}
.mp-h{margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#4d4941}
.mt-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mt{position:relative;isolation:isolate;overflow:hidden;display:block;aspect-ratio:4/3;border-radius:16px;background:linear-gradient(145deg,#8bbcff,#b9a7ff);color:#fff;font-size:13px;font-weight:800;line-height:1.2;transition:translate var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.mt.c1{background:linear-gradient(145deg,#ffd06b,#ff9a7a)}.mt.c2{background:linear-gradient(145deg,#ff9fb4,#ff8f6e)}.mt.c3{background:linear-gradient(145deg,#7fdcb4,#6ab7f0)}
.mt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mt:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,12,22,0) 30%,rgba(14,12,22,.84))}
.mt span{position:absolute;left:9px;right:9px;bottom:8px;z-index:2;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.mt:hover{translate:0 -3px;box-shadow:0 16px 24px -16px rgba(40,50,110,.7)}
.mt:focus-visible{outline-offset:2px}
.mi-list{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:4px}
.mi{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 10px;border-radius:14px;transition:background-color var(--t1)}
.mi:hover,.mi:focus-visible{background:#fff1d6}
.mi-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#141b26;color:#ffb020;font-size:21px;line-height:1}
.mi-t{font-size:15px;font-weight:800;line-height:1.25}
.mi-t small{display:block;margin-top:2px;font-size:12px;font-weight:600;color:var(--muted)}
.mi-links{display:grid;gap:8px;margin-top:6px}
.mi-link{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 18px;border-radius:99px;border:1px solid var(--line);background:#fff;font-size:16px;font-weight:800}
.mi-live{background:#141b26;border-color:#141b26;color:#fff}
.mmenu>summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 14px;border-radius:99px;background:var(--ink);color:#fff;font-size:14px;font-weight:800;cursor:pointer}
.mmenu>summary:before{content:'';flex:none;width:16px;height:2px;border-radius:2px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor;transition:transform var(--t2) var(--ease)}
.mmenu[open]>summary{position:relative}
.mmenu[open]>summary:before{box-shadow:none;transform:rotate(45deg)}
.mmenu[open]>summary:after{content:'';position:absolute;left:14px;top:50%;width:16px;height:2px;margin-top:-1px;border-radius:2px;background:currentColor;transform:rotate(-45deg)}
.mmenu>summary:focus-visible{outline-offset:3px;border-radius:99px}
.mmenu{display:none}
.menu-open,.menu-open body{overflow:hidden}
.preferences{display:flex;gap:10px;align-items:center;font-size:13px;font-weight:700}
.language{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 6px;white-space:nowrap}
.language span{color:#6e695f}
.preferences select{max-width:170px;min-height:44px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:0 14px;border-radius:100px;font-size:13px}
/* buttons & links */
.button{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;gap:14px;justify-content:center;align-items:center;min-height:48px;padding:12px 24px;border-radius:100px;background:#fff;font-weight:700;font-size:15px;border:1px solid var(--line);line-height:1.3;transition:transform var(--t1) var(--ease),box-shadow var(--t2) var(--ease),color var(--t2)}
.button:before{content:'';position:absolute;inset:0;z-index:-1;background:var(--grad);opacity:0;transition:opacity var(--t2) var(--ease)}
.button:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(90,110,230,.75)}
.button:hover:before{opacity:1}
.button.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.button.dark:hover{color:var(--ink);border-color:transparent}
.button span{font-size:20px;line-height:1;transition:transform var(--t2) var(--ease)}
.button:hover span{transform:translate(3px,-3px)}
.text-link{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:700}
.text-link:hover{text-decoration:underline;text-underline-offset:5px}
.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:800;line-height:1.5;margin-bottom:16px}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--muted);margin-top:22px;margin-bottom:28px;max-width:30em}
/* Milo: layered radial-gradient puffs. Sizes in cqw of .milo itself (100 = its width). */
.milo{container-type:inline-size;aspect-ratio:5/4}
.milo-body{position:absolute;inset:0;animation:bob 5.5s ease-in-out infinite;filter:drop-shadow(0 3cqw 3.5cqw rgba(70,120,190,.26))}
.puff,.base{position:absolute;border-radius:50%}
.puff{left:calc(var(--x) - var(--d)/2);top:calc(var(--y) - var(--d)/2);width:var(--d);height:var(--d);background:radial-gradient(circle at 36% 30%,#fff 0,#fffaf1 42%,#f8f6f2 66%,#d9eafb 90%,#b2d5f4 100%)}
.p1{--x:20cqw;--y:56cqw;--d:30cqw}.p2{--x:31cqw;--y:36cqw;--d:30cqw}.p3{--x:53cqw;--y:27cqw;--d:44cqw}.p4{--x:75cqw;--y:38cqw;--d:32cqw}.p5{--x:82cqw;--y:57cqw;--d:28cqw}.p6{--x:50cqw;--y:52cqw;--d:46cqw}
.base{left:12cqw;top:52cqw;width:76cqw;height:24cqw;border-radius:12cqw;background:linear-gradient(180deg,#fffaf1 30%,#d3e6f8 84%,#b2d5f4)}
.eyes{position:absolute;left:35cqw;top:41cqw;display:flex;gap:7cqw}
.eye{position:relative;width:6.2cqw;height:9.4cqw;border-radius:50%;background:#2a2320;animation:blink 5.2s infinite}
.eye+.eye{animation-delay:.04s}
.eye:after{content:'';position:absolute;left:1.2cqw;top:1.4cqw;width:2cqw;height:2cqw;border-radius:50%;background:#fff;opacity:.9}
@keyframes blink{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}}
.cheek{position:absolute;top:53cqw;width:9cqw;height:5cqw;border-radius:50%;background:radial-gradient(closest-side,rgba(255,160,150,.5),transparent)}
.cheek.l{left:27cqw}.cheek.r{left:57cqw}
.star{position:absolute;right:3cqw;top:-5cqw;width:15cqw;color:var(--sun);filter:drop-shadow(0 1cqw 1.4cqw rgba(255,180,0,.45));animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{50%{transform:scale(.82) rotate(14deg);opacity:.8}}
.milo-shadow{position:absolute;left:14cqw;right:14cqw;top:76cqw;height:7cqw;border-radius:50%;background:radial-gradient(closest-side,rgba(60,90,150,.3),transparent);animation:shadow 5.5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-2.2cqw) rotate(.8deg)}}
@keyframes shadow{50%{transform:scale(.86);opacity:.65}}
.small{font-size:12px;margin-top:16px}
.muted{color:var(--muted)}
.milo.mini{position:relative;width:150px;margin-bottom:22px}
/* guide pages */
.progress{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:4px;z-index:50;pointer-events:none}
.progress i{display:block;height:100%;background:var(--grad);transform:scaleX(0);transform-origin:left}
.guide-hero{--g1:#cfe6fb;--g2:#ddd6ff;--g3:#ffe9b0;position:relative;isolation:isolate;overflow:hidden;padding:44px 0 64px;border-radius:0 0 clamp(28px,5vw,64px) clamp(28px,5vw,64px)}
.g-yellow{--g1:#ffe9a8;--g2:#ffd2b3;--g3:#fff1cc}.g-blue{--g1:#bfe0fb;--g2:#d3cbff;--g3:#c9f0e4}.g-peach{--g1:#ffd3bd;--g2:#ffc6dc;--g3:#ffe6a8}
.guide-hero:before{content:'';position:absolute;inset:-40% -60%;z-index:-2;background:linear-gradient(110deg,var(--g1),var(--g2) 40%,var(--g3) 75%,var(--g1));animation:gdrift 18s ease-in-out infinite alternate}
.guide-hero:after{content:'';position:absolute;inset:0;z-index:-1;background-image:var(--grain);opacity:.06}
@keyframes gdrift{from{transform:translateX(-8%) rotate(-2deg)}to{transform:translateX(8%) rotate(2deg) scale(1.05)}}
.guide-hero-in{display:grid;grid-template-columns:1.35fr .65fr;gap:30px;align-items:center}
.guide-hero-copy>*{animation:rise var(--t3) var(--ease) backwards}
.guide-hero-copy>:nth-child(2){animation-delay:.08s}.guide-hero-copy>:nth-child(3){animation-delay:.16s}.guide-hero-copy>:nth-child(4){animation-delay:.24s}
.guide-hero h1{font-size:clamp(38px,5.4vw,68px)}
.guide-hero .eyebrow{margin-top:26px;color:#3b362f}
.guide-hero .lead{margin-bottom:0;max-width:34em;color:#463f36}
.guide-hero-copy>:nth-child(5){animation-delay:.32s}
.pin-row{margin-top:22px}
.pin-save{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;border:2px solid var(--ink);border-radius:100px;background:rgba(255,255,255,.55);color:var(--ink);font-size:15px;font-weight:700;transition:background-color var(--t1),color var(--t1)}
.pin-save:hover{background:var(--ink);color:#fff}
.pin-save svg{width:18px;height:18px;flex:none}
.gi{position:relative;width:min(100%,280px);aspect-ratio:1;margin-inline:auto;perspective:900px}
.gi .stage-tilt,.gi-float{position:absolute;inset:0;transform-style:preserve-3d}
.gi-float{animation:gfloat 7s ease-in-out infinite}
@keyframes gfloat{0%,100%{transform:translateY(0) rotateY(-16deg) rotateX(6deg)}50%{transform:translateY(-3%) rotateY(14deg) rotateX(-4deg)}}
.gi-card,.gi-plate{position:absolute;left:17%;top:17%;width:66%;height:66%;border-radius:26%}
.gi-card{display:grid;place-items:center;background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(255,255,255,.55));border:1px solid #fff;box-shadow:0 30px 50px -22px rgba(50,70,140,.5),inset 0 -14px 26px rgba(140,160,255,.18);transform:translateZ(50px)}
.gi-card span{font-size:clamp(70px,9vw,110px);line-height:1;color:var(--ink)}
.gi-plate{background:var(--grad);opacity:.85;transform:translateZ(-10px) translate(8%,8%)}
.gi-orb{position:absolute;border-radius:50%;aspect-ratio:1;background:radial-gradient(circle at 35% 30%,#fff,var(--sun))}
.o1{left:6%;top:12%;width:16%;transform:translateZ(110px)}
.o2{right:4%;bottom:10%;width:11%;transform:translateZ(80px);background:radial-gradient(circle at 35% 30%,#fff,var(--sky))}
.article{max-width:860px;padding-top:55px;padding-bottom:70px}
.guide-hero+.article{padding-top:36px}
.article>.eyebrow{margin-top:40px}
.article h1{font-size:clamp(40px,5vw,65px)}
.article .lead{max-width:none;font-size:20px}
.article section{position:relative;padding:28px 0 28px 74px;border-top:1px solid var(--line)}
.article section h2{font-size:28px;letter-spacing:-.03em;margin-bottom:14px}
.article section p{font-size:17px;color:var(--muted)}
.step{position:absolute;left:0;top:28px;display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:var(--grad);color:var(--ink);font-size:17px;font-weight:800;box-shadow:0 12px 20px -12px rgba(90,110,230,.8),inset 0 1px 0 rgba(255,255,255,.5)}
.article-disclosure{background:#f6efdf;border-radius:14px;padding:14px 18px;font-size:13px;margin:0 0 26px}
.article>p{margin-top:25px}
.guide-cta{position:relative;isolation:isolate;margin-top:36px;padding:34px;border-radius:28px}
.guide-cta:before{content:'';position:absolute;inset:12px 6px -12px 10px;z-index:-2;border-radius:inherit;background:linear-gradient(135deg,#dfe9ff,#fff1c9);rotate:1.6deg}
.guide-cta:after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(160deg,#fff,#eef6ff);border:1px solid #d9e6f7;box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(40,70,130,.08),0 28px 48px -26px rgba(60,90,170,.5)}
.guide-cta h2{font-size:30px}
.guide-cta p{margin:15px 0;font-size:15px}
/* footer */
footer{background:#f2ebdf;border-top:1px solid var(--line);margin-top:40px}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-top:35px;padding-bottom:30px}
.footer-top img{width:190px;height:auto}
.footer-top p{font-size:14px;margin-top:10px;color:var(--muted)}
.footer-links{display:flex;flex-wrap:wrap;gap:6px;font-size:14px}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px}
.footer-links a:hover{text-decoration:underline;text-underline-offset:5px}
.fineprint{border-top:1px solid #ddd6c9;padding-top:20px;padding-bottom:max(25px,env(safe-area-inset-bottom));font-size:12px;color:#5d584f}
.fineprint p{margin-bottom:6px}
/* scroll reveal: .rv is only ever added by JS, to elements that are below the fold */
.rv{opacity:0}
.rv-in{animation:rvin var(--t3) var(--ease) calc(var(--i,0)*70ms) backwards}
@keyframes rvin{from{opacity:0;translate:0 28px}}
/* pause continuous motion when offscreen (class from IntersectionObserver) or tab hidden */
.is-off,.is-off *,.is-off :before,.is-off :after,.is-off:before,.is-off:after,.is-hidden *,.is-hidden :before,.is-hidden :after{animation-play-state:paused!important}
@media(max-width:1000px){.guide-hero-in{grid-template-columns:1fr}.gi{width:min(60%,220px);margin-top:10px}}
@media(max-width:700px){.wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}.header{--hh:64px}.nav{gap:8px}.brand,.brand img{width:108px}.preferences{gap:2px}.preferences select{max-width:none;font-size:16px;font-weight:600;padding:0 8px}.preferences label{min-width:0}.language{font-size:12px}h1{font-size:clamp(40px,11.4vw,64px)}.milo.mini{width:104px}.footer-top{display:block}.footer-links{margin-top:20px;flex-wrap:wrap}.guide-hero{padding:28px 0 44px}.article section{padding-left:62px}.article section h2{font-size:24px}.article section p{font-size:16px}.step{width:44px;height:44px;border-radius:14px;font-size:15px}.guide-cta{padding:24px}.guide-hero .eyebrow{margin-top:18px}}
@media(max-width:380px){.nav{gap:6px}.brand,.brand img{width:96px}.preferences{gap:2px}.preferences select{letter-spacing:-.02em;padding:0 4px 0 8px}.language{padding:0 2px;margin:0 -2px;font-size:11px}}
/* phones & touch: lighter effects (no backdrop blur over animated layers, no filters on animated layers, one blob, no glare, no sticky hover) */
@media(max-width:700px),(pointer:coarse){.header:before,.header.is-small:before{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,253,248,.95)}.milo-body,.star{filter:none}}
@media(hover:none){.button:hover{transform:none;box-shadow:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{animation:none!important;transition:none!important}.rv{opacity:1}}
.live-dot{position:relative;display:inline-block;width:10px;height:10px;flex-shrink:0;border-radius:50%;background:#ffb020}
.live-dot:after{content:'';position:absolute;inset:0;border-radius:50%;background:#ffb020;animation:pring 1.9s ease-out infinite}
@keyframes pring{from{transform:scale(1);opacity:.55}to{transform:scale(3.2);opacity:0}}
/* LIVE ticker: a 42 px band under the header, always reserved (no layout shift). The flowing gradient is a 300%-wide pseudo-element moved with translateX only.
   Headline text is white: 17.3:1 on the ink stops, 5.2:1 on the burnt-orange stops (AA); the amber label sits on a solid ink pill. Items are 44 px tall hit areas that overflow the band by 1 px. */
.ticker{position:relative;isolation:isolate;height:42px;overflow:hidden;overflow-x:clip;overflow-y:visible;background:#141b26;color:#fff;font-size:13px;font-weight:700}
.ticker:before{content:'';position:absolute;inset:0 auto 0 0;z-index:-1;width:300%;background:linear-gradient(90deg,#141b26,#c2410c,#141b26,#c2410c,#141b26);animation:flow 18s linear infinite}
@keyframes flow{to{transform:translateX(-50%)}}
.ticker-in{display:flex;align-items:center;gap:14px;height:100%}
.ticker-tag{flex:none;display:inline-flex;align-items:center;gap:9px;padding:5px 11px;border-radius:999px;background:#141b26;color:#ffb020;font-size:11px;font-weight:800;letter-spacing:.14em}
.ticker a{color:#fff}
.ticker a:focus-visible{outline-color:#fff;outline-offset:-3px;border-radius:8px}
.ticker-static{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:44px;height:44px;margin-block:-1px}
.ticker-view{flex:1;min-width:0;height:44px;margin-block:-1px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent)}
/* phones and reduced motion: one headline at a time (fx/pulse.mjs fades them every 4 s on phones; reduced motion keeps the latest one still) */
@media(max-width:700px),(prefers-reduced-motion:reduce){.ticker-view{-webkit-mask-image:none;mask-image:none}}
/* desktop menu: vivid "Live pulse" pill (the phone header row gets nothing new; the ticker band is the phone entry point) */
.dnav a.nav-live{gap:9px;margin-left:8px;padding:0 17px;border-radius:99px;background:#141b26;color:#fff;transition:box-shadow var(--t2) var(--ease),transform var(--t1) var(--ease)}
.dnav a.nav-live:after{display:none}
.dnav a.nav-live:hover{transform:translateY(-1px);box-shadow:0 12px 22px -12px rgba(194,65,12,.9)}
/* below 1024 px: the "Menu" button replaces the nav; the language link and the region select (.preferences) show only inside the open sheet, pinned to its bottom edge */
@media(min-width:1024px){.nav{gap:16px}}
@media(max-width:1023px){
.dnav,.preferences{display:none}
.mmenu{display:block}
.sheet{position:absolute;z-index:6;left:0;right:0;top:100%;height:calc(100vh - var(--hh) - env(safe-area-inset-top,0px));height:calc(100svh - var(--hh) - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;padding:18px max(20px,env(safe-area-inset-right)) calc(100px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left));background:var(--paper);border-top:1px solid var(--line);animation:fade .2s var(--ease) backwards}
.sheet .mt-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
.sheet .mt{font-size:12px;border-radius:14px}
.sheet .mt span{left:7px;right:7px;bottom:6px}
.mmenu[open]~.preferences{display:flex;position:absolute;z-index:7;left:0;right:0;top:calc(100vh - env(safe-area-inset-top,0px) - 72px - env(safe-area-inset-bottom,0px));top:calc(100svh - env(safe-area-inset-top,0px) - 72px - env(safe-area-inset-bottom,0px));height:calc(72px + env(safe-area-inset-bottom,0px));padding:0 max(20px,env(safe-area-inset-right)) env(safe-area-inset-bottom,0px) max(20px,env(safe-area-inset-left));align-items:center;justify-content:space-between;gap:12px;background:#fff;border-top:1px solid var(--line);font-size:14px}
.mmenu[open]~.preferences label{flex:1;max-width:260px}
.mmenu[open]~.preferences select{width:100%;max-width:none}
.header:has(.mmenu[open]) .nav{transform:none}
}