/* bg-mesh.css - hero background for multi-stream.io (gradient mesh + faint grid + grain).
Pure CSS, ~1.6 KB, no images. The grain tile is an inline SVG (feTurbulence) rasterised once.
Usage: (vivid violet, default)
(darker, matches tokens.css night scope)
Children stay above the decoration automatically (the pseudo-elements sit at z-index:-1 inside an
isolated stacking context). Colours: --hx-a/--hx-b/--hx-c are the brand violets from the brief. */
.hx-bg {
--hx-a: #2a0d78; --hx-b: #5b1fd6; --hx-c: #7d3cf2;
--hx-glow-1: rgb(193 59 208 / .42); /* magenta, behind the hero art (right) */
--hx-glow-2: rgb(255 122 26 / .30); /* warm orange corner (bottom right) */
--hx-glow-3: rgb(125 60 242 / .45); /* violet pool (bottom left) */
--hx-base: linear-gradient(115deg, var(--hx-a) 0%, #3a12a6 38%, var(--hx-b) 74%, var(--hx-c) 100%);
position: relative; isolation: isolate; overflow: hidden; color: #fff;
background:
radial-gradient(46% 56% at 84% 32%, var(--hx-glow-1), transparent 72%),
radial-gradient(38% 46% at 98% 100%, var(--hx-glow-2), transparent 70%),
radial-gradient(52% 60% at 2% 104%, var(--hx-glow-3), transparent 72%),
var(--hx-base);
}
.hx-bg--night {
--hx-a: #1f0f52; --hx-b: #2c1670; --hx-c: #3b1d93;
--hx-glow-1: rgb(193 59 208 / .30); --hx-glow-2: rgb(255 122 26 / .20); --hx-glow-3: rgb(125 60 242 / .38);
--hx-base: linear-gradient(165deg, #2c1670 0%, #1f0f52 36%, #140a33 68%, #0d0620 100%);
}
.hx-bg::before, .hx-bg::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* faint 64 px grid, fading out towards the edges */
.hx-bg::before {
background-image: linear-gradient(rgb(255 255 255 / .055) 1px, transparent 1px),
linear-gradient(90deg, rgb(255 255 255 / .055) 1px, transparent 1px);
background-size: 64px 64px; background-position: -1px -1px;
-webkit-mask-image: radial-gradient(78% 92% at 64% 44%, #000 18%, transparent 78%);
mask-image: radial-gradient(78% 92% at 64% 44%, #000 18%, transparent 78%);
}
/* grain: breaks up gradient banding, gives the flat colour a tactile feel */
.hx-bg::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px;
mix-blend-mode: overlay; opacity: .13;
}
.hx-bg--clean::after { display: none; } /* no grain (used for og.jpg: smaller JPEG) */
/* hero.css - MultiStream hero art (laptop + phone + one hub + platform chips + animated beams).
Designed on a 640 x 690 grid; EVERYTHING scales with the width of its container (container query units),
so one rule set serves 358 px phones and 720 px desktops. Every length is "grid units x --u", where
--u = container width / 640. (src/hero.src.css writes them as Nu and src/make_hero.py expands that into
calc(N * var(--u)), so this shipped file is plain CSS.)
Needs: (1) the logo sprite (logos-sprite.svg) inlined once on the page,
(2) the app screenshot at /img/app.webp,
(3) optionally bg-mesh.css (the section background).
Motion: CSS only. prefers-reduced-motion, html[data-motion="off"] and .hx.is-still all freeze it. */
.hx { container-type: inline-size; width: 100%; max-width: 720px; margin-inline: auto; }
.hx-stage {
position: relative; width: 100%; aspect-ratio: 640 / 690;
color: #fff; user-select: none; -webkit-user-select: none;
font-family: var(--font-sans, "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-webkit-font-smoothing: antialiased;
}
/* no container-query units (very old browsers): size from the viewport instead of overflowing */
.hx-stage { --u: calc(min(100vw - 40px, 640px) / 640); }
@supports (width: 1cqw) { .hx-stage { --u: calc(100cqw / 640); } }
.hx-stage > * { position: absolute; margin: 0; }
.hx-stage ul { list-style: none; padding: 0; }
.hx-chips { inset: 0; }
/* ---- atmosphere ------------------------------------------------------------------------------ */
.hx-glow { border-radius: 50%; pointer-events: none; }
.hx-glow--o { left: calc(130 * var(--u)); top: calc(96 * var(--u)); width: calc(400 * var(--u)); height: calc(340 * var(--u)); background: radial-gradient(closest-side, rgb(255 122 26 / .30), rgb(255 122 26 / 0)); }
.hx-glow--v { left: calc(0 * var(--u)); top: calc(380 * var(--u)); width: calc(640 * var(--u)); height: calc(310 * var(--u)); background: radial-gradient(closest-side, rgb(193 59 208 / .38), rgb(193 59 208 / 0)); }
.hx-rings, .hx-beams { left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hx-ring { fill: none; stroke: rgb(255 255 255 / .09); stroke-width: 1; }
.hx-ring--d { stroke-dasharray: 2 7; stroke: rgb(255 255 255 / .16); }
.hx-sp { fill: #fff; opacity: .7; animation: hx-tw 4.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s); }
/* ---- beams ----------------------------------------------------------------------------------- */
.hx-beams path { fill: none; stroke-linecap: round; }
.hx-b-glow { stroke: rgb(255 176 46 / .07); stroke-width: 6; }
.hx-b-line { stroke: rgb(255 255 255 / .38); stroke-width: 1.7; stroke-dasharray: 1.5 7; animation: hx-flow 1.1s linear infinite; }
.hx-b-pkt { stroke: #ffd29a; stroke-width: 3.8; stroke-dasharray: 5 95; stroke-dashoffset: 0;
animation: hx-pkt 3.4s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: calc(var(--i, 0) * -.43s); }
.hx-b-src { stroke: #ffb02e; stroke-width: 2.2; stroke-dasharray: 2 8; animation: hx-flow .9s linear infinite; }
@keyframes hx-flow { to { stroke-dashoffset: -8.5; } }
@keyframes hx-pkt { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes hx-tw { 0%, 100% { opacity: .15; } 50% { opacity: .85; } }
@keyframes hx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-5 * var(--u))); } }
@keyframes hx-ping { from { transform: scale(1); opacity: .75; } to { transform: scale(1.5, 1.9); opacity: 0; } }
@keyframes hx-dot { from { transform: scale(1); opacity: .8; } to { transform: scale(3.2); opacity: 0; } }
/* ---- laptop ---------------------------------------------------------------------------------- */
.hx-laptop { left: calc(46 * var(--u)); top: calc(354 * var(--u)); width: calc(472 * var(--u)); transform-origin: 30% 100%; transform: perspective(1900px) rotateY(9deg) rotateX(2.5deg); }
.hx-lid {
position: relative; padding: calc(11 * var(--u)) calc(11 * var(--u)) calc(12 * var(--u)); border-radius: calc(18 * var(--u)) calc(18 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));
background: linear-gradient(160deg, #4a3a85 0%, #1c1040 46%, #0f0728 100%);
box-shadow: inset 0 0 0 1px rgb(255 255 255 / .20), inset 0 1px 0 rgb(255 255 255 / .35),
0 calc(34 * var(--u)) calc(60 * var(--u)) calc(-22 * var(--u)) rgb(8 2 30 / .8), 0 0 calc(70 * var(--u)) calc(-12 * var(--u)) rgb(125 60 242 / .55);
}
.hx-lid::before { content: ""; position: absolute; left: 50%; top: calc(4.5 * var(--u)); width: calc(4 * var(--u)); height: calc(4 * var(--u)); margin-left: calc(-2 * var(--u)); border-radius: 50%; background: #0a0420; box-shadow: 0 0 0 calc(1 * var(--u)) rgb(255 255 255 / .18); }
.hx-screen {
position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: calc(7 * var(--u));
background: radial-gradient(60% 80% at 82% 0%, rgb(255 122 26 / .55), transparent 62%),
radial-gradient(70% 90% at 0% 100%, rgb(193 59 208 / .6), transparent 60%),
linear-gradient(135deg, #3b1d93, #6a2ae6 55%, #8f45f5);
}
.hx-screen img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; display: block; }
.hx-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, rgb(255 255 255 / .16) 0%, rgb(255 255 255 / 0) 34%); }
.hx-base {
position: relative; height: calc(12 * var(--u)); margin: 0 calc(-22 * var(--u)); border-radius: 0 0 calc(22 * var(--u)) calc(22 * var(--u));
background: linear-gradient(180deg, #e6dcff 0%, #a898d8 38%, #5c4a9a 100%);
box-shadow: 0 calc(18 * var(--u)) calc(30 * var(--u)) calc(-10 * var(--u)) rgb(8 2 30 / .8), inset 0 1px 0 rgb(255 255 255 / .6);
}
.hx-base::before { content: ""; position: absolute; left: 50%; top: 0; width: calc(76 * var(--u)); height: calc(5 * var(--u)); margin-left: calc(-38 * var(--u)); border-radius: 0 0 calc(8 * var(--u)) calc(8 * var(--u)); background: rgb(60 40 120 / .55); }
.hx-live {
position: absolute; left: calc(14 * var(--u)); top: calc(13 * var(--u)); z-index: 1; display: inline-flex; align-items: center; gap: calc(6 * var(--u));
height: calc(20 * var(--u)); padding: 0 calc(9 * var(--u)) 0 calc(8 * var(--u)); border-radius: calc(10 * var(--u)); background: #ff3b30; color: #fff;
font-size: calc(10.5 * var(--u)); font-weight: 800; letter-spacing: .08em; line-height: 1; box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) calc(-4 * var(--u)) rgb(255 59 48 / .7);
}
.hx-live i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: #fff; }
/* ---- phone ----------------------------------------------------------------------------------- */
.hx-phone {
left: calc(484 * var(--u)); top: calc(404 * var(--u)); width: calc(130 * var(--u)); height: calc(268 * var(--u)); padding: calc(6 * var(--u)); border-radius: calc(27 * var(--u)); rotate: -3deg;
background: linear-gradient(160deg, #4a3a85 0%, #160a38 50%, #0b0520 100%);
box-shadow: inset 0 0 0 1px rgb(255 255 255 / .24), inset 0 1px 0 rgb(255 255 255 / .4),
0 calc(34 * var(--u)) calc(50 * var(--u)) calc(-16 * var(--u)) rgb(8 2 30 / .85), 0 0 calc(50 * var(--u)) calc(-10 * var(--u)) rgb(255 122 26 / .35);
}
.hx-phone svg { display: block; width: 100%; height: 100%; border-radius: calc(21 * var(--u)); }
/* ---- hub ------------------------------------------------------------------------------------- */
.hx-hub {
left: calc(330 * var(--u)); top: calc(262 * var(--u)); translate: -50% -50%; display: flex; align-items: center; gap: calc(10 * var(--u));
height: calc(54 * var(--u)); padding: 0 calc(22 * var(--u)) 0 calc(8 * var(--u)); border-radius: calc(27 * var(--u)); white-space: nowrap;
background: linear-gradient(135deg, #ffb02e 0%, #ff9a24 45%, #ff7a1a 100%); color: #1d1530;
font-size: calc(17.5 * var(--u)); font-weight: 800; letter-spacing: -.01em; line-height: 1;
box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 calc(14 * var(--u)) calc(44 * var(--u)) calc(-8 * var(--u)) rgb(255 122 26 / .75), 0 0 calc(90 * var(--u)) rgb(255 122 26 / .32);
}
.hx-hub::before, .hx-hub::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; border: calc(2 * var(--u)) solid rgb(255 176 46 / .7);
animation: hx-ping 3.2s ease-out infinite; pointer-events: none;
}
.hx-hub::after { animation-delay: 1.6s; }
.hx-hub-ico { width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: #1d1530; flex: none; }
.hx-hub-ico svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
/* ---- platform chips (glass) ------------------------------------------------------------------ */
.hx-chip {
left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); translate: -50% -50%;
position: absolute; display: flex; align-items: center; gap: calc(9 * var(--u)); height: calc(44 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(7 * var(--u)); border-radius: calc(22 * var(--u)); white-space: nowrap;
font-size: calc(14.5 * var(--u)); font-weight: 700; line-height: 1; letter-spacing: -.005em;
background: linear-gradient(180deg, rgb(255 255 255 / .17), rgb(255 255 255 / .05)), rgb(24 11 62 / .72);
border: 1px solid rgb(255 255 255 / .22);
box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 calc(16 * var(--u)) calc(32 * var(--u)) calc(-12 * var(--u)) rgb(8 2 30 / .7);
-webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
animation: hx-bob 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.83s);
}
.hx-b { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(9 * var(--u)); display: grid; place-items: center; flex: none; background: var(--bg, #fff); color: var(--fg, #1d1530); box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset; }
.hx-b svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); display: block; }
.hx-dot { position: relative; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 calc(2 * var(--u)) rgb(255 59 48 / .3), 0 0 calc(10 * var(--u)) rgb(255 59 48 / .85); flex: none; }
.hx-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #ff3b30; animation: hx-dot 2.4s ease-out infinite; animation-delay: calc(var(--i, 0) * -.4s); }
/* ---- freeze: reduced motion / global pause switch / static render -------------------------------- */
@media (prefers-reduced-motion: reduce) {
.hx *, .hx *::before, .hx *::after { animation: none !important; }
.hx-b-pkt { stroke-dashoffset: calc(var(--p, 50) * -1) !important; }
.hx-sp { opacity: .55; }
}
:root[data-motion="off"] .hx *, :root[data-motion="off"] .hx *::before, :root[data-motion="off"] .hx *::after,
.hx.is-still *, .hx.is-still *::before, .hx.is-still *::after { animation: none !important; }
:root[data-motion="off"] .hx-b-pkt, .hx.is-still .hx-b-pkt { stroke-dashoffset: calc(var(--p, 50) * -1) !important; }
:root[data-motion="off"] .hx-sp, .hx.is-still .hx-sp { opacity: .55; }
/* .is-flat (used only for the hero.webp render): drop the wide soft glows, they band badly in an alpha WebP; the page background supplies them */
.hx.is-flat .hx-glow { display: none; }
.hx.is-flat .hx-hub { box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 calc(14 * var(--u)) calc(36 * var(--u)) calc(-10 * var(--u)) rgb(255 122 26 / .6); }
.hx.is-flat .hx-lid { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .20), inset 0 1px 0 rgb(255 255 255 / .35), 0 calc(30 * var(--u)) calc(50 * var(--u)) calc(-24 * var(--u)) rgb(8 2 30 / .7); }
.hx.is-flat .hx-phone { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .24), inset 0 1px 0 rgb(255 255 255 / .4), 0 calc(30 * var(--u)) calc(44 * var(--u)) calc(-18 * var(--u)) rgb(8 2 30 / .7); }
.hx.is-still .hx-hub::before, .hx.is-still .hx-hub::after, .hx.is-still .hx-dot::after { display: none; }
:root[data-motion="off"] .hx-hub::before, :root[data-motion="off"] .hx-hub::after, :root[data-motion="off"] .hx-dot::after { display: none; }
@media (prefers-reduced-motion: reduce) { .hx-hub::before, .hx-hub::after, .hx-dot::after { display: none; } }
/* icons.css - feature + download icons (use with icons-sprite.svg inlined once per page).
*/
.fi { display: block; width: 100%; height: 100%; }
.fi-tile {
--fi-size: 112px;
display: grid; place-items: center; flex: none;
width: var(--fi-size); height: var(--fi-size); padding: calc(var(--fi-size) * .125);
border-radius: calc(var(--fi-size) * .27);
background: linear-gradient(145deg, #faf7ff 0%, #ece3ff 100%);
box-shadow: inset 0 0 0 1px #e4def2, 0 1px 2px rgb(29 21 48 / .05), 0 10px 24px -12px rgb(91 31 214 / .35);
transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.fi-tile--sm { --fi-size: 96px; }
.fi-tile--xs { --fi-size: 64px; }
a:hover > .fi-tile, .app:hover .fi-tile, .feat:hover .fi-tile { transform: translateY(-3px) rotate(-2deg); box-shadow: inset 0 0 0 1px #c4adff, 0 16px 30px -12px rgb(91 31 214 / .5); }
/* fits the existing markup: figure.feat (feature card) and a.app (download card) */
.feat { position: relative; }
.feat figcaption { position: relative; padding-top: 48px; }
.feat .fi-tile { position: absolute; top: -30px; left: 16px; } /* straddles the bottom edge of the screenshot */
.app .fi-tile { margin-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .fi-tile { transition: none; } a:hover > .fi-tile, .app:hover .fi-tile, .feat:hover .fi-tile { transform: none; } }
/* platform-wall.css - logo wall (grid by category + one-row marquee) for multi-stream.io
Markup comes from platform_wall.py (wall_html / marquee_html). Needs logos-sprite.svg inlined once on the page.
Light by default; dark: add class "pw--night" to .pw (or put it inside .theme-night).
Colour tokens fall back to the site palette when tokens.css is not loaded. */
.pw {
--pw-tile: var(--surface, #fff);
--pw-line: var(--line, #e4def2);
--pw-ink: var(--text, #1d1530);
--pw-muted: var(--text-3, #6e6784);
--pw-logo: #7a7294; /* resting logo colour: neutral violet-grey, brand colour on hover */
--pw-accent: var(--violet-600, #5b1fd6);
--pw-tick: var(--violet-600, #5b1fd6);
color: var(--pw-ink);
}
.pw--night, .theme-night .pw {
--pw-tile: rgb(255 255 255 / .06); --pw-line: rgb(255 255 255 / .14); --pw-ink: #fff; --pw-muted: rgb(255 255 255 / .70);
--pw-logo: rgb(255 255 255 / .72); --pw-accent: var(--orange-300, #ffd29a); --pw-tick: #ffb02e;
}
.pw-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* ---- legend + footnote ----------------------------------------------------------------------- */
.pw-legend { display: flex; align-items: center; gap: 9px; margin: 0 0 22px; font-size: .875rem; font-weight: 600; color: var(--pw-muted); }
.pw-check { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--pw-tick); color: #fff; }
.pw--night .pw-check, .theme-night .pw .pw-check { color: #1d1530; }
.pw-check svg { width: 13px; height: 13px; display: block; }
.pw-note { max-width: 66ch; margin: 26px 0 0; font-size: .875rem; line-height: 1.55; color: var(--pw-muted); text-wrap: pretty; }
.pw-marq .pw-note { margin-inline: auto; text-align: center; }
/* ---- grid by category: one card per category, one row of tiles per card ------------------------ */
.pw { --pw-unit: 106px; --pw-tile-in: #faf8ff; }
.pw--night, .theme-night .pw { --pw-tile-in: rgb(255 255 255 / .05); }
.pw-groups { display: flex; flex-wrap: wrap; gap: 18px; }
.pw-group {
--n: 3; flex: var(--n) 1 calc(var(--n) * var(--pw-unit) + 36px); min-width: 0; padding: 18px 18px 18px;
background: var(--pw-tile); border: 1px solid var(--pw-line); border-radius: 26px;
box-shadow: 0 1px 2px rgb(29 21 48 / .04), 0 18px 36px -26px rgb(91 31 214 / .35);
}
.pw--night .pw-group, .theme-night .pw .pw-group { box-shadow: none; }
.pw-h { margin: 2px 4px 14px; font-size: .75rem; line-height: 1.3; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--pw-accent); }
.pw-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-auto-flow: row dense; gap: 10px; }
.pw-tile {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
min-height: 112px; padding: 16px 6px 14px; text-align: center;
background: var(--pw-tile-in); border: 1px solid var(--pw-line); border-radius: 18px;
transition: transform .22s cubic-bezier(.2, .8, .2, 1), border-color .2s, box-shadow .22s, background-color .2s;
}
.pw-tile--wide { grid-column: span 2; }
.pw-logo { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: var(--pw-logo); transition: color .2s, background-color .2s; }
.pw-logo svg { width: var(--lw, 30px); height: 30px; display: block; }
.pw-logo--semi { width: 64px; }
.pw-logo--semi svg { width: 52px; height: 16.5px; }
.pw-logo--wide { width: 100px; height: 40px; }
.pw-logo--wide svg { width: 88px; height: 26px; }
.pw-name { font-size: .875rem; line-height: 1.2; font-weight: 700; overflow-wrap: anywhere; }
.pw-tile .pw-check { position: absolute; top: 8px; right: 8px; width: 17px; height: 17px; }
.pw-tile .pw-check svg { width: 12px; height: 12px; }
.pw-tile--built { border-color: color-mix(in srgb, var(--pw-tick) 40%, var(--pw-line)); background: var(--pw-tile); }
.pw-group--other { flex: 1 1 100%; }
.pw-other { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; }
.pw-group--other .pw-grid { flex: 0 1 300px; grid-template-columns: minmax(0, 1fr); }
.pw-group--other .pw-tile { flex-direction: row; gap: 14px; min-height: 84px; padding-inline: 16px; }
.pw-group--other .pw-name { text-align: left; }
.pw-other-t { flex: 1 1 240px; margin: 0; font-size: 1rem; line-height: 1.5; color: var(--pw-muted); text-wrap: balance; }
.pw-tile--rtmp {
background: linear-gradient(var(--pw-tile), var(--pw-tile)) padding-box, linear-gradient(135deg, #7d3cf2, #c13bd0 55%, #ff7a1a) border-box;
border: 1.5px solid transparent;
}
.pw-tile--rtmp .pw-logo { color: var(--pw-accent); }
@media (hover: hover) {
.pw-tile:hover { transform: translateY(-3px); background: var(--pw-tile); border-color: var(--c); border-color: color-mix(in srgb, var(--c) 55%, var(--pw-line));
box-shadow: 0 16px 28px -16px var(--c); box-shadow: 0 16px 28px -16px color-mix(in srgb, var(--c) 72%, transparent); }
.pw-tile:hover .pw-logo { color: var(--c); background: var(--cb, transparent); }
.pw-tile--rtmp:hover { border-color: transparent; }
}
@media (hover: none) { .pw-logo { color: var(--c); background: var(--cb, transparent); } } /* touch: always in brand colours */
.pw--color .pw-logo { color: var(--c); background: var(--cb, transparent); } /* variant: brand colours at rest too */
.pw--color .pw-tile--rtmp .pw-logo { color: var(--pw-accent); }
@media (max-width: 900px) {
.pw-groups { gap: 14px; }
.pw-group { flex: 1 1 100%; padding: 16px 14px; }
.pw-grid { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); }
.pw-group--other .pw-grid { grid-template-columns: minmax(0, 1fr); flex-basis: 100%; }
.pw-tile--wide { grid-column: span 2; }
.pw-tile { min-height: 96px; }
}
@media (max-width: 420px) { .pw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pw-group--other .pw-grid { grid-template-columns: minmax(0, 1fr); } }
/* ---- single-row marquee ---------------------------------------------------------------------- */
.pw-marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.pw-track { display: flex; flex: none; gap: 12px; margin: 0; padding: 8px 12px 16px 0; list-style: none; animation: pw-scroll var(--pw-dur, 70s) linear infinite; }
.pw-marquee:hover .pw-track { animation-play-state: paused; }
@keyframes pw-scroll { to { transform: translateX(-100%); } }
.pw-chip {
display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 9px; border-radius: 28px; white-space: nowrap;
font-size: .9688rem; font-weight: 700; background: var(--pw-tile); border: 1px solid var(--pw-line);
box-shadow: 0 1px 2px rgb(29 21 48 / .05), 0 10px 22px -14px rgb(91 31 214 / .30);
}
.pw--night .pw-chip, .theme-night .pw-chip { box-shadow: 0 10px 22px -14px rgb(0 0 0 / .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pw-chip .pw-b { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--b, #fff); color: var(--f, #1d1530); box-shadow: inset 0 0 0 1px rgb(29 21 48 / .08); }
.pw-chip .pw-b svg { width: 22px; height: 22px; display: block; }
.pw-chip--semi .pw-b { width: 62px; }
.pw-chip--semi .pw-b svg { width: 46px; height: 14.5px; }
.pw-chip--wide { padding-right: 9px; }
.pw-chip--wide .pw-b { width: 92px; }
.pw-chip--wide .pw-b svg { width: 74px; height: 22px; }
/* ---- motion off: marquee turns into a static, centred, wrapping row ---------------------------- */
@media (prefers-reduced-motion: reduce) {
.pw-marquee { -webkit-mask-image: none; mask-image: none; }
.pw-track { animation: none; flex-wrap: wrap; justify-content: center; padding-right: 0; }
.pw-track[aria-hidden="true"] { display: none; }
.pw-tile { transition: none; } .pw-tile:hover { transform: none; }
}
:root[data-motion="off"] .pw-marquee { -webkit-mask-image: none; mask-image: none; }
:root[data-motion="off"] .pw-track { animation: none; flex-wrap: wrap; justify-content: center; padding-right: 0; }
:root[data-motion="off"] .pw-track[aria-hidden="true"] { display: none; }