/*fx:base*/
@property --tn-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --tn-p { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
.tn {
  --c: #7c5cff;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .45em;
  padding: .58em .95em; border-radius: 999px; border: 1px solid #1e2636;
  background: #0b0f18; color: #c9d3e6; cursor: pointer; text-decoration: none;
  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), color .25s, background .3s, border-color .3s, box-shadow .3s, border-radius .35s;
  -webkit-tap-highlight-color: transparent;
}
.tn:hover, .tn:focus-visible { color: #fff; text-decoration: none; }
.tn:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.tn .tn-l { position: relative; z-index: 2; display: inline-block; }
.tn.on { color: #07090f; background: var(--c); border-color: transparent; box-shadow: 0 0 22px -4px var(--c); }
.tn-fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.tn-fx-layer i { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform, opacity; }
/*end*/

/*fx:orbit*/
/* Hub: magnetic pull + three moons orbiting the pill */
.tn[data-fx=orbit] { border-color: color-mix(in srgb, var(--c) 55%, transparent); translate: var(--mx, 0) var(--my, 0); transition: translate .25s cubic-bezier(.2, .9, .3, 1.4), color .25s, background .3s, box-shadow .3s; }
.tn[data-fx=orbit] .tn-ring { position: absolute; inset: -55% -14%; pointer-events: none; transform: scaleY(.42); z-index: 3; }
.tn[data-fx=orbit] .tn-spin { position: absolute; inset: 0; animation: tn-rot 2.4s linear infinite paused; }
.tn[data-fx=orbit] .tn-spin i { position: absolute; left: 50%; top: 50%; width: 5px; height: 12px; margin: -6px 0 0 -2.5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); opacity: 0; transition: opacity .3s; }
.tn[data-fx=orbit] .tn-spin i:nth-child(1) { transform: rotate(0deg) translateX(var(--r, 60px)); }
.tn[data-fx=orbit] .tn-spin i:nth-child(2) { transform: rotate(120deg) translateX(var(--r, 60px)); background: #00e5ff; box-shadow: 0 0 8px #00e5ff; }
.tn[data-fx=orbit] .tn-spin i:nth-child(3) { transform: rotate(240deg) translateX(var(--r, 60px)); background: #ff4d8d; box-shadow: 0 0 8px #ff4d8d; }
.tn[data-fx=orbit]:is(:hover, :focus-visible) { box-shadow: 0 0 0 1px var(--c), 0 0 28px -6px var(--c); }
.tn[data-fx=orbit]:is(:hover, :focus-visible) .tn-spin { animation-play-state: running; }
.tn[data-fx=orbit]:is(:hover, :focus-visible) .tn-spin i { opacity: 1; }
@keyframes tn-rot { to { rotate: 360deg; } }
/*end*/

/*fx:jelly*/
/* Buttons: chunky 3D key that wobbles like jelly and squashes on press */
.tn[data-fx=jelly] { border-color: transparent; background: linear-gradient(#2a1630, #1a0f22); box-shadow: 0 .38em 0 color-mix(in srgb, var(--c) 55%, #000), 0 .38em 14px -4px var(--c); translate: 0 -.2em; }
.tn[data-fx=jelly]:is(:hover, :focus-visible) { color: #fff; animation: tn-jelly .75s both; }
.tn[data-fx=jelly]:active { translate: 0 .15em; box-shadow: 0 0 0 color-mix(in srgb, var(--c) 55%, #000), 0 0 8px -4px var(--c); animation: none; transform: scale(1.06, .9); }
.tn[data-fx=jelly].on { background: var(--c); color: #1a0010; }
@keyframes tn-jelly {
  0% { transform: scale(1, 1); } 30% { transform: scale(1.28, .74); } 42% { transform: scale(.78, 1.24); }
  55% { transform: scale(1.14, .86); } 68% { transform: scale(.94, 1.06); } 82% { transform: scale(1.03, .97); } 100% { transform: scale(1, 1); }
}
/*end*/

/*fx:flip*/
/* Approval Cards: the pill flips over like a card to show APPROVED (the inner card turns, so the hover area never moves) */
.tn[data-fx=flip] { padding: 0; background: transparent; border-color: transparent; perspective: 300px; }
.tn[data-fx=flip] .tn-card { position: relative; display: block; padding: .58em .95em; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, 1.5, .5, 1); }
.tn[data-fx=flip] .tn-card::before { content: ""; position: absolute; inset: 0; border-radius: 6px; background: #0b0f18; border: 1px solid #1e2636; border-left: 3px solid var(--c); backface-visibility: hidden; }
.tn[data-fx=flip] .tn-l { backface-visibility: hidden; }
.tn[data-fx=flip] .tn-back { position: absolute; top: 0; bottom: 0; left: 50%; min-width: 100%; padding: 0 .9em; translate: -50% 0; display: grid; place-items: center; border-radius: 6px; background: var(--c); color: #04210f; font-weight: 900; transform: rotateX(180deg); backface-visibility: hidden; white-space: nowrap; }
.tn[data-fx=flip]:is(:hover, :focus-visible) .tn-card { transform: rotateX(180deg); }
.tn[data-fx=flip].on { background: transparent; box-shadow: none; color: #04210f; }
.tn[data-fx=flip].on .tn-card::before { background: var(--c); border-color: var(--c); }
/*end*/

/*fx:drop*/
/* Dropdown Menus: letters fall out the bottom and drop back in from the top */
.tn[data-fx=drop] { overflow: hidden; border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.tn[data-fx=drop]::after { content: "▾"; color: var(--c); transition: rotate .4s cubic-bezier(.3, 1.6, .5, 1); }
.tn[data-fx=drop] .tn-ch { display: inline-block; white-space: pre; }
.tn[data-fx=drop]:is(:hover, :focus-visible) .tn-ch { animation: tn-drop .6s calc(var(--i) * 28ms) both; }
.tn[data-fx=drop]:is(:hover, :focus-visible)::after { rotate: 180deg; }
.tn[data-fx=drop]:is(:hover, :focus-visible) { box-shadow: 0 .7em 18px -8px var(--c); }
.tn[data-fx=drop].on::after { color: #2a1800; }
@keyframes tn-drop {
  0% { transform: none; } 38% { transform: translateY(160%); opacity: 0; } 39% { transform: translateY(-160%); opacity: 0; }
  75% { transform: translateY(12%); opacity: 1; } 100% { transform: none; opacity: 1; }
}
/*end*/

/*fx:island*/
/* Phone Menus: black capsule with a camera dot; buzzes and blooms like a dynamic island */
.tn[data-fx=island] { background: #000; border-color: #2b2b2b; color: #e5e7eb; padding-left: 1.7em; }
.tn[data-fx=island]::before { content: ""; position: absolute; left: .7em; top: 50%; width: .5em; height: .5em; margin-top: -.25em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4b5563, #0b0b0b 70%); box-shadow: 0 0 0 1px #222; transition: background .3s, box-shadow .3s; }
.tn[data-fx=island]::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: #000; z-index: -1; transform: scale(.3, .5); opacity: 0; transition: transform .55s cubic-bezier(.2, 1.6, .4, 1), opacity .2s; }
.tn[data-fx=island]:is(:hover, :focus-visible) { animation: tn-buzz .36s 2; box-shadow: 0 0 0 1px #3f3f46, 0 10px 24px -8px #000, 0 0 30px -10px #22c55e; }
.tn[data-fx=island]:is(:hover, :focus-visible)::after { transform: scale(1.18, 1.35); opacity: 1; }
.tn[data-fx=island]:is(:hover, :focus-visible)::before { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.tn[data-fx=island].on { background: #000; color: #fff; box-shadow: 0 0 0 2px #e5e7eb; }
@keyframes tn-buzz { 0%, 100% { transform: none; } 20% { transform: translateX(-2px) rotate(-2deg); } 40% { transform: translateX(2px) rotate(2deg); } 60% { transform: translateX(-2px) rotate(-1deg); } 80% { transform: translateX(1px) rotate(1deg); } }
/*end*/

/*fx:conic*/
/* Top Web Effects: spinning rainbow border with a blurred halo */
.tn[data-fx=conic] { border-color: transparent; background: #0b0f18 padding-box; }
.tn[data-fx=conic]::before, .tn[data-fx=conic]::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; z-index: -1;
  background: conic-gradient(from var(--tn-a), var(--c), #7c5cff, #ff2bd6, #f59e0b, var(--c));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: tn-spin-a 4s linear infinite;
}
.tn[data-fx=conic]::after { -webkit-mask: none; mask: none; padding: 0; inset: -3px; filter: blur(9px); opacity: 0; z-index: -2; transition: opacity .35s; }
.tn[data-fx=conic]:is(:hover, :focus-visible) { transform: scale(1.08); }
.tn[data-fx=conic]:is(:hover, :focus-visible)::before { animation-duration: .9s; padding: 2px; }
.tn[data-fx=conic]:is(:hover, :focus-visible)::after { opacity: .9; animation-duration: .9s; }
.tn[data-fx=conic].on { background: var(--c) padding-box; }
@keyframes tn-spin-a { to { --tn-a: 360deg; } }
/*end*/

/*fx:glitch*/
/* Next Effects: RGB-split glitch with sliced, jittering copies */
.tn[data-fx=glitch] { border-color: color-mix(in srgb, var(--c) 40%, transparent); text-shadow: 1px 0 rgba(255, 43, 214, .55), -1px 0 rgba(0, 229, 255, .55); }
.tn[data-fx=glitch] .tn-l::before, .tn[data-fx=glitch] .tn-l::after { content: attr(data-t); position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.tn[data-fx=glitch] .tn-l::before { color: #ff2bd6; }
.tn[data-fx=glitch] .tn-l::after { color: #00e5ff; }
.tn[data-fx=glitch]:is(:hover, :focus-visible) { animation: tn-jit .28s steps(2) infinite; background: #12051a; box-shadow: 0 0 20px -6px var(--c); }
.tn[data-fx=glitch]:is(:hover, :focus-visible) .tn-l::before { opacity: .9; animation: tn-sl1 .5s steps(3) infinite; }
.tn[data-fx=glitch]:is(:hover, :focus-visible) .tn-l::after { opacity: .9; animation: tn-sl2 .42s steps(3) infinite; }
.tn[data-fx=glitch].on { text-shadow: none; }
@keyframes tn-jit { 0% { transform: translate(0); } 25% { transform: translate(-1px, 1px) skewX(-6deg); } 50% { transform: translate(1px, -1px); } 75% { transform: translate(1px, 1px) skewX(4deg); } }
@keyframes tn-sl1 { 0% { clip-path: inset(0 0 65% 0); transform: translateX(-3px); } 50% { clip-path: inset(40% 0 20% 0); transform: translateX(3px); } 100% { clip-path: inset(75% 0 0 0); transform: translateX(-2px); } }
@keyframes tn-sl2 { 0% { clip-path: inset(55% 0 10% 0); transform: translateX(3px); } 50% { clip-path: inset(0 0 70% 0); transform: translateX(-3px); } 100% { clip-path: inset(30% 0 45% 0); transform: translateX(2px); } }
/*end*/

/*fx:peel*/
/* Page Effects: paper pill with a dog-ear that peels back to reveal color underneath */
.tn[data-fx=peel] { --s: .6em; overflow: hidden; border-radius: 4px; background: #e9edf3; color: #1e293b; border-color: #cbd5e1; transition: color .25s; }
.tn[data-fx=peel]::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(120deg, #7c5cff, #00e5ff); clip-path: polygon(100% calc(100% - var(--s)), 100% 100%, calc(100% - var(--s)) 100%); transition: clip-path .5s cubic-bezier(.3, 1.3, .5, 1); }
.tn[data-fx=peel]::after { content: ""; position: absolute; right: 0; bottom: 0; z-index: 3; width: var(--s); height: var(--s); background: linear-gradient(135deg, #fff 0%, #cbd5e1 44%, #64748b 50%, transparent 50%); filter: drop-shadow(-1px -1px 2px rgba(0, 0, 0, .35)); transition: width .5s cubic-bezier(.3, 1.3, .5, 1), height .5s cubic-bezier(.3, 1.3, .5, 1); }
.tn[data-fx=peel]:is(:hover, :focus-visible) { color: #fff; }
.tn[data-fx=peel]:is(:hover, :focus-visible)::before { clip-path: polygon(100% -250%, 100% 100%, -250% 100%); }
.tn[data-fx=peel]:is(:hover, :focus-visible)::after { width: 3.4em; height: 3.4em; }
.tn[data-fx=peel].on { background: #fff; color: #07090f; box-shadow: 0 0 0 2px var(--c); }
/*end*/

/*fx:dock*/
/* Taskbar & Nav: macOS-style launch bounce with a glowing running dot */
.tn[data-fx=dock] { border-color: color-mix(in srgb, var(--c) 40%, transparent); background: linear-gradient(#111a2b, #0b0f18); }
.tn[data-fx=dock]::after { content: ""; position: absolute; left: 50%; bottom: -.75em; width: .38em; height: .38em; margin-left: -.19em; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); opacity: .35; transition: opacity .3s, transform .3s; }
.tn[data-fx=dock]:is(:hover, :focus-visible) { animation: tn-bounce 1s cubic-bezier(.3, 0, .3, 1) 2; box-shadow: 0 14px 18px -12px var(--c); }
.tn[data-fx=dock]:is(:hover, :focus-visible)::after { opacity: 1; transform: scale(1.4); animation: tn-shadow 1s cubic-bezier(.3, 0, .3, 1) 2; }
@keyframes tn-bounce { 0%, 100% { transform: none; } 22% { transform: translateY(-.95em) scale(1.12); } 44% { transform: none; } 62% { transform: translateY(-.4em) scale(1.05); } 78% { transform: none; } }
@keyframes tn-shadow { 0%, 100% { translate: 0 0; } 22% { translate: 0 .95em; } 44% { translate: 0 0; } 62% { translate: 0 .4em; } 78% { translate: 0 0; } }
/*end*/

/*fx:holo*/
/* Fresh 2026: holographic foil that follows the cursor and throws confetti */
.tn[data-fx=holo] { border-color: transparent; color: #0b0f18; background: linear-gradient(115deg, #e9d5ff, #a5f3fc 22%, #fde68a 40%, #fbcfe8 58%, #c4b5fd 76%, #99f6e4) var(--hx, 0%) 50% / 320% 100%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.tn[data-fx=holo]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--px, 50%) 50%, rgba(255, 255, 255, .9), transparent 40%); mix-blend-mode: overlay; opacity: 0; transition: opacity .3s; }
.tn[data-fx=holo]:is(:hover, :focus-visible) { color: #0b0f18; transform: scale(1.1) rotate(-2deg); box-shadow: inset 0 0 0 1px #fff, 0 0 26px -6px var(--c); }
.tn[data-fx=holo]:is(:hover, :focus-visible)::after { opacity: 1; }
.tn[data-fx=holo].on { box-shadow: 0 0 0 2px #fff, 0 0 26px -6px var(--c); }
/*end*/

/*fx:scramble*/
/* Text Effects: terminal text that decodes from random characters, with a blinking cursor */
.tn[data-fx=scramble] { border-color: color-mix(in srgb, var(--c) 35%, transparent); background: #050a04; color: var(--c); text-shadow: 0 0 6px color-mix(in srgb, var(--c) 60%, transparent); }
.tn[data-fx=scramble]::after { content: "_"; margin-left: -.2em; animation: tn-blink 1s steps(1) infinite; }
.tn[data-fx=scramble]:is(:hover, :focus-visible) { color: #ecfccb; box-shadow: 0 0 0 1px var(--c), 0 0 22px -6px var(--c); animation: tn-flick 1.2s linear; }
.tn[data-fx=scramble].on { color: #0a1400; background: var(--c); text-shadow: none; }
@keyframes tn-blink { 50% { opacity: 0; } }
@keyframes tn-flick { 0%, 8%, 12%, 30%, 100% { opacity: 1; } 10%, 31% { opacity: .35; } }
/*end*/

/*fx:truck*/
/* Trackers: a delivery truck drives the pill full of progress, then it turns green */
.tn[data-fx=truck] { overflow: visible; border-color: color-mix(in srgb, var(--c) 40%, transparent); transition: --tn-p 1.1s cubic-bezier(.6, 0, .3, 1), border-color .3s, color .3s, box-shadow .3s; }
.tn[data-fx=truck]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: max(var(--tn-p), 14%); border-radius: inherit; z-index: 0; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--c) 55%, transparent) 0 6px, color-mix(in srgb, var(--c) 30%, transparent) 6px 12px); background-size: 17px 100%; opacity: .55; animation: tn-stripe .6s linear infinite; }
.tn[data-fx=truck]::after { content: "🚚"; position: absolute; z-index: 1; top: 50%; margin-top: -.62em; left: calc(var(--tn-p) - 1.3em); font-size: 1.05em; line-height: 1.2; transform: scaleX(-1); opacity: 0; transition: opacity .2s; }
.tn[data-fx=truck]:is(:hover, :focus-visible) { --tn-p: 100%; color: #fff; }
.tn[data-fx=truck]:is(:hover, :focus-visible)::before { opacity: 1; }
.tn[data-fx=truck]:is(:hover, :focus-visible)::after { opacity: 1; animation: tn-bump .25s steps(2) infinite; }
.tn[data-fx=truck].tn-done { border-color: #22c55e; box-shadow: 0 0 18px -4px #22c55e; }
.tn[data-fx=truck].on::before { display: none; }
@keyframes tn-stripe { to { background-position: 17px 0; } }
@keyframes tn-bump { 50% { translate: 0 -1px; } }
/*end*/

/*fx:elastic*/
/* Sliders: the pill is a slider; it stretches toward the cursor and springs back */
.tn[data-fx=elastic] { overflow: visible; border-color: color-mix(in srgb, var(--c) 40%, transparent); transform: skewX(var(--sk, 0deg)) scaleX(var(--sx, 1)); transition: transform .9s cubic-bezier(.2, 2.2, .4, 1), color .25s, box-shadow .3s; }
.tn[data-fx=elastic]::before { content: ""; position: absolute; left: .9em; right: .9em; bottom: 3px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--c) var(--kx, 30%), #1e2636 var(--kx, 30%)); }
.tn[data-fx=elastic]::after { content: ""; position: absolute; bottom: 0; left: calc(.9em + (100% - 1.8em) * var(--k, .3)); width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--c), 0 0 8px var(--c); transition: left .9s cubic-bezier(.2, 2.2, .4, 1); }
.tn[data-fx=elastic]:is(:hover, :focus-visible) { transition: transform .12s, color .25s, box-shadow .3s; box-shadow: 0 0 22px -8px var(--c); }
.tn[data-fx=elastic]:is(:hover, :focus-visible)::after { transition: left .08s; }
.tn[data-fx=elastic].on::before { background: linear-gradient(90deg, #04221e var(--kx, 30%), rgba(0, 0, 0, .25) var(--kx, 30%)); }
/*end*/

/*fx:ember*/
/* Make: molten metal that glows hotter on hover and sheds rising embers */
.tn[data-fx=ember] { border-color: #5a1a08; color: #ffd7b5; background: radial-gradient(120% 140% at 50% 120%, #ff5a1f 0%, #7a1d06 45%, #1a0904 80%); background-size: 100% 100%; box-shadow: 0 0 12px -6px var(--c), inset 0 -1px 6px rgba(255, 120, 40, .45); }
.tn[data-fx=ember]:is(:hover, :focus-visible) { color: #fff7ed; border-color: #ffb36b; background: radial-gradient(120% 160% at 50% 110%, #fff1a8 0%, #ff8a1f 30%, #c2280a 62%, #3a0d04 95%); text-shadow: 0 0 6px #ffb36b; box-shadow: 0 0 26px -2px var(--c), 0 0 60px -20px #ffcf6b; animation: tn-heat .5s ease-in-out infinite alternate; }
@keyframes tn-heat { to { box-shadow: 0 0 34px 0 var(--c), 0 0 70px -16px #ffcf6b; filter: saturate(1.25); } }
/*end*/

/*fx:warp*/
/* /new lab: hyperspace jump, star streaks rush outward and the label stretches */
.tn[data-fx=warp] { overflow: hidden; border-color: color-mix(in srgb, var(--c) 45%, transparent); background: radial-gradient(circle at 50% 50%, #1b1f4a, #05060f 70%); color: #e0e7ff; }
.tn[data-fx=warp]::before { content: ""; position: absolute; left: 50%; top: 50%; width: 260%; aspect-ratio: 1; translate: -50% -50%; z-index: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 7deg, rgba(224, 231, 255, .85) 0 .8deg, transparent .8deg 9deg, rgba(129, 140, 248, .8) 9deg 9.6deg, transparent 9.6deg 17deg);
  -webkit-mask: radial-gradient(circle, transparent 0 8%, #000 30%, transparent 62%); mask: radial-gradient(circle, transparent 0 8%, #000 30%, transparent 62%);
  opacity: 0; transform: scale(.25); }
.tn[data-fx=warp] .tn-l { transition: letter-spacing .5s cubic-bezier(.2, 1.4, .4, 1), text-shadow .3s; }
.tn[data-fx=warp]:is(:hover, :focus-visible) { box-shadow: 0 0 0 1px var(--c), 0 0 30px -6px var(--c); }
.tn[data-fx=warp]:is(:hover, :focus-visible)::before { animation: tn-warp .7s cubic-bezier(.5, 0, .9, .4) infinite; }
.tn[data-fx=warp]:is(:hover, :focus-visible) .tn-l { letter-spacing: .22em; text-shadow: -3px 0 6px var(--c), 3px 0 6px #22d3ee; }
@keyframes tn-warp { 0% { opacity: 0; transform: scale(.25) rotate(0deg); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6) rotate(6deg); } }
/*end*/

/*fx:wipe*/
/* Page change: a circle of the button's color swallows the screen, then opens on the next page */
.tn-wipe { position: fixed; inset: 0; z-index: 10000; pointer-events: none; background: var(--c); clip-path: circle(0 at var(--wx, 50%) var(--wy, 0%)); }
.tn-wipe.in { animation: tn-wipe-in .38s cubic-bezier(.7, 0, .84, 0) forwards; }
.tn-wipe.out { clip-path: circle(150vmax at var(--wx, 50%) var(--wy, 0%)); animation: tn-wipe-out .5s cubic-bezier(.16, 1, .3, 1) .05s forwards; }
@keyframes tn-wipe-in { to { clip-path: circle(150vmax at var(--wx, 50%) var(--wy, 0%)); } }
html.tn-arr::after { content: ""; position: fixed; inset: 0; z-index: 10000; background: var(--tn-c, #07090f); }
@keyframes tn-wipe-out { to { clip-path: circle(0 at var(--wx, 50%) var(--wy, 0%)); } }
/*end*/

/*fx:layout*/
/* Phones: give the nav its own full-width row so the pills wrap across instead of stacking in a column */
.top .catnav { row-gap: 9px; }
@media (max-width: 640px) {
  .top .catnav { order: 3; flex: 1 1 100%; }
  .top .top-actions { margin-left: auto; }
}
/*end*/

/*fx:reduce*/
@media (prefers-reduced-motion: reduce) {
  .tn, .tn *, .tn::before, .tn::after, .tn .tn-l::before, .tn .tn-l::after { animation: none !important; transition-duration: .01s !important; }
  .tn[data-fx=flip]:is(:hover, :focus-visible) .tn-card { transform: none; }
  .tn-wipe { display: none; }
}
/*end*/