/* TNS 365 logo, pure CSS. Official embed: https://www.tns365.com/media-pack/
Markup (themed sites use logo-markup.html; spans + data-tns):
Colour: add tns--reversed (dark backgrounds), tns--white or tns--black.
Motion: add one of tns--draw, tns--pulse, tns--spin, tns--orbit, tns--flip, tns--wave. */
@font-face{font-family:'Mukta';font-style:normal;font-weight:800;font-display:block;src:url(https://cdn.tns365.com/brand/Mukta-800.woff2) format('woff2')}
/* ---------------------------------------------------------------------------
TNS 365 logo — pure CSS. No SVG, no image, no canvas.
Everything is expressed in "logo units": the artwork is 731 x 588 units,
matching the source PNG's own pixel grid, so every number below is a real
measurement taken off the original. The container sets font-size to
(width / 731), which makes 1em == 1 logo unit for every child. Change
--tns-w and the whole thing scales exactly.
Layers, back to front:
.tns__rings masking box that knocks the wordmark band out of both rings
.tns__ring blue outer ring Ø508.1u, 24u stroke
.tns__halo grey inner ring Ø424.4u, 24u stroke
.tns__ping animation-only clone of the outer ring
.tns__word TNS365, Mukta ExtraBold at 214.4u, tracking -4.6u
--------------------------------------------------------------------------- */
@property --sweep {
syntax: '';
initial-value: 0deg;
inherits: false;
}
.tns {
display: inline-block; /* also works on */
--tns-w: 520px;
--u: calc(var(--tns-w) / 731);
--tns-blue: #009cff;
--tns-ink: #000000;
--tns-halo: #f0efef;
position: relative;
width: var(--tns-w);
height: calc(588 * var(--u));
font-size: var(--u); /* 1em = 1 logo unit */
-webkit-user-select: none;
user-select: none;
}
/* Circle fitted to the original by least squares: centre (374, 289), outer
radius 254.07 — note it is NOT centred on the artboard, it sits 8.5u right
of the wordmark's own centre. Residual on the fit is 0.2u, so it really is
a circle, not an ellipse.
The wordmark sits in a clear band across the middle: both rings are cut away
between y=192.5 and y=387.5, i.e. 157.6u..352.6u inside this box. */
.tns__rings {
position: absolute;
left: 119.92em;
top: 34.90em;
width: 509.2em;
height: 509.2em;
--band: linear-gradient(
to bottom,
#000 0 157.6em,
transparent 157.6em 352.6em,
#000 352.6em 100%
);
-webkit-mask-image: var(--band);
mask-image: var(--band);
}
.tns__ring,
.tns__halo,
.tns__ping {
position: absolute;
box-sizing: border-box;
border-radius: 50%;
}
.tns__ring,
.tns__ping {
inset: 0;
border: 24em solid var(--tns-blue);
}
/* The halo is its own circle, fitted separately: centre (374, 290) — one unit
lower than the blue one — outer radius 212.21. */
.tns__halo {
left: 41.80em;
top: 42.82em;
width: 425.6em;
height: 425.6em;
border: 24em solid var(--tns-halo);
}
/* Hook for the draw-on animation; inert until a modifier sets --ring-mask. */
.tns__ring {
-webkit-mask-image: var(--ring-mask, none);
mask-image: var(--ring-mask, none);
}
.tns__ping {
opacity: 0;
}
.tns__word {
position: absolute;
left: calc(3 * var(--u));
width: 100%;
/* em would resolve against this element's own 216u font-size, so the
offsets here are written against the unit directly. */
top: calc(190.3 * var(--u));
text-align: center;
font-family: 'Mukta', system-ui, sans-serif;
font-weight: 800;
font-size: calc(214.4 * var(--u));
line-height: 1;
letter-spacing: calc(-4.6 * var(--u));
color: var(--tns-ink);
white-space: nowrap;
}
/* Each glyph gets its own box purely so it can be animated on its own, and an
index the staggered animations read as a delay multiplier. Glyphs 4-6 are
the blue ones. */
.tns__word i {
display: inline-block;
font-style: normal;
}
.tns__word i:nth-child(1) { --i: 0; }
.tns__word i:nth-child(2) { --i: 1; }
.tns__word i:nth-child(3) { --i: 2; }
.tns__word i:nth-child(4) { --i: 3; color: var(--tns-blue); }
.tns__word i:nth-child(5) { --i: 4; color: var(--tns-blue); }
.tns__word i:nth-child(6) { --i: 5; color: var(--tns-blue); }
/* --------------------------------------------------------------------------
Animations. Each is a modifier class on .tns, so any of them can be added,
removed or combined at runtime without touching the artwork.
-------------------------------------------------------------------------- */
/* draw — the ring is stroked on clockwise from 12 o'clock, then the six
glyphs rise into place in reading order. */
.tns--draw .tns__ring {
--ring-mask: conic-gradient(from -90deg, #000 var(--sweep), transparent 0);
animation: tns-sweep 900ms cubic-bezier(0.65, 0, 0.35, 1) both;
}
.tns--draw .tns__halo {
animation: tns-halo-in 700ms ease-out 260ms both;
}
.tns--draw .tns__word i {
animation: tns-rise 460ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
animation-delay: calc(420ms + var(--i) * 55ms);
}
@keyframes tns-sweep {
from { --sweep: 0deg; }
to { --sweep: 360deg; }
}
@keyframes tns-halo-in {
from { opacity: 0; transform: scale(0.82); }
to { opacity: 1; transform: none; }
}
@keyframes tns-rise {
from { opacity: 0; transform: translateY(0.16em); }
to { opacity: 1; transform: none; }
}
/* pulse — a ring detaches and expands outward, like a radar return. */
.tns--pulse .tns__ping {
animation: tns-ping 1600ms cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}
.tns--pulse .tns__word i:nth-child(n+4) {
animation: tns-tick 1600ms ease-in-out infinite;
}
@keyframes tns-ping {
0% { opacity: 0.55; transform: scale(1); }
70% { opacity: 0; transform: scale(1.22); }
100% { opacity: 0; transform: scale(1.22); }
}
@keyframes tns-tick {
0%, 60%, 100% { opacity: 1; }
30% { opacity: 0.45; }
}
/* spin — the outer ring becomes an indeterminate loader: a 90 degree gap
travels round it. Useful as a real waiting state in the apps. */
.tns--spin .tns__ring {
--ring-mask: conic-gradient(from -90deg, #000 0 270deg, transparent 270deg 360deg);
animation: tns-rotate 1200ms linear infinite;
}
@keyframes tns-rotate {
to { transform: rotate(360deg); }
}
/* orbit — the ring drops back to a pale track and a live arc runs round it.
The arc is .tns__ping, which sits above the ring in the stack. */
.tns--orbit .tns__ring {
border-color: var(--tns-track, #cfe9ff);
}
.tns--orbit .tns__ping {
opacity: 1;
-webkit-mask-image: conic-gradient(from -90deg, #000 0 8deg, rgba(0,0,0,.25) 34deg, transparent 62deg);
mask-image: conic-gradient(from -90deg, #000 0 8deg, rgba(0,0,0,.25) 34deg, transparent 62deg);
animation: tns-rotate 2200ms linear infinite;
}
/* flip — the digits turn over one after another, like a departure board. */
.tns--flip .tns__word {
perspective: calc(900 * var(--u));
}
.tns--flip .tns__word i:nth-child(n+4) {
animation: tns-flip 2200ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
animation-delay: calc((var(--i) - 3) * 110ms);
}
@keyframes tns-flip {
0% { transform: rotateX(0deg); }
32%, 100% { transform: rotateX(-360deg); }
}
/* wave — a slow swell travels left to right through all six glyphs. */
.tns--wave .tns__word i {
animation: tns-wave 1800ms ease-in-out infinite;
animation-delay: calc(var(--i) * 90ms);
}
@keyframes tns-wave {
0%, 55%, 100% { transform: translateY(0); }
22% { transform: translateY(-0.11em); }
}
@media (prefers-reduced-motion: reduce) {
.tns *,
.tns *::before,
.tns *::after {
animation: none !important;
}
.tns .tns__ping { opacity: 0; }
}
/* Colour variants */
.tns--reversed{--tns-ink:#fff;--tns-halo:rgba(255,255,255,.14);--tns-track:rgba(0,156,255,.28)}
.tns--white{--tns-ink:#fff;--tns-blue:#fff;--tns-halo:rgba(255,255,255,.22);--tns-track:rgba(255,255,255,.3)}
.tns--black{--tns-ink:#000;--tns-blue:#000;--tns-halo:rgba(0,0,0,.1);--tns-track:rgba(0,0,0,.15)}
/* ======================= THEME LAYERS ======================= */
/* Two extra layers every theme can use: deco sits behind the letters, front sits above them.
.pin is a zero-size anchor at the ring centre, rotated to an angle, so anything can be
placed "on the ring at 2 o'clock" without maths in each theme. 1em = 1 logo unit. */
.tns__deco,.tns__front{position:absolute; inset:0; pointer-events:none}
.tns__front{z-index:2}
.pin{position:absolute; left:var(--cx,254.6em); top:var(--cy,254.6em); width:0; height:0; transform:rotate(var(--a,0deg))}
.tns__deco .pin,.tns__front .pin{--cx:374.5em; --cy:289.5em}
.pin > *{position:absolute}
svg.dec{display:block; width:100%; height:100%; overflow:visible}
/* Halloween — pumpkin ring, a spider on a thread, 365 flickers like candlelight */
.tns.s-halloween:not(.tns--white):not(.tns--black){--tns-blue:#ff7518; --halo-light:#eadcf6; --halo-dark:rgba(186,120,255,.24)}
.s-halloween .tns__word i:nth-child(n+4){animation:hw-flicker 2.8s ease-in-out infinite; animation-delay:calc(var(--i) * -.41s)}
@keyframes hw-flicker{0%,100%{opacity:1;text-shadow:0 0 .06em rgba(255,140,0,.55)}9%{opacity:.78}13%{opacity:1}48%{text-shadow:0 0 .2em rgba(255,140,0,.9)}52%{opacity:.84}57%{opacity:1}}
.hw-spider{position:absolute; left:484em; top:66em; width:0; height:0}
.hw-thread{position:absolute; left:-1.4em; top:0; width:2.8em; height:120em; background:var(--tns-ink); opacity:.55; transform-origin:top; animation:hw-thread 3.4s ease-in-out infinite}
.hw-body{position:absolute; left:-36em; top:104em; width:72em; height:62em; color:var(--tns-ink); animation:hw-bob 3.4s ease-in-out infinite}
@keyframes hw-thread{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@keyframes hw-bob{0%,100%{transform:translateY(-66em)}50%{transform:translateY(0) rotate(4deg)}}
.tns--white.s-halloween .tns__word i:nth-child(n+4),.tns--black.s-halloween .tns__word i:nth-child(n+4){animation-name:hw-flicker-m}
@keyframes hw-flicker-m{0%,100%{opacity:1}9%{opacity:.78}13%{opacity:1}52%{opacity:.84}57%{opacity:1}}
/* Bonfire Night — the ring becomes a sparkler being written round */
.tns.s-bonfire:not(.tns--white):not(.tns--black){--tns-blue:#ff8a00; --halo-light:#fff1d6; --halo-dark:rgba(255,190,80,.16)}
.s-bonfire:not(.tns--white):not(.tns--black) .tns__ring{border-color:rgba(255,160,40,.25)}
.s-bonfire .tns__ping{opacity:1;
-webkit-mask-image:conic-gradient(from 0deg,transparent 0 190deg,rgba(0,0,0,.3) 290deg,#000 357deg,transparent 360deg);
mask-image:conic-gradient(from 0deg,transparent 0 190deg,rgba(0,0,0,.3) 290deg,#000 357deg,transparent 360deg);
animation:tns-rotate 2.4s linear infinite}
.bf-orbit{position:absolute; inset:0; animation:tns-rotate 2.4s linear infinite}
.bf-head{position:absolute; left:254.6em; top:12em; width:0; height:0}
.bf-head i{left:-7em; top:-7em; width:14em; height:14em; border-radius:50%; background:#fffbe6; box-shadow:0 0 22em 9em rgba(255,196,60,.6)}
.bf-head b{left:-3em; top:-3em; width:6em; height:6em; border-radius:50%; background:#ffd34d;
box-shadow:38em -22em 0 -.5em #ffd34d,-30em -36em 0 -1em #ffe08a,8em -52em 0 -1em #fff,48em 14em 0 -1.5em #ffb020,-46em 6em 0 -.5em #ffd34d,22em 40em 0 -1.5em #ffe08a,-16em 46em 0 -1em #ffc23d;
animation:bf-twinkle .5s steps(2) infinite}
@keyframes bf-twinkle{50%{transform:rotate(40deg) scale(.8)}}
.s-bonfire:not(.tns--white):not(.tns--black) .tns__ping{border-color:#ffc23d}
/* Remembrance — still, monochrome, one poppy on the ring */
.tns.s-remembrance:not(.tns--white):not(.tns--black){--tns-blue:var(--tns-ink); --halo-light:#ececec; --halo-dark:rgba(255,255,255,.12)}
.rm-poppy{left:-46em; top:calc(-242.6em - 46em); width:92em; height:92em; transform:rotate(-38deg)}
/* Movember — a moustache under the wordmark that twitches now and then */
.mo-tache{position:absolute; left:262em; top:384em; width:226em; height:68em; color:var(--tns-ink); transform-origin:50% 30%; animation:mo-twitch 4s ease-in-out infinite}
@keyframes mo-twitch{0%,62%,100%{transform:none}66%{transform:rotate(-4deg) scaleX(1.04)}70%{transform:rotate(3deg)}74%{transform:rotate(-2deg)}78%{transform:none}}
/* Christmas — wreath ring with fairy lights, hat on the T, snow inside the ring */
.tns.s-xmas:not(.tns--white):not(.tns--black){--tns-blue:#d42a2a; --halo-light:#e3f1e6; --halo-dark:rgba(90,200,130,.16)}
.s-xmas .tns__ring{--ring-mask:repeating-conic-gradient(#000 0 3deg,rgba(0,0,0,.7) 3deg 6deg)}
.xm-light > b{left:-12em; top:calc(-242.6em - 12em); width:24em; height:24em; border-radius:50%; background:var(--c,#e01b24); box-shadow:0 0 10em 2em color-mix(in srgb,var(--c,#e01b24) 55%,transparent); animation:xm-glow 1.8s ease-in-out infinite; animation-delay:var(--dl,0s)}
@keyframes xm-glow{50%{opacity:.45; box-shadow:none}}
.s-xmas .tns__word i:first-child{position:relative}
.s-xmas .tns__word i:first-child::before{content:""; position:absolute; left:-.02em; top:-.1em; width:.62em; height:.44em; transform:rotate(-14deg);
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Cpath d='M10 64C22 30 52 6 86 10c18 2 26 16 24 30-10-10-22-12-30-6-10 10-14 22-16 30Z' fill='%23d42a2a'/%3E%3Crect x='2' y='56' width='80' height='20' rx='10' fill='%23f4f4f4'/%3E%3Ccircle cx='110' cy='44' r='10' fill='%23f4f4f4'/%3E%3C/svg%3E") no-repeat center/contain}
.xm-snow{position:absolute; left:119.92em; top:34.9em; width:509.2em; height:509.2em; border-radius:50%; overflow:hidden}
.xm-snow i{position:absolute; top:-20em; left:var(--x); width:var(--s); height:var(--s); border-radius:50%; background:var(--flake); animation:xm-fall var(--d) linear infinite; animation-delay:var(--dl)}
@keyframes xm-fall{to{transform:translate(24em,560em)}}
.s-xmas:not(.tns--white):not(.tns--black) .tns__ring{border-color:#1e7b3c}
/* New Year — the ring fills to midnight, fireworks, the digits flip over */
.tns.s-newyear:not(.tns--white):not(.tns--black){--tns-blue:#c99a12; --halo-light:#f5eed8; --halo-dark:rgba(240,200,90,.16)}
.s-newyear .tns__ring{--ring-mask:conic-gradient(#000 var(--sweep),rgba(0,0,0,.16) 0); animation:ny-sweep 6s cubic-bezier(.45,0,.9,.6) infinite}
@keyframes ny-sweep{0%{--sweep:250deg}45%,100%{--sweep:360deg}}
.s-newyear .tns__word{perspective:calc(900 * var(--u))}
.s-newyear .tns__word i:nth-child(n+4){animation:ny-flip 6s cubic-bezier(.4,0,.2,1) infinite; animation-delay:calc((var(--i) - 3) * 110ms)}
@keyframes ny-flip{0%,45%{transform:rotateX(0)}58%,100%{transform:rotateX(-360deg)}}
.ny-burst{position:absolute; width:0; height:0; animation:ny-burst 6s ease-out infinite; animation-delay:var(--dl,0s)}
.ny-burst::before{content:""; position:absolute; left:-5em; top:-5em; width:10em; height:10em; border-radius:50%; background:var(--c1);
box-shadow:70em 0 0 var(--c1),60.6em 35em 0 var(--c2),35em 60.6em 0 var(--c1),0 70em 0 var(--c2),-35em 60.6em 0 var(--c1),-60.6em 35em 0 var(--c2),-70em 0 0 var(--c1),-60.6em -35em 0 var(--c2),-35em -60.6em 0 var(--c1),0 -70em 0 var(--c2),35em -60.6em 0 var(--c1),60.6em -35em 0 var(--c2)}
@keyframes ny-burst{0%,44%{transform:scale(0); opacity:0}47%{transform:scale(.25); opacity:1}68%{transform:scale(1); opacity:1}86%,100%{transform:scale(1.1); opacity:0}}
/* Valentine's — heartbeat ring, hearts drift off the top */
.tns.s-valentine:not(.tns--white):not(.tns--black){--tns-blue:#e11d48; --halo-light:#ffe0e8; --halo-dark:rgba(255,90,130,.2)}
.s-valentine .tns__rings{animation:vl-beat 1.5s ease-in-out infinite}
.s-valentine .tns__ping{animation:tns-ping 1.5s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes vl-beat{0%,40%,100%{transform:none}8%{transform:scale(1.05)}16%{transform:none}24%{transform:scale(1.035)}}
.vl-heart{position:absolute; top:70em; width:34em; height:31em; color:#e11d48; opacity:0; animation:vl-rise 4.5s ease-out infinite; animation-delay:var(--dl)}
@keyframes vl-rise{0%{opacity:0; transform:translateY(0) scale(.6)}15%{opacity:.9}100%{opacity:0; transform:translate(var(--dx),-120em) scale(1)}}
/* Easter — the ring goes egg-shaped and rocks */
.tns.s-easter:not(.tns--white):not(.tns--black){--tns-blue:#8b5cf6; --halo-light:#ffe8a3; --halo-dark:rgba(255,220,120,.22)}
.s-easter .tns__ring,.s-easter .tns__halo,.s-easter .tns__ping{border-radius:50% 50% 50% 50% / 58% 58% 42% 42%}
.s-easter:not(.tns--white):not(.tns--black) .tns__ring{border-color:#3fb79c}
.s-easter .tns__rings{transform-origin:50% 92%; animation:es-rock 3.2s ease-in-out infinite}
@keyframes es-rock{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
/* Pride — the ring becomes the rainbow and turns slowly */
.s-pride:not(.tns--white):not(.tns--black) .tns__ring{border-color:transparent; background:conic-gradient(#e40303,#ff8c00,#ffed00,#008026,#24408e,#732982,#e40303) border-box;
--ring-mask:radial-gradient(farthest-side,transparent calc(100% - 24.5em),#000 calc(100% - 24em)); animation:tns-rotate 14s linear infinite}
.s-pride.tns--white .tns__ring,.s-pride.tns--black .tns__ring{animation:none}
/* Football — red ring, a ball rolls round and passes behind the letters */
.tns.s-football:not(.tns--white):not(.tns--black){--tns-blue:#cf142b; --halo-light:#f1f1f1}
.fb-orbit{position:absolute; inset:0; animation:tns-rotate 3.6s linear infinite}
.fb-ball{position:absolute; left:224.6em; top:-18em; width:60em; height:60em; border-radius:50%; border:3.5em solid #111;
background:radial-gradient(circle,#111 0 9em,transparent 9.6em),conic-gradient(from 18deg,#fff 0 36deg,#e8e8e8 36deg 72deg,#fff 72deg 108deg,#e8e8e8 108deg 144deg,#fff 144deg 180deg,#e8e8e8 180deg 216deg,#fff 216deg 252deg,#e8e8e8 252deg 288deg,#fff 288deg 324deg,#e8e8e8 324deg); animation:tns-rotate 1.2s linear infinite}
/* Frost — icy ring, icicles under the logo with a drip; doubles as a severe-weather mode */
.tns.s-frost:not(.tns--white):not(.tns--black){--tns-blue:#2aa8e0; --halo-light:#e2f4fd; --halo-dark:rgba(140,210,255,.2)}
.s-frost:not(.tns--white):not(.tns--black) .tns__word{text-shadow:0 0 .1em rgba(120,200,255,.55)}
.fr-ice > b{left:-10em; top:calc(-252em - var(--h)); width:20em; height:var(--h); clip-path:polygon(0 100%,100% 100%,55% 0); background:linear-gradient(to top,#d7f0ff,#7cc8f2)}
.fr-drop{left:-4em; top:calc(-252em - 80em); width:8em; height:11em; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; background:#7cc8f2; animation:fr-drip 3s ease-in infinite}
@keyframes fr-drip{0%,40%{opacity:0; transform:none}48%{opacity:1}100%{opacity:0; transform:translateY(-70em)}}
/* Day clock — everyday: the ring shows how far through the 24 hours we are, right now */
.s-clock .tns__ring{border-color:var(--tns-track,#d3ecff)}
.s-clock:not(.tns--reversed):not(.tns--white):not(.tns--black){--tns-track:#d6edff}
.s-clock .tns__ping{opacity:1; -webkit-mask-image:conic-gradient(#000 var(--day,0deg),transparent 0); mask-image:conic-gradient(#000 var(--day,0deg),transparent 0)}
.ck-pin{--a:var(--day,0deg)}
.ck-pin > b{left:-17em; top:calc(-242.6em - 17em); width:34em; height:34em; border-radius:50%; background:var(--tns-blue); box-shadow:0 0 0 7em color-mix(in srgb,var(--tns-blue) 25%,transparent); animation:ck-breathe 2.4s ease-in-out infinite}
@keyframes ck-breathe{50%{box-shadow:0 0 0 14em color-mix(in srgb,var(--tns-blue) 10%,transparent)}}
.tns.s-clock.night:not(.tns--white):not(.tns--black){--tns-blue:#6d63ff}
/* Milestone — confetti off the ring, digits flip */
.ms-confetti{position:absolute; left:374.5em; top:289.5em; width:0; height:0}
.ms-confetti i{position:absolute; left:-7em; top:-12em; width:14em; height:24em; border-radius:3em; background:var(--c); opacity:0; animation:ms-pop 3.8s cubic-bezier(.2,.7,.4,1) infinite; animation-delay:var(--dl)}
@keyframes ms-pop{0%{opacity:0; transform:none}6%{opacity:1}38%{opacity:1; transform:translate(var(--x),var(--y)) rotate(var(--r))}100%{opacity:0; transform:translate(calc(var(--x) * 1.25),calc(var(--y) + 300em)) rotate(calc(var(--r) * 3))}}
/* Motion: play once by default (data-tns logos); loop on request; spin/loader/clock always loop */
.tns[data-tns] *,.tns[data-tns] *::before,.tns[data-tns] *::after{animation-iteration-count:1 !important}
.tns[data-tns-motion="loop"] *,.tns[data-tns-motion="loop"] *::before,.tns[data-tns-motion="loop"] *::after,
.tns[data-tns].tns--spin *,.tns[data-tns].s-loader *,.tns[data-tns].s-clock *,.tns[data-tns].s-clock *::before{animation-iteration-count:infinite !important}
/* Halo + ink per ground. Mono variants (white/black) own their colours. */
.tns--themed:not(.tns--white):not(.tns--black){--tns-halo:var(--halo-light,#f0efef); --flake:#9fcdf0}
.tns--themed.tns--reversed:not(.tns--white):not(.tns--black){--tns-halo:var(--halo-dark,rgba(255,255,255,.14)); --flake:#fff}
.tns--themed.tns--white{--flake:#fff}
.tns--themed.tns--black{--flake:#9fcdf0}
/* Small renders (<80px, set by JS): drop fiddly decoration */
.tns--small .xm-snow,.tns--small .ny-burst,.tns--small .vl-heart,.tns--small .ms-confetti,.tns--small .fr-drop,.tns--small .bf-head b{display:none}
@media (prefers-reduced-motion: reduce){
.tns *,.tns *::before,.tns *::after{animation:none !important}
.xm-snow,.ny-burst,.vl-heart,.ms-confetti,.fr-drop,.bf-head b{display:none}