/* Live events on the terminal rail (fable-news.js): row pulses, the "below" bar, the bell and its settings, and the Live
   tab's cards (a fable waiting in line shows its #N, then the flame once it burns). Loaded by terminal-sidebar.js with the script. Desktop sizes are written for the
   html zoom of .75, like terminal-sidebar.css (the mockups' 13.5px -> 18px); phones and tablets (no zoom) use the
   mockups' own sizes. Fire is the one loud colour (thesis fired); whales are --up/--down, launches and highs bronze,
   yours the polished bronze with a YOU tag. The four alerts of 30 Sep: a fast move and a deployer trade wear --up/--down
   (the row's data-ev is buy or sell), heating up orange Afterburner jets (data-ev=heat), a pot milestone the ember (data-ev=pot: fire's
   orange without its flicker, its embers or its glow, so a burn stays the one loud row). A fast move SURGES its row
   (owner's pick, 30 Sep, option A of the alert mockups): a strong green or red wash under a border glow that pulses three
   times, the move itself larger than the coin's name. The three of 30 Sep evening (owner's picks): a rich wallet glows Ethereum blue (1 Oct; gold before)
   and a top-10 buy bronze on the icon line (data-ev=rich, top); fully out is the big line, a surge in green to gold with a
   little confetti (data-surge=out).
   With reduced motion nothing slides, sweeps, flickers, pulses or rises. */
