/* North NJ Exchange: global styles. Component styles are inline in app.js (tpl). */
:root{color-scheme:dark}
body{margin:0;background:#0B0B0E;color:#EDEDF2;font-family:'Outfit',system-ui,sans-serif}
.holo{background:linear-gradient(115deg,#7CF5FF,#B98CFF,#FF8CD8,#FFF07C,#8CFFC1,#7CF5FF,#B98CFF);background-size:300% 300%;animation:holo 6s linear infinite}
.holo-t{-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes holo{to{background-position:300% 0}}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tape{animation:tape 42s linear infinite}
.tapewrap:hover .tape{animation-play-state:paused}
@keyframes ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.ping{animation:ping 1.6s ease-out infinite}
@keyframes blink{50%{opacity:0}}
.cursor{animation:blink 1s step-end infinite}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rise{animation:rise .5s ease-out both}
@keyframes fill{from{width:0}to{width:100%}}
.scan{animation:fill 1.6s linear both}
@keyframes draw{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}}
.line{stroke-dasharray:1400;animation:draw 2.6s cubic-bezier(.3,.7,.3,1) both .3s}
@keyframes fade{from{opacity:0}}
.area{animation:fade 1.2s ease-out both 1.8s}
@keyframes pulse{0%{r:6;opacity:1}100%{r:20;opacity:0}}
.pulse{animation:pulse 1.6s ease-out infinite 2.8s}
@keyframes glare{0%{transform:translateX(-140%) skewX(-20deg)}55%,100%{transform:translateX(320%) skewX(-20deg)}}
.glare{animation:glare 7s ease-in-out infinite 2s}
@keyframes grow{from{transform:scaleX(0)}}
.grow{transform-origin:left center;animation:grow 1.6s cubic-bezier(.2,.8,.2,1) both .6s}
.f{display:inline-flex;align-items:center;box-sizing:border-box;white-space:nowrap;overflow:hidden;background:linear-gradient(#202027 0 49.3%,#050507 49.3% 50.7%,#17171D 50.7%);color:#EDEDF2;border:1px solid #2A2A33;border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 3px 0 #000;font-family:'Outfit',sans-serif;font-weight:600;line-height:1;animation:flip .7s cubic-bezier(.3,1.5,.5,1) both}
.big{justify-content:center;width:clamp(26px,3vw,44px);height:clamp(42px,5vw,72px);font-size:clamp(28px,3.8vw,52px)}
.r{height:46px;padding:0 14px;font-size:18px;letter-spacing:.04em}
.m{font-family:'JetBrains Mono',monospace;font-weight:500;letter-spacing:0}
.ic{width:46px;height:46px;justify-content:center;padding:0;flex:0 0 auto}
@keyframes flip{0%{transform:perspective(400px) rotateX(92deg);filter:brightness(1.3)}55%{transform:perspective(400px) rotateX(-14deg)}100%{transform:none;filter:none}}
@property --a{syntax:'<angle>';initial-value:360deg;inherits:false}
.reveal{background:conic-gradient(transparent 0 var(--a),#121217 var(--a));animation:sweep 2s cubic-bezier(.3,.7,.3,1) both .4s}
@keyframes sweep{from{--a:0deg}to{--a:360deg}}
@keyframes rowin{from{opacity:0;transform:translateX(-14px)}}
.rowin{animation:rowin .5s ease-out both}
@keyframes slide{from{left:0}}
.tg{animation:slide 1.8s cubic-bezier(.2,.8,.2,1) both 1s}
.tab:hover{background:#1A1A21}
.chip:hover{border-color:#B98CFF;color:#EDEDF2}
input:focus-visible,button:focus-visible{outline:2px solid #B98CFF;outline-offset:2px}
@media (prefers-reduced-motion: reduce){.holo,.tape,.ping,.cursor,.rise,.scan,.line,.area,.pulse,.glare,.grow,.f,.rowin,.tg{animation:none}.reveal{animation:none;background:none}}
.still .rowin,.still .f,.still .line,.still .area,.still .grow,.still .tg,.still .reveal,.still .rise,.still .pulse{animation:none}