.tsb-shell{--nw-fire:linear-gradient(180deg,#fff4d6 0%,#ffd36b 26%,#ff8a2a 60%,#e5412b 100%);--nw-fire-h:linear-gradient(90deg,#fff4d6 0%,#ffd36b 22%,#ff8a2a 62%,#e5412b 100%);--nw-gold:#ffe08a}
:root[data-theme="light"] .tsb-shell{--nw-fire-h:linear-gradient(90deg,#c2410c 0%,#b91c1c 100%);--nw-gold:#a16207}
.tsb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---- a lit row (A): the colour of its event on the edge, a glow from the icon, the second line swapped for a headline */
.tsb-row{--nw-glow:transparent;--nw-ring:transparent;--nw-ringc:transparent;--nw-edge:transparent}
.tsb-row[data-ev=fire]{--nw-glow:rgba(255,140,50,.24);--nw-ring:rgba(255,138,42,.32);--nw-ringc:#ff9a3c;--nw-edge:var(--nw-fire)}
.tsb-row[data-ev=posted]{--nw-glow:color-mix(in srgb,var(--brand) 7%,transparent);--nw-ring:color-mix(in srgb,var(--brand) 18%,transparent);--nw-ringc:color-mix(in srgb,var(--brand) 55%,transparent);--nw-edge:repeating-linear-gradient(180deg,var(--brand) 0 5px,transparent 5px 9px)}
.tsb-row[data-ev=buy]{--nw-glow:color-mix(in srgb,var(--up) 15%,transparent);--nw-ring:color-mix(in srgb,var(--up) 26%,transparent);--nw-ringc:var(--up);--nw-edge:var(--up)}
.tsb-row[data-ev=sell]{--nw-glow:color-mix(in srgb,var(--down) 15%,transparent);--nw-ring:color-mix(in srgb,var(--down) 26%,transparent);--nw-ringc:var(--down);--nw-edge:var(--down)}
.tsb-row[data-ev=ath]{--nw-glow:color-mix(in srgb,var(--brand-hi) 12%,transparent);--nw-ring:color-mix(in srgb,var(--brand-hi) 24%,transparent);--nw-ringc:var(--brand-hi);--nw-edge:var(--brand-hi)}
.tsb-row[data-ev=launch]{--nw-glow:color-mix(in srgb,var(--brand) 16%,transparent);--nw-ring:color-mix(in srgb,var(--brand) 30%,transparent);--nw-ringc:var(--brand);--nw-edge:var(--brand-outline)}
.tsb-row[data-ev=heat]{--nw-glow:#ff4e1429;--nw-ring:#ff722c88;--nw-ringc:#ff8534;--nw-edge:#ff8534}
.tsb-row[data-ev=breakout]{--nw-glow:#9970ed33;--nw-ring:#b99aff88;--nw-ringc:#bb9bff;--nw-edge:#bb9bff}
.tsb-row[data-ev=pot]{--nw-glow:rgba(255,140,50,.13);--nw-ring:rgba(255,138,42,.22);--nw-ringc:#e0782c;--nw-edge:linear-gradient(180deg,#ffd36b 0%,#ff8a2a 55%,#c2410c 100%)}
.tsb-row[data-ev^=mine]{--nw-glow:color-mix(in srgb,var(--brand) 20%,transparent);--nw-ring:color-mix(in srgb,var(--brand) 44%,transparent);--nw-ringc:var(--brand-hi);--nw-edge:var(--brand-outline)}
/* the three of 30 Sep in their own looks (owner's picks, 30 Sep evening): a whale wallet (a 50+ ETH portfolio) glows gold, a top-10 buy bronze
   (both the icon line), fully out green to gold (its row surges: the big line below) */
/* a whale wallet glows Ethereum blue (owner, 1 Oct; gold before) */
.tsb-row[data-ev=rich]{--nw-glow:rgba(98,126,234,.24);--nw-ring:rgba(98,126,234,.5);--nw-ringc:#8fa6ff;--nw-edge:linear-gradient(180deg,#e8edff,#8fa6ff 42%,#4a63c9)}
.tsb-row[data-ev=out]{--nw-glow:color-mix(in srgb,var(--up) 15%,transparent);--nw-ring:color-mix(in srgb,var(--up) 32%,transparent);--nw-ringc:var(--up);--nw-edge:linear-gradient(180deg,var(--up) 0%,#ffe08a 100%)}
.tsb-row[data-ev=top]{--nw-glow:color-mix(in srgb,var(--brand) 18%,transparent);--nw-ring:color-mix(in srgb,var(--brand) 38%,transparent);--nw-ringc:var(--brand-hi);--nw-edge:var(--brand-outline)}
.tsb-row[data-lit=true] .tsb-cell{background:radial-gradient(85% 170% at 0% 50%,var(--nw-glow),transparent 72%),var(--panel);box-shadow:inset 0 0 0 1px var(--nw-ring)}
.tsb-edge{position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--nw-edge);opacity:0;transition:opacity .3s,top .35s,bottom .35s;pointer-events:none;z-index:1}
.tsb-row[data-lit=true] .tsb-edge{opacity:1;top:8px;bottom:8px}
.tsb-row[data-lit=true][data-ev=fire] .tsb-edge{box-shadow:0 0 12px rgba(255,138,42,.8);animation:nw-flicker 1.7s ease-in-out infinite}
@keyframes nw-flicker{0%,100%{filter:brightness(1)}35%{filter:brightness(1.35)}60%{filter:brightness(.9)}}
.tsb-avatar{transition:box-shadow .4s}
.tsb-row[data-lit=true] .tsb-avatar{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--nw-ringc)}
.tsb-row[data-lit=true][data-ev=fire] .tsb-avatar{box-shadow:0 0 0 2px var(--panel),0 0 0 4px #ff9a3c,0 0 20px 3px rgba(255,120,40,.55)}
.tsb-row[data-lit=true][data-ev=posted] .tsb-avatar{box-shadow:none}
/* the headline covers the watch star while a row is lit (as in the mockup), except a star the keyboard is on: hiding a
   focused button would drop the focus to the page */
.tsb-row[data-lit=true] .tsb-watch:not(:focus-visible){visibility:hidden}
/* one soft pass of light as a row lights up */
.tsb-cell::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 30%,rgba(255,244,214,.10) 50%,transparent 70%);transform:translateX(-100%)}
.tsb-row[data-fresh=true] .tsb-cell::after{animation:nw-sweep 1.1s ease-out 1}
@keyframes nw-sweep{0%{opacity:1;transform:translateX(-100%)}100%{opacity:0;transform:translateX(100%)}}
/* embers rising off a burning coin's icon */
.tsb-emb{position:absolute;left:12px;top:calc(50% - 14px);width:48px;height:34px;pointer-events:none}
.tsb-emb i{position:absolute;bottom:0;width:4px;height:4px;border-radius:50%;background:#ffd36b;box-shadow:0 0 5px #ff8a2a;opacity:0}
.tsb-emb i:nth-child(1){left:8px}.tsb-emb i:nth-child(2){left:22px;width:3px;height:3px}.tsb-emb i:nth-child(3){left:36px}
.tsb-row[data-lit=true][data-ev=fire] .tsb-emb i{animation:nw-rise 1.9s ease-out infinite}
.tsb-row[data-lit=true][data-ev=fire] .tsb-emb i:nth-child(2){animation-delay:.6s}.tsb-row[data-lit=true][data-ev=fire] .tsb-emb i:nth-child(3){animation-delay:1.2s}
@keyframes nw-rise{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:0;transform:translate(5px,-44px)}}
/* the second line: the market cap and the change fade, the headline takes their place (the price above never moves) */
.tsb-sub,.tsb-change{transition:opacity .35s,transform .5s cubic-bezier(.2,.8,.2,1)}
/* a lit row keeps its price and today's change on the right; only the MC line on the left gives way to the event, in a
   smaller font (owner, 29 Sep) */
.tsb-row[data-lit=true] .tsb-sub{opacity:0;transform:translateY(-6px)}
.tsb-ev{position:absolute;left:74px;right:max(124px,calc(var(--tsb-chw,0px) + 44px));bottom:calc(50% - 22px);height:20px;display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .5s cubic-bezier(.2,.8,.2,1);pointer-events:none;white-space:nowrap}
.tsb-row[data-lit=true] .tsb-ev{opacity:1;transform:none}
/* the words take only their own width, so the amount follows them (owner, 30 Sep: "why is the 1.55 ETH so far away from
   'bought'"); a long line still clips its words before the amount */
.tsb-evt{flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:5px;overflow:hidden;font:500 12.5px/20px var(--sans);color:var(--ink-2)}
.tsb-evt>*{flex:none}
.tsb-tx{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tsb-ic{font-size:15px;width:20px;text-align:center}
.tsb-q{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-style:italic;color:var(--ink);quotes:'“' '”'}
.tsb-who{display:inline-flex;align-items:center;gap:5px;min-width:0;font-weight:650;color:var(--ink)}.tsb-who>span{overflow:hidden;text-overflow:ellipsis}
.tsb-who img{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:none}
.tsb-who.mono{font:500 14px/20px var(--mono);color:var(--ink-2)}
.tsb-tag,.tsb-you{padding:3px 6px 2px;border-radius:5px;font:850 11.5px/1 var(--sans);letter-spacing:.08em}
.tsb-tag{background:linear-gradient(90deg,#ffe08a,#ff9a3c 60%,#f06a2e);color:#2a0f04;box-shadow:inset 0 1px 0 rgba(255,244,214,.7)}
.tsb-tag-fable{display:inline-block;padding:0;background:none;box-shadow:none;font:700 12.5px/20px var(--sans);letter-spacing:0;text-transform:none;color:#f4efe8}
.tsb-you{background:var(--brand-sheen-sm);color:var(--brand-ink);box-shadow:var(--brand-bevel)}
/* the four alerts: the icon or the DB/DS tag in the event's colour, a fast move's and a milestone's words too */
.tsb-ic.up,.tsb-tx.up{color:var(--up)}.tsb-ic.dn,.tsb-tx.dn{color:var(--down)}.tsb-tx.up,.tsb-tx.dn{font-weight:700;font-variant-numeric:tabular-nums}
.tsb-ic.up,.tsb-ic.dn{font-size:11px}
.tsb-ic.heat{color:var(--brand)}
.tsb-ic.ember{color:#ff9a3c}.tsb-tx.ember{color:#ffb35c;font-weight:650}
:root[data-theme="light"] .tsb-ic.ember,:root[data-theme="light"] .tsb-tx.ember{color:#c2410c}
/* a whale wallet's portfolio in gold ("🐳 @bub (105 ETH) sold", owner 30 Sep late), a top holder's rank in bold ink
   ("Top-3 holder"); their icons are the emoji themselves (🐳; 🥇 🥈 🥉 for the top three, 🏅 for 4th to 10th) */
/* its ETH: white on a blue chip with the ETH logo */
.tsb-tx.nweth{display:inline-flex;align-items:center;gap:3px;padding:0 6px 0 3px;border-radius:999px;color:#fff;font-weight:700;background:rgba(98,126,234,.2);border:1px solid rgba(143,166,255,.55);box-shadow:0 0 7px rgba(98,126,234,.45);text-shadow:0 0 4px rgba(98,126,234,.6)}.tsb-tx.nweth::before{content:'';flex:none;width:1em;height:1em;background:url(/img/pairs/eth.svg) center/contain no-repeat}.tsb-tx.nwink{color:var(--ink);font-weight:700}
/* a person's name gives way last (owner, 1 Oct: "you can see everything but their username. it just says @"): on a line
   that runs short the seal and the X logo go first (.tsb-marks, below), then the words beside the name, and only then the name,
   never under ~10 letters (--nl, its own length when shorter: fable-news.js whoChip). Shrinking goes by weight × width, so
   the chip's tiny weight makes the rest give way first; the name's 2px of slack keeps the sliver it still gives from
   cutting a whole name to "…" */
.tsb-evt>.tsb-who{flex:0 .0001 auto;min-width:auto}
.tsb-who>span{flex:0 1 auto;min-width:calc(min(var(--nl,10),10) * 1ch);padding-right:2px;margin-right:-2px}
/* the marks leave whole, never cut in half: a line that would cut any of its words drops them (data-bare, measured once
   per new line: fable-news.js fitMarks) */
.tsb-marks{flex:none;display:inline-flex;align-items:center;gap:5px}.tsb-evt[data-bare] .tsb-marks{display:none}
/* a whale wallet and a top-10 buy while lit (owner's pick B, 1 Oct): two lines in the row's own height. The coin's name
   (and its pool badges) slide up; line 1 is who (the icon, the face, the name and its marks, their size or rank), line 2
   what they did and the amount, under the face; the change stays on the right. As the row settles it all slides back */
.tsb-row[data-two] .tsb-ev{bottom:5px;height:38px;flex-direction:column;align-items:flex-start;justify-content:center;gap:0}
.tsb-row[data-two] .tsb-ev>.tsb-evt{flex:none;max-width:100%;line-height:19px}
.tsb-l2{padding-left:25px;gap:6px}
.tsb-row[data-lit=true][data-two] .tsb-symbol,.tsb-row[data-lit=true][data-two] .fmr-stack{transform:translateY(-10px)}
.tsb-tag.up,.tsb-tag.dn{letter-spacing:.02em}
.tsb-tag.up{color:var(--up);background:color-mix(in srgb,var(--up) 16%,var(--bg));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--up) 45%,transparent)}
.tsb-tag.dn{color:var(--down);background:color-mix(in srgb,var(--down) 16%,var(--bg));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--down) 45%,transparent)}
.tsb-n{flex:none;font:700 12.5px/20px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.tsb-n.fire{background:var(--nw-fire-h);-webkit-background-clip:text;background-clip:text;color:transparent}
.tsb-n.up{color:var(--up)}.tsb-n.dn{color:var(--down)}.tsb-n.br{color:var(--brand-text-solid)}.tsb-n.hi{color:var(--brand-hi)}.tsb-n.mu{color:var(--muted);font-weight:500}
:root[data-theme="light"] .tsb-n.hi{color:var(--brand)}

/* ---- a fast move: the SURGE row (owner's pick, 30 Sep, option A of the alert mockups: the old 12.5px line was too
   small to catch a trader's eye). fable-news.js sets data-surge=up|down on the row while it is lit and through its 0.6 s
   fade back (data-surge without data-lit). The wash and its border sit in .tsb-surge, a layer on the row under the cell
   (z-index -1 in the row's stacking context), so the glow reaches past the cell; the row rises over its neighbours.
   The wash fades in over 0.2 s and its border glow pulses 3 x 0.7 s; the second line becomes "▲ +31% in 12s", the move
   in 27px (the coin's name is 18.5px), the seconds lighter, rising over 0.38 s as the number pops 0.72 -> 1.07 -> 1 (and pops again each time the move grows).
   The price and today's change stay on the right; the market cap gives way. Nothing on the line can end in "…". */
.tsb-row[data-surge=up]{--surge:var(--up);--surge-w:31%}
.tsb-row[data-surge=down]{--surge:var(--down);--surge-w:26%}
.tsb-row[data-surge]{z-index:2}
.tsb-surge{position:absolute;left:6px;right:6px;top:0;bottom:1px;z-index:-1;border-radius:10px;pointer-events:none;opacity:0}
.tsb-row[data-surge] .tsb-surge{opacity:1;
  background:linear-gradient(90deg,color-mix(in srgb,var(--surge) var(--surge-w),var(--panel)) 0%,color-mix(in srgb,var(--surge) 15%,var(--panel)) 46%,color-mix(in srgb,var(--surge) 9%,var(--panel)) 100%);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--surge) 72%,transparent),0 0 22px -5px color-mix(in srgb,var(--surge) 62%,transparent)}
.tsb-row[data-surge][data-lit=true]:not([data-steady]) .tsb-surge{animation:nw-surge-in .2s ease-out both,nw-surge-pulse .7s ease-in-out .05s 3}
@keyframes nw-surge-in{from{opacity:0}}
@keyframes nw-surge-pulse{40%{box-shadow:inset 0 0 0 2.5px var(--surge),0 0 36px 3px color-mix(in srgb,var(--surge) 72%,transparent);filter:brightness(1.3)}}
/* the cell goes clear over the wash (on hover too); the edge widens and glows */
.tsb-row[data-surge] .tsb-cell,.tsb-row[data-surge]:hover .tsb-cell{background:transparent;box-shadow:none}
.tsb-row[data-surge] .tsb-edge{opacity:1;top:8px;bottom:8px;width:5px;background:var(--surge);box-shadow:0 0 14px 1px var(--surge);transition:none}
.tsb-row[data-surge][data-lit=true]:not([data-steady]) .tsb-edge{animation:nw-surge-in .2s ease-out both}
/* the line: the coin's name moves up 4.5px to make room, the market cap stays hidden until the surge is over */
.tsb-symbol{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.tsb-row[data-surge] .tsb-symbol{transform:translateY(-4.5px)}
.tsb-row[data-surge] .tsb-sub{opacity:0;transform:translateY(-6px)}
.tsb-row[data-surge] .tsb-ev{top:31px;bottom:auto;height:30px;opacity:1;transform:none;transition:none}
.tsb-row[data-surge][data-lit=true]:not([data-steady]) .tsb-ev{animation:nw-surge-rise .38s cubic-bezier(.2,.8,.2,1) both}
.tsb-row[data-surge] .tsb-evt{overflow:visible;gap:8px}
.tsb-row[data-surge] .tsb-ic{flex:none;width:16px;height:14px;font-size:0;background:currentColor;clip-path:polygon(50% 0,100% 100%,0 100%)}
.tsb-row[data-surge=down] .tsb-ic{clip-path:polygon(0 0,100% 0,50% 100%)}
.tsb-row[data-surge] .tsb-tx{flex:none;overflow:visible;text-overflow:clip}
.tsb-row[data-surge] .tsb-tx.up,.tsb-row[data-surge] .tsb-tx.dn{font:830 27px/30px var(--sans);letter-spacing:-.025em;text-shadow:0 0 18px color-mix(in srgb,var(--surge) 45%,transparent);transform-origin:0 60%}
/* the number pops when the surge begins and again only when the move grows while lit (fable-news.js adds .pop then,
   and takes it off once played); the entrance above plays once: after the pulse the row is data-steady, so a re-rank that
   moves the row replays nothing (owner, 30 Sep: a bounce that means nothing goes; "keep the bounce going if the number
   keeps going up") */
.tsb-row[data-surge][data-lit=true] .tsb-tx.pop{animation:nw-surge-num .5s cubic-bezier(.2,.9,.3,1.25) both}
.tsb-row[data-surge] .tsb-tx.secs{font:650 19.5px/30px var(--sans);color:color-mix(in srgb,var(--surge) 68%,var(--ink))}
.tsb-row[data-surge] .tsb-n{display:none}
@keyframes nw-surge-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes nw-surge-num{0%{transform:scale(.72)}55%{transform:scale(1.07)}100%{transform:none}}
/* the fade back: the pulse is over (no data-lit) and the row keeps its surge for the 0.6 s it takes to fade */
.tsb-row[data-surge]:not([data-lit]) .tsb-surge,.tsb-row[data-surge]:not([data-lit]) .tsb-edge,.tsb-row[data-surge]:not([data-lit]) .tsb-ev{animation:nw-surge-out .6s ease-in both}
@keyframes nw-surge-out{to{opacity:0}}
/* the move is never cut: where the rail is too narrow for it at full size (the narrowest desktop windows),
   fable-news.js steps the line down by measuring it against its own box (data-fit 1, then 2), at any page zoom */
.tsb-row[data-surge][data-fit="1"] .tsb-tx.up,.tsb-row[data-surge][data-fit="1"] .tsb-tx.dn{font-size:22px}.tsb-row[data-surge][data-fit="1"] .tsb-tx.secs{font-size:16px}.tsb-row[data-surge][data-fit="1"] .tsb-ic{width:13px;height:11px}
.tsb-row[data-surge][data-fit="2"] .tsb-tx.up,.tsb-row[data-surge][data-fit="2"] .tsb-tx.dn{font-size:19px}.tsb-row[data-surge][data-fit="2"] .tsb-tx.secs{font-size:14px}.tsb-row[data-surge][data-fit="2"] .tsb-ic{width:11px;height:9px}.tsb-row[data-surge][data-fit="2"] .tsb-evt{gap:6px}

/* ---- fully out: the BIG LINE (owner's pick C, 30 Sep evening: "Fully out! 🎉 @dinosaurr", surge-sized, with a little
   confetti). fable-news.js lights it as a surge (data-surge=out), so it has the move's own entrance, pulse, pop, 0.6 s fade
   back, fitting steps and stillness under reduced motion; only its colours and words are its own: a green to gold wash with
   nine dots of confetti in it and eleven pieces over it (the pieces drift in once, over 0.9 s, as the row lights), a green
   to gold edge, "Fully out!" as large as a move in cream, the party popper, the name lighter. Its sells stay off the line. */
.tsb-row[data-surge=out]{--surge:var(--up);--surge-w:22%}
.tsb-row[data-surge=out] .tsb-surge{background:radial-gradient(circle at 7% 22%,#ffe08a 0 1.6px,transparent 2.2px),radial-gradient(circle at 16% 78%,#f8d49a 0 1.4px,transparent 2px),radial-gradient(circle at 27% 14%,#b7f7cf 0 1.5px,transparent 2.1px),radial-gradient(circle at 38% 84%,#ffce5c 0 1.3px,transparent 1.9px),radial-gradient(circle at 52% 18%,#fff4d6 0 1.2px,transparent 1.8px),radial-gradient(circle at 64% 80%,#ffe08a 0 1.5px,transparent 2.1px),radial-gradient(circle at 76% 16%,#b7f7cf 0 1.3px,transparent 1.9px),radial-gradient(circle at 88% 74%,#f8d49a 0 1.4px,transparent 2px),radial-gradient(circle at 95% 28%,#ffce5c 0 1.2px,transparent 1.8px),
  linear-gradient(90deg,color-mix(in srgb,var(--up) 26%,var(--panel)) 0%,color-mix(in srgb,#ffce5c 15%,var(--panel)) 55%,color-mix(in srgb,#ffce5c 8%,var(--panel)) 100%);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#ffe08a 62%,transparent),0 0 22px -5px color-mix(in srgb,var(--up) 55%,transparent)}
.tsb-row[data-surge=out] .tsb-edge{background:linear-gradient(180deg,var(--up),#ffe08a)}
.tsb-row[data-surge=out] .tsb-tx{font:650 19.5px/30px var(--sans);color:color-mix(in srgb,var(--up) 60%,var(--ink))}
.tsb-row[data-surge=out] .tsb-tx.nwparty{font:830 27px/30px var(--sans);letter-spacing:-.025em;color:#fff4d6;text-shadow:0 0 16px rgba(255,224,138,.55);transform-origin:0 60%}
.tsb-row[data-surge=out] .tsb-emo{flex:none;font-size:22px;line-height:30px}
.tsb-row[data-surge=out][data-fit="1"] .tsb-tx.nwparty{font-size:22px}.tsb-row[data-surge=out][data-fit="1"] .tsb-tx{font-size:16px}.tsb-row[data-surge=out][data-fit="1"] .tsb-emo{font-size:18px}
.tsb-row[data-surge=out][data-fit="2"] .tsb-tx.nwparty{font-size:19px}.tsb-row[data-surge=out][data-fit="2"] .tsb-tx{font-size:14px}.tsb-row[data-surge=out][data-fit="2"] .tsb-emo{font-size:15px}
.tsb-confetti{position:absolute;inset:0;display:none;overflow:hidden;border-radius:inherit;pointer-events:none}
.tsb-row[data-surge=out] .tsb-confetti{display:block}
.tsb-confetti i{position:absolute;width:9px;height:3.5px;border-radius:1px;opacity:.95;transform:rotate(var(--r))}
.tsb-confetti i:nth-child(1){left:3%;top:14%;--r:25deg;background:#ffe08a}.tsb-confetti i:nth-child(2){left:9%;top:80%;--r:-35deg;background:#b7f7cf}.tsb-confetti i:nth-child(3){left:15%;top:10%;--r:65deg;background:#f8d49a}
.tsb-confetti i:nth-child(4){left:19%;top:86%;--r:12deg;background:#4ade80}.tsb-confetti i:nth-child(5){left:24%;top:18%;--r:-20deg;background:#fff4d6}.tsb-confetti i:nth-child(6){left:31%;top:82%;--r:48deg;background:#ffce5c}
.tsb-confetti i:nth-child(7){left:37%;top:12%;--r:80deg;background:#ffe08a}.tsb-confetti i:nth-child(8){left:44%;top:84%;--r:-50deg;background:#b7f7cf}.tsb-confetti i:nth-child(9){left:50%;top:16%;--r:30deg;background:#f8d49a}
.tsb-confetti i:nth-child(10){left:56%;top:78%;--r:-15deg;background:#4ade80}.tsb-confetti i:nth-child(11){left:60%;top:22%;--r:55deg;background:#fff4d6}
.tsb-row[data-surge=out][data-lit=true]:not([data-steady]) .tsb-confetti i{animation:nw-confetti .9s cubic-bezier(.2,.8,.3,1) both}
@keyframes nw-confetti{from{opacity:0;transform:translateY(-10px) rotate(calc(var(--r) - 40deg))}}

/* ---- the "2 below" bar: coins in your list with news outside the viewport */
.tsb-below{flex:none;display:flex;align-items:center;gap:9px;height:50px;padding:0 13px 0 15px;border-top:1px solid var(--line);background:var(--panel);font:15px var(--sans);color:var(--muted);white-space:nowrap;overflow:hidden}
.tsb-below b{color:var(--ink-2);font-weight:650}.tsb-bl-arw{font-size:13px;color:var(--ink-2)}
.tsb-bl-pill{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:4px 10px;border-radius:999px;border:1px solid var(--line-2);background:var(--panel-2);font:650 14px/1.2 var(--sans);color:var(--ink-2);cursor:pointer}
.tsb-bl-pill span{overflow:hidden;text-overflow:ellipsis;max-width:9em}
.tsb-bl-pill i{width:8px;height:8px;border-radius:50%;background:var(--nw-dc,var(--brand));flex:none}
.tsb-bl-pill[data-t=fire]{border-color:rgba(255,138,42,.45);background:linear-gradient(90deg,rgba(255,138,42,.16),var(--panel-2))}.tsb-bl-pill[data-t=fire] i{--nw-dc:#ff8a2a}
.tsb-bl-pill[data-t=buy],.tsb-bl-pill[data-t=mineup]{border-color:color-mix(in srgb,var(--up) 40%,transparent)}.tsb-bl-pill[data-t=buy] i,.tsb-bl-pill[data-t=mineup] i{--nw-dc:var(--up)}
.tsb-bl-pill[data-t=sell],.tsb-bl-pill[data-t=minedown]{border-color:color-mix(in srgb,var(--down) 40%,transparent)}.tsb-bl-pill[data-t=sell] i,.tsb-bl-pill[data-t=minedown] i{--nw-dc:var(--down)}
.tsb-bl-pill[data-t=pot]{border-color:rgba(255,138,42,.4)}.tsb-bl-pill[data-t=pot] i{--nw-dc:#ff8a2a}
.tsb-bl-pill[data-t=rich]{border-color:rgba(143,166,255,.5)}.tsb-bl-pill[data-t=rich] i{--nw-dc:#8fa6ff}.tsb-bl-pill[data-t=out]{border-color:color-mix(in srgb,var(--up) 40%,transparent)}.tsb-bl-pill[data-t=out] i{--nw-dc:var(--up)}
.tsb-bl-pill:hover{color:var(--ink)}
.tsb-bl-more{font:700 13px var(--mono);color:var(--muted)}
.tsb-bl-go{margin-left:auto;padding:4px 2px;border:0;color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font:650 14.5px var(--sans);cursor:pointer}.tsb-bl-go:hover{text-decoration:underline}
.tsb-bl-pill:focus-visible,.tsb-bl-go:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

/* ---- the bell (status line) and the settings popover */
.tsb-bell,.fnw-sliders{position:relative;display:grid;place-items:center;flex:none;width:36px;height:31px;padding:0;border:1px solid var(--line);border-radius:5px;background:none;color:var(--ink-2);cursor:pointer}
.tsb-bell svg,.fnw-sliders svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tsb-bell .slash{display:none}
.tsb-bell::after{content:'';position:absolute;top:-4px;right:-4px;width:8px;height:8px;border-radius:50%;background:var(--brand-outline);box-shadow:0 0 0 2px var(--bg)}
.tsb-bell[aria-expanded=true],.fnw-sliders[aria-expanded=true],.tsb-bell[aria-expanded=true]:hover,.fnw-sliders[aria-expanded=true]:hover{background:var(--brand-sheen-sm);color:var(--brand-ink);box-shadow:var(--brand-bevel);border-color:transparent}
.tsb-bell:hover,.fnw-sliders:hover{color:var(--ink);border-color:var(--line-2)}
.tsb-bell[data-off=true]{color:var(--dim)}.tsb-bell[data-off=true]::after{display:none}.tsb-bell[data-off=true] .slash{display:inline}
.tsb-bell:focus-visible,.fnw-sliders:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.tsb-pop{position:absolute;top:calc(100% + 8px);right:10px;z-index:30;width:min(430px,calc(100% - 20px));max-height:min(720px,calc(100 * var(--vh,1vh) - 260px));overflow:auto;overscroll-behavior:contain;padding:18px;border:1px solid var(--line-2);border-radius:14px;background:var(--panel);box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.3);color:var(--ink-2);font:15px/1.35 var(--sans);text-align:left;white-space:normal}
.tsb-pop:focus{outline:none}
.tsb-pop-h{display:flex;align-items:center;gap:12px}
.tsb-pop-h b{display:block;font:800 19px/1.2 var(--sans);color:var(--ink)}
.tsb-pop-h small{display:block;margin-top:3px;font:14px/1.35 var(--sans);color:var(--muted)}
.tsb-tg{position:relative;flex:none;width:46px;height:27px;margin-left:auto;padding:0;border:0;border-radius:14px;background:var(--line-2);cursor:pointer}
.tsb-tg::after{content:'';position:absolute;top:4px;left:4px;width:19px;height:19px;border-radius:50%;background:var(--ink-2);transition:left .2s}
.tsb-tg[aria-checked=true]{background:var(--brand-outline);box-shadow:var(--brand-bevel)}
.tsb-tg[aria-checked=true]::after{left:23px;background:var(--brand-mark)}
.tsb-tg:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.tsb-pop-s{margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.tsb-lb{margin-bottom:9px;font:700 12.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.tsb-lb2{margin-top:12px}
.tsb-ckl{display:grid;gap:3px}
.tsb-ck{display:flex;align-items:center;gap:11px;padding:5px 2px;font:16px/1.25 var(--sans);color:var(--ink-2);cursor:pointer;user-select:none}
.tsb-ck input{appearance:none;-webkit-appearance:none;flex:none;display:grid;place-items:center;width:20px;height:20px;margin:0;border:1px solid var(--line-2);border-radius:5px;background:var(--bg);cursor:pointer}
.tsb-ck input:checked{background:var(--brand-outline);border-color:transparent}
.tsb-ck input:checked::after{content:'✓';font:900 13px/1 var(--sans);color:var(--brand-mark)}
.tsb-ck input:disabled{cursor:default;opacity:.8}.tsb-ck:has(input:disabled){cursor:default}
.tsb-ck input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.tsb-ck small{margin-left:auto;font:13.5px var(--sans);color:var(--muted)}
.tsb-seg{display:flex;padding:3px;border:1px solid var(--line);border-radius:9px;background:var(--bg)}
.tsb-seg button{flex:1;padding:7px 0;border:1px solid transparent;border-radius:6px;background:none;color:var(--muted);font:600 14.5px var(--sans);cursor:pointer;white-space:nowrap}
.tsb-seg button[aria-pressed=true],.tsb-seg button[aria-pressed=true]:hover{background:var(--brand-sheen-sm);color:var(--brand-ink);box-shadow:var(--brand-bevel);border-color:transparent;font-weight:700}
.tsb-seg button:hover{color:var(--ink)}.tsb-seg button:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.tsb-pop-f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.tsb-off{padding:0;border:0;background:none;color:var(--down);font:650 15px var(--sans);cursor:pointer}.tsb-off:hover{text-decoration:underline}
.tsb-pop-f span{font:13.5px var(--sans);color:var(--muted)}

/* ---- the Live tab (B) */
.fnw-status{position:relative;z-index:3;flex:none;display:flex;align-items:center;gap:9px;padding:2px 14px 11px;font:15px/1.3 var(--sans);color:var(--muted)}
.fnw-state{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fnw-state::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 7px color-mix(in srgb,var(--up) 70%,transparent)}
.fnw-state[data-held=true]{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.fnw-state[data-held=true]::before{background:var(--brand-outline);box-shadow:none}
.fnw-rate{margin-left:auto;font:500 13.5px/1 var(--mono);color:var(--dim);white-space:nowrap}
.fnw-pause{display:grid;place-items:center;min-width:34px;height:31px;padding:0 7px;border:1px solid var(--line);border-radius:5px;background:none;color:var(--muted);font:15px/1 var(--mono);cursor:pointer}
.fnw-pause[aria-pressed=true]{background:var(--brand-sheen-sm);color:var(--brand-ink);box-shadow:var(--brand-bevel);border-color:transparent}.fnw-pause:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fnw-filters{flex:none;display:flex;gap:3px;padding:0 11px 12px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}.fnw-filters::-webkit-scrollbar{display:none}
.fnw-filters button{flex:1 1 auto;padding:8px 7px;border:1px solid transparent;border-radius:5px;background:none;color:var(--muted);font:600 15.5px/1.2 var(--sans);white-space:nowrap;cursor:pointer}
.fnw-filters button[aria-pressed=true],.fnw-filters button[aria-pressed=true]:hover{background:var(--brand-sheen-sm);color:var(--brand-ink);box-shadow:var(--brand-bevel);border-color:transparent;font-weight:700}
.fnw-filters button:hover{color:var(--ink)}.fnw-filters button:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.fnw-here{position:relative;flex:none;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;margin:12px 10px 6px;padding:10px 12px 10px 14px;border:1px solid transparent;border-radius:11px;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--brand-outline) border-box;color:var(--ink-2);text-align:left;cursor:pointer}
.fnw-here::before{content:'';position:absolute;left:-1px;top:11px;bottom:11px;width:4px;border-radius:0 4px 4px 0;background:var(--brand-outline)}
.fnw-here[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--brand-shade)}
.fnw-here:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fnw-here .fnw-coin{width:38px;height:38px}
.fnw-here-t{display:flex;flex-direction:column;min-width:0}
.fnw-here-t b{font:700 15px/20px var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnw-here-t span{font:500 14px/19px var(--sans);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnw-here-go{font:650 13.5px/1 var(--sans);color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap}
.fnw-wrap{position:relative;flex:1;min-height:0}
.fnw-stream{height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:4px 0 8px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.fnw-stream:focus{outline:none}
.fnw-list{list-style:none;margin:0;padding:0}
.fnw-empty{margin:0;padding:40px 22px;text-align:center;font:15px/1.6 var(--sans);color:var(--muted)}
.fnw-new{position:absolute;left:50%;top:10px;z-index:4;padding:8px 15px;border:0;border-radius:999px;background:var(--brand-sheen-sm);color:var(--brand-ink);font:700 15px/1 var(--sans);box-shadow:var(--brand-bevel),0 10px 26px -8px rgba(0,0,0,.8);transform:translateX(-50%);cursor:pointer;white-space:nowrap}
.fnw-new:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* a card: the coin first, a badge for the kind, the event, the time */
.fnw-card{position:relative;display:grid;grid-template-rows:1fr;margin:0 9px 2px;--nw-cardbg:var(--bg)}
.fnw-card>.fnw-in{min-height:0;overflow:hidden}
.fnw-card::after{content:'';position:absolute;left:14px;right:14px;bottom:-2px;height:1px;background:color-mix(in srgb,var(--line) 70%,transparent)}
.fnw-in{position:relative;display:grid;grid-template-columns:50px minmax(0,1fr) auto;column-gap:13px;align-items:start;padding:11px 12px;border-radius:12px;transition:background-color .15s}
.fnw-in:hover{background-color:var(--panel)}
.fnw-ico{position:relative;width:50px;height:50px}
.fnw-coin{display:block;width:100%;height:100%;border-radius:50%;border:1px solid var(--line-2);object-fit:cover;background:var(--panel)}
.fnw-kb{position:absolute;right:-6px;bottom:-5px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;border:2.5px solid var(--nw-cardbg);background:var(--panel-2);color:var(--ink-2);font:800 12px/1 var(--sans)}
.fnw-kb[data-k=fire]{background:radial-gradient(circle at 50% 70%,#3d1b09,#1a0d06);box-shadow:0 0 10px rgba(255,120,40,.55);font-size:13px}
.fnw-kb[data-k=up]{background:color-mix(in srgb,var(--up) 18%,var(--bg));color:var(--up)}
.fnw-kb[data-k=down]{background:color-mix(in srgb,var(--down) 18%,var(--bg));color:var(--down)}
.fnw-kb[data-k=ath]{background:color-mix(in srgb,var(--nw-gold) 18%,var(--bg));color:var(--nw-gold)}
.fnw-kb[data-k=heat]{background:color-mix(in srgb,var(--brand) 18%,var(--bg));color:var(--brand);font-size:14px}
.fnw-kb[data-k=pot]{background:radial-gradient(circle at 50% 70%,#3d1b09,#1a0d06);color:#ff9a3c}
/* the three of 30 Sep, in their rows' colours: the money bag on gold, the party popper on green to gold, the medal on bronze */
.fnw-kb[data-k=rich]{background:color-mix(in srgb,#627eea 24%,var(--bg));box-shadow:0 0 9px rgba(98,126,234,.5);font-size:13px}
.fnw-kb[data-k=out]{background:radial-gradient(circle at 50% 30%,color-mix(in srgb,#ffe08a 24%,var(--bg)),color-mix(in srgb,var(--up) 18%,var(--bg)));font-size:13px}
.fnw-kb[data-k=top]{background:color-mix(in srgb,var(--brand) 22%,var(--bg));font-size:13px}
/* the deployer's DB / DS, as on the chart: two letters in the badge */
.fnw-kb[data-w]{font-size:9.5px;letter-spacing:-.02em}
.fnw-kb[data-k=mine]{background:var(--brand-sheen-sm);color:var(--brand-ink);box-shadow:var(--brand-bevel)}
.fnw-body{display:flex;flex-direction:column;min-width:0}
.fnw-main{display:flex;align-items:center;gap:8px;min-width:0;height:25px;font:600 17.5px/25px var(--sans);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.fnw-main::after{content:'';position:absolute;inset:0;border-radius:12px}
.fnw-main:focus-visible{outline:none}.fnw-main:focus-visible::after{outline:2px solid var(--brand);outline-offset:-2px}
.fnw-sym{flex:none;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.fnw-sym::after{content:'·';margin-left:8px;color:var(--dim);font-weight:400}
.fnw-lab{min-width:0;overflow:hidden;text-overflow:ellipsis}
.fnw-lab.t-up{color:var(--up)}.fnw-lab.t-down{color:var(--down)}.fnw-lab.t-ath{color:var(--nw-gold)}.fnw-lab.t-heat{color:var(--brand);font-weight:700}
.fnw-lab.t-pot{background-image:var(--nw-fire-h);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.fnw-lab.t-rich,.fnw-s.t-rich{color:#a9bbff;font-weight:700}.fnw-s.t-rich{flex:none}.fnw-lab.t-out{color:#fff4d6;font-weight:750}.fnw-lab.t-top{color:var(--brand-hi);font-weight:700}
.fnw-lab.t-fire{background-image:var(--nw-fire-h);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:750}
.fnw-lab.t-mine{background-image:var(--brand-sheen-text,none);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
:root[data-theme="light"] .fnw-lab.t-mine{background:none;color:var(--brand)}
.fnw-you{flex:none;padding:3px 6px 2px;border-radius:5px;background:var(--brand-sheen-sm);color:var(--brand-ink);font:750 11.5px/1.2 var(--mono);letter-spacing:.08em;box-shadow:var(--brand-bevel)}
.fnw-l2{display:flex;flex-wrap:wrap;align-items:center;gap:2px 7px;min-width:0;margin-top:3px;font:400 15.5px/22px var(--sans);color:var(--muted)}
.fnw-s{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fnw-s.t-up{color:var(--up);font-weight:600}.fnw-s.t-down{color:var(--down);font-weight:600}
.fnw-s.fire-txt{flex:none;background-image:var(--nw-fire-h);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:750}
.fnw-who{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;padding:0;border:0;background:none;color:var(--ink-2);font:500 15.5px/22px var(--sans);cursor:pointer}
span.fnw-who{cursor:default}
button.fnw-who:hover .fnw-name{color:var(--ink);text-decoration:underline}
button.fnw-who:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-radius:4px}
.fnw-who img{width:21px;height:21px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.fnw-name{font-weight:600;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}
.fnw-handle{color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.fnw-pw{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;color:var(--ink-2);font:500 15.5px/22px var(--sans);white-space:nowrap}
.fnw-pw>.fnw-who{flex:0 1 auto}.fnw-pw>.fnw-handle{min-width:0;white-space:nowrap}.fnw-handle.is-go{cursor:pointer}
.fnw-pw .fnw-x{--fx-size:10px}
.fnw-who.mono .fnw-name{font:500 14.5px/22px var(--mono)}
.fnw-stack{display:flex;flex:none}
.fnw-av{display:inline-grid;width:21px;height:21px;margin-left:-6px;border-radius:50%;overflow:hidden;background:var(--panel-2);box-shadow:0 0 0 2px var(--nw-cardbg)}.fnw-av:first-child{margin-left:0}
.fnw-av img{width:100%;height:100%;object-fit:cover}.fnw-av.wal{border-radius:5px;background:conic-gradient(from 45deg,var(--line-2) 0 25%,var(--panel-2) 0 50%,var(--line-2) 0 75%,var(--panel-2) 0)}
/* the whole fable, however long (owner, 29 Sep): the card grows to fit it */
.fnw-q{display:block;white-space:pre-wrap;overflow-wrap:anywhere;margin:9px 0 2px;padding-left:11px;border-left:2px solid #ff9a32;font:italic 400 16px/1.45 var(--sans);color:var(--ink-2);quotes:'“' '”'}
.fnw-time{font:500 13px/25px var(--mono);color:var(--dim);white-space:nowrap;text-align:right;min-width:32px}
/* variants: the coin you're on (bronze edge), yours (bronze ring), a thesis fired (the one loud card) */
.fnw-card.is-here{--nw-cardbg:color-mix(in srgb,var(--brand) 9%,var(--bg))}
.fnw-card.is-here .fnw-in{background-color:color-mix(in srgb,var(--brand) 9%,var(--bg))}
.fnw-card.is-here::before{content:'';position:absolute;left:0;top:12px;bottom:12px;z-index:1;width:4px;border-radius:0 4px 4px 0;background:var(--brand-outline)}
.fnw-card.is-mine .fnw-in{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 40%,transparent)}
.fnw-card.is-fire{--nw-cardbg:color-mix(in srgb,#ff8a32 8%,var(--panel))}
.fnw-card.is-fire .fnw-in{background:radial-gradient(130% 115% at 0% 0%,rgba(255,140,50,.21) 0%,rgba(255,110,40,.07) 44%,rgba(255,110,40,0) 72%),var(--panel);box-shadow:inset 0 0 0 1px rgba(255,150,70,.25),0 10px 26px -16px rgba(255,110,30,.6)}
.fnw-card.is-fire::after,.fnw-card.is-mine::after,.fnw-card.is-here::after{display:none}
.fnw-card.fresh .fnw-in{animation:nw-fresh 2.6s ease-out}
.fnw-card.is-fire.fresh .fnw-in{animation:nw-firein 2.6s ease-out}
/* a fable waiting in line (design C): a big bronze #N where the coin icon sits, "in line" under it, then the ticker ·
   the author and the whole fable; its own burn turns the number into the flame with the amount burned in fire orange
   (the flip itself is a short animation from fable-news.js, none with reduced motion) */
.fnw-line{display:flex;flex-direction:column;align-items:center;justify-content:center;width:50px;min-height:50px;text-align:center;white-space:nowrap}
.fnw-line-n{font:800 23px/1 var(--mono);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fnw-line-s{margin-top:5px;font:600 11px/1 var(--mono);letter-spacing:.04em;color:var(--muted)}
.fnw-line[data-state=fire] .fnw-line-n{font-size:26px;letter-spacing:0;filter:drop-shadow(0 0 8px rgba(255,120,40,.55))}
.fnw-line[data-state=fire] .fnw-line-s{font-weight:750;letter-spacing:0;color:#ff8a2a}
:root[data-theme="light"] .fnw-line[data-state=fire] .fnw-line-s{color:#c2410c}
.fnw-head{display:flex;align-items:center;gap:8px;min-width:0;height:25px}
.fnw-head .fnw-main{flex:none}
@keyframes nw-fresh{0%{background-color:color-mix(in srgb,var(--brand) 20%,transparent)}100%{background-color:transparent}}
@keyframes nw-firein{0%{box-shadow:inset 0 0 0 1px rgba(255,190,90,.8),0 0 30px -4px rgba(255,120,30,.75)}100%{box-shadow:inset 0 0 0 1px rgba(255,150,70,.25),0 10px 26px -16px rgba(255,110,30,.6)}}

/* ---- phones and tablets: the mockups' own sizes */
@media(max-width:1099px){
  .tsb-ev{left:54px;right:max(84px,calc(var(--tsb-chw,0px) + 40px));bottom:calc(50% - 16.5px);height:15px;gap:6px}
  .tsb-evt{font-size:10.5px;line-height:15px;gap:3px}.tsb-ic{font-size:11px;width:14px}.tsb-n{font-size:10.5px;line-height:15px}
  .tsb-who img{width:15px;height:15px}.tsb-who.mono{font-size:11px}.tsb-marks{gap:3px}
  .tsb-row[data-two] .tsb-ev{bottom:5px;height:28px}.tsb-row[data-two] .tsb-ev>.tsb-evt{line-height:14px}.tsb-l2{padding-left:17px;gap:4px}
  .tsb-row[data-lit=true][data-two] .tsb-symbol,.tsb-row[data-lit=true][data-two] .fmr-stack{transform:translateY(-8px)}.tsb-tag,.tsb-you{font-size:9px;padding:2px 4px 1px}
  .tsb-edge{top:11px;bottom:11px;width:3px}.tsb-row[data-lit=true] .tsb-edge{top:6px;bottom:6px}
  .tsb-row[data-lit=true] .tsb-avatar{box-shadow:0 0 0 2px var(--panel),0 0 0 3.5px var(--nw-ringc)}
  .tsb-emb{left:8px;top:calc(50% - 10px);width:36px;height:26px}
  .tsb-surge{left:4px;right:4px;border-radius:8px}.tsb-row[data-surge] .tsb-edge{top:6px;bottom:6px;width:4px}
  .tsb-row[data-surge] .tsb-symbol{transform:translateY(-3.5px)}.tsb-row[data-surge] .tsb-ev{top:24px;height:22px}
  .tsb-row[data-surge] .tsb-evt{gap:6px}.tsb-row[data-surge] .tsb-ic{width:12px;height:10px}
  .tsb-row[data-surge] .tsb-tx.up,.tsb-row[data-surge] .tsb-tx.dn{font-size:20px;line-height:22px}.tsb-row[data-surge] .tsb-tx.secs{font-size:14.5px;line-height:22px}
  .tsb-row[data-surge][data-fit="1"] .tsb-tx.up,.tsb-row[data-surge][data-fit="1"] .tsb-tx.dn{font-size:17px}.tsb-row[data-surge][data-fit="1"] .tsb-tx.secs{font-size:12.5px}
  .tsb-row[data-surge][data-fit="2"] .tsb-tx.up,.tsb-row[data-surge][data-fit="2"] .tsb-tx.dn{font-size:15px}.tsb-row[data-surge][data-fit="2"] .tsb-tx.secs{font-size:11px}
  .tsb-row[data-surge=out] .tsb-tx{font-size:14.5px;line-height:22px}.tsb-row[data-surge=out] .tsb-tx.nwparty{font-size:20px;line-height:22px}.tsb-row[data-surge=out] .tsb-emo{font-size:16px;line-height:22px}
  .tsb-row[data-surge=out][data-fit="1"] .tsb-tx.nwparty{font-size:17px}.tsb-row[data-surge=out][data-fit="1"] .tsb-tx{font-size:12.5px}.tsb-row[data-surge=out][data-fit="1"] .tsb-emo{font-size:14px}
  .tsb-row[data-surge=out][data-fit="2"] .tsb-tx.nwparty{font-size:15px}.tsb-row[data-surge=out][data-fit="2"] .tsb-tx{font-size:11px}.tsb-row[data-surge=out][data-fit="2"] .tsb-emo{font-size:12px}
  .tsb-confetti i{width:7px;height:3px}.fnw-kb[data-k=rich],.fnw-kb[data-k=out],.fnw-kb[data-k=top]{font-size:10px}
  .tsb-below{height:40px;font-size:12.5px;gap:7px}.tsb-bl-pill{font-size:11.5px;padding:3px 8px}.tsb-bl-go{font-size:12px}
  .tsb-bell{width:30px;height:26px}.tsb-bell svg,.fnw-sliders svg{width:15px;height:15px}.fnw-sliders{width:30px;height:26px}
  .tsb-pop{padding:14px;font-size:13px;max-height:min(520px,60vh)}.tsb-pop-h b{font-size:15px}.tsb-pop-h small{font-size:12px}.tsb-ck{font-size:13px}.tsb-ck input{width:16px;height:16px}.tsb-ck small{font-size:11px}.tsb-lb{font-size:10.5px}.tsb-seg button{font-size:12px;padding:5px 0}.tsb-off{font-size:12.5px}.tsb-pop-f span{font-size:12px}.tsb-tg{width:36px;height:21px}.tsb-tg::after{top:3px;left:3px;width:15px;height:15px}.tsb-tg[aria-checked=true]::after{left:18px}
  .fnw-status{font-size:12px;padding:2px 12px 9px}.fnw-rate{font-size:11px}.fnw-pause{min-width:26px;height:24px;font-size:12px}
  .fnw-filters{padding:0 10px 10px}.fnw-filters button{font-size:12.5px;padding:6px}
  .fnw-here{grid-template-columns:30px minmax(0,1fr) auto;gap:10px;margin:10px 8px 6px;padding:8px 10px 8px 12px}.fnw-here .fnw-coin{width:30px;height:30px}.fnw-here-t b{font-size:12px;line-height:15px}.fnw-here-t span{font-size:11.5px;line-height:15px}.fnw-here-go{font-size:11px}
  .fnw-card{margin:0 8px 2px}.fnw-in{grid-template-columns:38px minmax(0,1fr) auto;column-gap:11px;padding:9px 10px}.fnw-ico{width:38px;height:38px}.fnw-kb{width:19px;height:19px;border-width:2px;font-size:10px}.fnw-kb[data-k=heat]{font-size:11px}.fnw-kb[data-w]{font-size:7.5px}.tsb-ic.up,.tsb-ic.dn{font-size:9px}
  .fnw-main{height:20px;font-size:14px;line-height:20px;gap:7px}.fnw-l2,.fnw-who,.fnw-pw{font-size:12.5px;line-height:18px}.fnw-who img,.fnw-av{width:17px;height:17px}.fnw-who.mono .fnw-name{font-size:11.5px}.fnw-you{font-size:9px}
  .fnw-line{width:38px;min-height:38px}.fnw-line-n{font-size:18px}.fnw-line[data-state=fire] .fnw-line-n{font-size:20px}.fnw-line-s{font-size:9px;margin-top:4px}.fnw-head{height:20px;gap:7px}
  .fnw-q{font-size:13px;margin-top:7px}.fnw-time{font-size:10.5px;line-height:20px}.fnw-new{font-size:12px;padding:6px 12px}.fnw-empty{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .tsb-edge,.tsb-avatar,.tsb-sub,.tsb-change,.tsb-ev,.tsb-tg::after,.fnw-in{transition:none}
  .tsb-ev,.tsb-row[data-lit=true] .tsb-sub{transform:none}
  .tsb-row[data-lit=true][data-ev=fire] .tsb-edge,.tsb-row[data-fresh=true] .tsb-cell::after,.fnw-card.fresh .fnw-in{animation:none}
  .tsb-emb{display:none}
  /* a surge stands still: the same wash, border, edge and line, no pulse, pop, rise or fade (fable-news.js lets it go at
     once when its pulse ends) */
  .tsb-symbol{transition:none}
  .tsb-row[data-surge][data-lit=true] .tsb-surge,.tsb-row[data-surge][data-lit=true] .tsb-edge,.tsb-row[data-surge][data-lit=true] .tsb-ev,.tsb-row[data-surge][data-lit=true]:not([data-steady]) .tsb-surge,.tsb-row[data-surge][data-lit=true]:not([data-steady]) .tsb-edge,.tsb-row[data-surge][data-lit=true]:not([data-steady]) .tsb-ev,.tsb-row[data-surge][data-lit=true] .tsb-tx.up,.tsb-row[data-surge][data-lit=true] .tsb-tx.dn,.tsb-row[data-surge][data-lit=true] .tsb-tx.pop,.tsb-row[data-surge]:not([data-lit]) .tsb-surge,.tsb-row[data-surge]:not([data-lit]) .tsb-edge,.tsb-row[data-surge]:not([data-lit]) .tsb-ev{animation:none}
  /* fully out's confetti lies still where it lands */
  .tsb-row[data-surge=out][data-lit=true]:not([data-steady]) .tsb-confetti i{animation:none}
}
/* a name never breaks across lines; the whole chip wraps to the next line instead */
.fnw-who{flex-wrap:nowrap}.fnw-who .fnw-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* a name after the person's face: on a rail row an X account's real @handle with the seal and the X logo (a mark: the row is
   a link), whatever username it chose (owner, 30 Sep night: "@ is only ever a real X handle"; fable-news.js railWho) */
.tsb-marks .tsb-seal{width:12px;height:12px;margin-left:-2px}.tsb-marks .tsb-x{--fx-size:9px;margin-left:-3px}.tsb-who .tsb-at{color:var(--muted);font-weight:400}
/* fully out's big line: the seal and the X logo after the @handle, sized to its words */
.tsb-row[data-surge=out] .tsb-marks{gap:8px}.tsb-row[data-surge=out] .tsb-marks .tsb-seal{width:17px;height:17px;margin-left:-4px}.tsb-row[data-surge=out] .tsb-marks .tsb-x{--fx-size:13px;margin-left:-4px}
.fnw-who .fnw-seal{width:12px;height:12px;margin-left:3px;flex:none}

/* Resistance watch: a bounded charge animation in the existing fixed-height rail row. */
.tsb-row[data-surge=breakout]{--surge:#ad82ff;--surge-w:24%}
.tsb-row[data-surge=breakout] .tsb-ev{left:74px;right:12px;top:29px;height:35px}
.tsb-row[data-surge=breakout] .tsb-evt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;white-space:normal}
.tsb-row[data-surge=breakout] .nwbreakout{max-width:100%;font:850 16px/18px var(--sans);letter-spacing:0;color:#eee5ff;text-shadow:0 0 12px #ad7eff99;white-space:nowrap}
.tsb-row[data-surge=breakout][data-fit="1"] .nwbreakout{font-size:14px}
.tsb-row[data-surge=breakout][data-fit="2"] .nwbreakout{font-size:12px}
.tsb-row[data-surge=breakout] .nwresistance{font:550 12px/14px var(--sans);color:#cfbde9}
.tsb-row[data-surge=breakout] .tsb-right{transform:translateY(-5px)}
.tsb-row[data-surge=breakout] .tsb-change{visibility:hidden}
.tsb-row[data-surge=breakout] .tsb-cell::after{background:linear-gradient(105deg,transparent 25%,#8c5bec22 40%,#e4d5ff77 50%,transparent 65%)}
.tsb-row[data-surge=breakout][data-lit=true]:not([data-steady]) .tsb-cell::after{animation:nw-sweep 1.6s ease-in-out 3}
.tsb-row[data-surge=breakout][data-lit=true]:not([data-steady]) .tsb-surge{animation:nw-surge-in .2s ease-out both,nw-surge-pulse 1.6s ease-in-out 3}
.fnw-kb[data-k=breakout]{background:#35244d;color:#dbc6ff;box-shadow:0 0 10px #aa7aff66}

/* Afterburner: bounded, composited flame jets behind stationary, readable text. */
.tsb-row[data-surge=heat]{--surge:#ff722c;--surge-w:25%}
.tsb-row[data-surge=heat] .tsb-surge{background:linear-gradient(90deg,#381006,#190906 60%,#100a07);box-shadow:inset 0 0 0 1px #ff722c,0 0 16px -5px #ff571a88}
.tsb-row[data-surge=heat][data-lit=true]:not([data-steady]) .tsb-surge{animation:nw-surge-in .2s ease-out both}
.tsb-row[data-surge=heat] .tsb-ev{top:28px;height:36px}
.tsb-row[data-surge=heat] .tsb-evt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;width:100%;white-space:nowrap}
.tsb-row[data-surge=heat] .nwheat{font:italic 850 18px/20px var(--sans);letter-spacing:0;color:#fff09a;text-shadow:0 1px 3px #160400,0 0 10px #ff6a2866}
.tsb-row[data-surge=heat] .nwheat-detail{font:550 11.5px/14px var(--sans);color:#f7d6be;text-shadow:0 1px 3px #160400}
.tsb-row[data-surge=heat][data-fit="1"] .nwheat{font-size:16px}
.tsb-row[data-surge=heat][data-fit="1"] .nwheat-detail{font-size:10.5px}
.tsb-row[data-surge=heat][data-fit="2"] .nwheat{font-size:14px}
.tsb-row[data-surge=heat][data-fit="2"] .nwheat-detail{font-size:9px}
.tsb-row[data-surge=heat][data-lit=true]:not([data-steady]) .tsb-ev,.tsb-row[data-surge=heat][data-lit=true] .tsb-tx.pop,.tsb-row[data-surge=heat][data-fresh=true] .tsb-cell::after{animation:none}
.tsb-afterburner{display:none;position:absolute;inset:1px;overflow:hidden;border-radius:inherit;pointer-events:none}
.tsb-row[data-surge=heat] .tsb-afterburner{display:block}
.tsb-afterburner i{position:absolute;left:-2%;top:var(--y);width:var(--reach);height:26%;opacity:0;transform-origin:0 50%;border-radius:0 80% 50% 0;background:linear-gradient(90deg,#fff2b8c9,#ff891880 27%,#ff360048 65%,transparent);clip-path:polygon(0 0,32% 12%,67% 32%,100% 50%,55% 68%,30% 100%,0 90%)}
.tsb-afterburner i:nth-child(1){--y:-6%;--reach:72%;--delay:0s}
.tsb-afterburner i:nth-child(2){--y:12%;--reach:58%;--delay:.12s}
.tsb-afterburner i:nth-child(3){--y:28%;--reach:83%;--delay:.06s}
.tsb-afterburner i:nth-child(4){--y:44%;--reach:65%;--delay:.18s}
.tsb-afterburner i:nth-child(5){--y:62%;--reach:78%;--delay:.09s}
.tsb-afterburner i:nth-child(6){--y:81%;--reach:62%;--delay:.21s}
.tsb-afterburner::before,.tsb-afterburner::after{content:'';position:absolute;left:0;top:16%;width:40%;height:1px;opacity:0;background:linear-gradient(90deg,transparent,#ffe6a6);transform:translateX(-100%)}
.tsb-afterburner::after{top:84%}
.tsb-row[data-surge=heat][data-lit=true] .tsb-afterburner i{animation:nw-afterburner 3.4s ease-out var(--delay) 1 both}
.tsb-row[data-surge=heat][data-lit=true] .tsb-afterburner::before{animation:nw-jet-streak 1.2s ease-out .1s 3 both}
.tsb-row[data-surge=heat][data-lit=true] .tsb-afterburner::after{animation:nw-jet-streak 1.1s ease-out .35s 3 both}
@keyframes nw-afterburner{0%{transform:scaleX(.06);opacity:.2}18%{transform:scaleX(.85);opacity:.75}32%{transform:scaleX(.65);opacity:.5}48%{transform:scaleX(1);opacity:.7}67%{transform:scaleX(.72);opacity:.5}86%{transform:scaleX(.25);opacity:.25}100%{transform:scaleX(.08);opacity:.12}}
@keyframes nw-jet-streak{0%{transform:translateX(-100%);opacity:0}15%{opacity:.65}100%{transform:translateX(260%);opacity:0}}
@media(max-width:1099px){
  .tsb-row[data-surge=heat] .tsb-ev{top:21px;height:28px}
  .tsb-row[data-surge=heat] .nwheat{font-size:14px;line-height:15px}
  .tsb-row[data-surge=heat] .nwheat-detail{font-size:10px;line-height:12px}
  .tsb-row[data-surge=heat][data-fit="1"] .nwheat{font-size:12px}
  .tsb-row[data-surge=heat][data-fit="1"] .nwheat-detail{font-size:9px}
  .tsb-row[data-surge=heat][data-fit="2"] .nwheat{font-size:11px}
  .tsb-row[data-surge=heat][data-fit="2"] .nwheat-detail{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  .tsb-row[data-surge=heat][data-lit=true]:not([data-steady]) .tsb-surge,
  .tsb-row[data-surge=heat][data-lit=true] .tsb-afterburner i,
  .tsb-row[data-surge=heat][data-lit=true] .tsb-afterburner::before,
  .tsb-row[data-surge=heat][data-lit=true] .tsb-afterburner::after{animation:none}
  .tsb-row[data-surge=heat] .tsb-afterburner i{opacity:.18;transform:scaleX(.4)}
}
.fnw-lab.t-breakout,.fnw-s.t-breakout{color:#cfb1ff}
.tsb-bl-pill[data-t=breakout]{border-color:#b28cf3}.tsb-bl-pill[data-t=breakout] i{--nw-dc:#b28cf3}
@media(max-width:1099px){
  .tsb-row[data-surge=breakout] .tsb-ev{left:58px;right:9px;top:23px;height:27px}
  .tsb-row[data-surge=breakout] .nwbreakout{font-size:12px;line-height:14px}
  .tsb-row[data-surge=breakout][data-fit="1"] .nwbreakout{font-size:11px}
  .tsb-row[data-surge=breakout][data-fit="2"] .nwbreakout{font-size:10px}
  .tsb-row[data-surge=breakout] .nwresistance{font-size:10px;line-height:12px}
}
@media(prefers-reduced-motion:reduce){
  .tsb-row[data-surge=breakout] .tsb-cell::after,.tsb-row[data-surge=breakout] .tsb-surge,
  .tsb-row[data-surge=breakout][data-lit=true]:not([data-steady]) .tsb-cell::after,
  .tsb-row[data-surge=breakout][data-lit=true]:not([data-steady]) .tsb-surge{animation:none}
}