/* Echo One 2.0: the Tools page, tool views, devices, files, Mel's intake, the Memory and shipments. Same tokens as next.css. */
#nx { --nx-clay: #C9785A; --nx-paper: #F6EFE2; }

/* ---------- the Tools page: fills the space between the rail, the top bar and Mel ---------- */
#nx .nx-tools { position: absolute; left: var(--nx-rail); right: var(--nx-mel); top: var(--nx-top); bottom: 0; background: var(--nx-paper); color: var(--nx-on-cream); pointer-events: auto; overflow-y: auto; opacity: 0; visibility: hidden; }
#nx.nx-tools-on .nx-tools { visibility: visible; }
#nx.nx-tools-on .nx-mark, #nx.nx-tools-on .nx-carry { display: none !important; }
#nx .nx-tools .nx-tin { padding: 26px 30px 40px; display: flex; flex-direction: column; }
#nx .nx-tools .nx-tin { transition: opacity 250ms cubic-bezier(0,0,0,1); }
#nx .nx-tools.nx-dim .nx-tin { opacity: .5; }
#nx .nx-thd { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; color: var(--nx-on-cream); }
#nx .nx-thd em { font-style: normal; color: var(--nx-on-cream-2); font-weight: 600; }
#nx .nx-tsub { font-size: 15px; color: var(--nx-on-cream-2); margin: 6px 0 16px; }
#nx .nx-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 6px; background: rgba(66,75,84,.08); align-self: flex-start; margin-bottom: 6px; }
#nx .nx-tabs button { font: 600 13px var(--nx-sans); padding: 7px 16px; border-radius: 4px; color: var(--nx-on-cream-2); }
#nx .nx-tabs button:hover { color: var(--nx-on-cream); }
#nx .nx-tabs button.on { background: var(--nx-slate); color: var(--nx-cream); }
#nx .nx-tg { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nx-on-cream-2); margin: 18px 0 8px; display: flex; gap: 10px; align-items: center; }
#nx .nx-tg::after { content: ""; flex: 1; height: 1px; background: var(--nx-cream-line); }
#nx .nx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 8px; }
#nx .nx-tile { background: var(--nx-cream); border-radius: 10px; padding: 10px 12px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px; gap: 1px 10px; align-items: center; text-align: left; box-shadow: 0 1px 0 rgba(30,43,60,.06); transition: box-shadow 150ms, transform 150ms; }
#nx .nx-tile:hover { box-shadow: 0 0 0 1px var(--nx-cream-line), 0 6px 14px rgba(30,43,60,.08); transform: translateY(-1px); }
#nx .nx-tile.on { box-shadow: 0 0 0 2px var(--nx-slate); }
#nx .nx-tile.hi { box-shadow: 0 0 0 2px var(--nx-led); }
#nx .nx-tile b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--nx-on-cream); }
#nx .nx-tile > span:not(.nx-mk):not(.nx-f) { font-size: 12px; color: var(--nx-on-cream-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#nx .nx-tile .nx-off { color: var(--nx-clay) !important; }
#nx .nx-tile .nx-f { width: 22px; height: 22px; grid-row: span 2; margin: 0; }
#nx .nx-mk { width: 34px; height: 34px; border-radius: 9px; grid-row: span 2; display: grid; place-items: center; color: #fff; font: 700 12px/1 var(--nx-sans); letter-spacing: -.02em; flex: none; }
#nx .nx-mk.big { width: 44px; height: 44px; border-radius: 11px; font-size: 15px; }
#nx .nx-mk svg { width: 18px; height: 18px; }
#nx .nx-th { display: flex; gap: 12px; align-items: center; } #nx .nx-th h2 { margin: 0; }
#nx .nx-srch { height: 46px; border-radius: 8px; background: var(--nx-cream); display: flex; align-items: center; gap: 10px; padding: 0 16px; box-shadow: 0 0 0 1px var(--nx-cream-line); margin-top: 10px; }
#nx .nx-srch svg { width: 16px; height: 16px; color: var(--nx-on-cream-2); flex: none; }
#nx .nx-srch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 15px var(--nx-sans); color: var(--nx-on-cream); }
#nx .nx-srch:focus-within { box-shadow: 0 0 0 2px var(--nx-slate); }
#nx .nx-folds { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
#nx .nx-fold { background: var(--nx-cream); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 4px; text-align: left; font-size: 14px; font-weight: 600; color: var(--nx-on-cream); }
#nx .nx-fold i { width: 30px; height: 22px; border-radius: 3px 7px 3px 3px; background: var(--nx-cream-3); display: block; margin-bottom: 4px; }
#nx .nx-fold span { font-size: 12px; font-weight: 400; color: var(--nx-on-cream-2); }
#nx .nx-fold.on { box-shadow: 0 0 0 2px var(--nx-slate); }
#nx .nx-res { background: var(--nx-cream); border-radius: 10px; padding: 0 14px; }
#nx .nx-res .nx-row:last-child { border-bottom: 0; }
#nx .nx-res .nx-row { cursor: pointer; }
#nx .nx-kind { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nx-on-cream-2); background: var(--nx-paper); border-radius: 3px; padding: 1px 6px; flex: none; }

/* the tool, device, file, lesson and shipment cards (inside the shell's own sheet) */
#nx .nx-card .nx-tnum { font-size: 40px; line-height: 1; font-weight: 700; color: var(--nx-on-cream); font-variant-numeric: tabular-nums; margin-top: 6px; }
#nx .nx-card .nx-tnum.off { font-size: 28px; color: var(--nx-clay); }
#nx .nx-late { width: 8px; height: 8px; border-radius: 50%; background: var(--nx-clay); flex: none; margin: 0 4px; }
#nx .nx-agd { width: 26px; height: 26px; border-radius: 50%; flex: none; background: radial-gradient(circle at 36% 30%, #b9f0ee 0%, var(--nx-led) 55%, #2f9fa5 100%); }
#nx .nx-live { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #2b3036; margin-top: 8px; flex: none; }
#nx .nx-live canvas { width: 100%; height: 100%; display: block; filter: grayscale(.9) contrast(1.45) brightness(.78); }
#nx .nx-live .rec { position: absolute; left: 10px; top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #fff; display: flex; gap: 6px; align-items: center; }
#nx .nx-live .rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #E0533D; animation: nx-rec 1.4s ease-in-out infinite; }
@keyframes nx-rec { 50% { opacity: .3; } }
#nx .nx-live .ts { position: absolute; right: 10px; bottom: 8px; font: 600 12px ui-monospace, Menlo, monospace; color: #fff; }
#nx .nx-live .cam { position: absolute; left: 10px; bottom: 8px; font-size: 11px; color: #fff; }
#nx .nx-hb { display: flex; align-items: flex-end; gap: 5px; height: 70px; margin-top: 10px; flex: none; }
#nx .nx-hb i { flex: 1; background: var(--nx-cream-3); border-radius: 3px 3px 0 0; }
#nx .nx-hbl { display: flex; justify-content: space-between; font-size: 11px; color: var(--nx-on-cream-2); }
#nx .nx-map { height: 200px; border-radius: 8px; overflow: hidden; background: #EFE6D3; margin-top: 8px; flex: none; }
#nx .nx-prev { height: 200px; border-radius: 8px; background: var(--nx-paper) center / cover; margin-top: 8px; flex: none; position: relative; overflow: hidden; }
#nx .nx-prev.doc { background: var(--nx-paper); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
#nx .nx-prev.doc b { font-size: 15px; } #nx .nx-prev.doc i { height: 7px; border-radius: 4px; background: var(--nx-cream-3); display: block; }
#nx .nx-two2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
#nx .nx-two2 div { background: var(--nx-paper); border-radius: 8px; padding: 10px 12px; font-size: 14px; line-height: 1.45; }
#nx .nx-two2 div.af { box-shadow: inset 0 0 0 1px var(--nx-led); background: #EAF6F4; }
#nx .nx-two2 b { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--nx-on-cream-2); margin-bottom: 4px; }
#nx .nx-tl { display: flex; flex-direction: column; margin-top: 8px; }
#nx .nx-tl div { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; padding: 6px 0; position: relative; color: var(--nx-on-cream); }
#nx .nx-tl div i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--nx-slate); box-sizing: border-box; flex: none; margin-top: 3px; background: var(--nx-cream); z-index: 1; }
#nx .nx-tl div:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 18px; bottom: -6px; width: 2px; background: var(--nx-cream-3); }
#nx .nx-tl div.d i { background: var(--nx-slate); } #nx .nx-tl div.x i { border-color: var(--nx-clay); background: var(--nx-clay); } #nx .nx-tl div.x { color: var(--nx-clay); font-weight: 600; }
#nx .nx-tl div.f { color: var(--nx-on-cream-2); }
#nx .nx-prog { display: flex; gap: 3px; width: 96px; flex: none; } #nx .nx-prog i { flex: 1; height: 6px; border-radius: 3px; background: var(--nx-cream-3); } #nx .nx-prog i.d { background: var(--nx-slate); } #nx .nx-prog i.x { background: var(--nx-clay); }
#nx .nx-secl { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--nx-on-cream-2); margin-top: 14px; }
#nx .nx-added { animation: nx-added 600ms cubic-bezier(0,0,0,1); } @keyframes nx-added { from { opacity: 0; transform: translateY(4px); } }

/* ---------- a tool, opened inside Echo One: Echo One's slim bar, then the tool in its own style ---------- */
#nx .nx-tv { position: absolute; left: var(--nx-rail); right: var(--nx-mel); top: var(--nx-top); bottom: 0; background: #E9E5DE; pointer-events: auto; display: none; overflow: hidden; color: #1E2B3C; }
#nx.nx-tv-on .nx-tv { display: block; }
#nx .nx-tvbar { position: absolute; left: 0; right: 0; top: 0; height: 46px; background: var(--nx-cream); border-bottom: 1px solid var(--nx-cream-line); display: flex; align-items: center; gap: 14px; padding: 0 14px; font-size: 13px; z-index: 2; }
#nx .nx-tvbar button { font: 600 13px var(--nx-sans); color: var(--nx-on-cream); display: inline-flex; gap: 4px; align-items: center; }
#nx .nx-tvbar button svg { width: 16px; height: 16px; }
#nx .nx-addr { flex: 1; max-width: 560px; height: 30px; border-radius: 15px; background: #EFE7D8; display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--nx-on-cream-2); white-space: nowrap; overflow: hidden; }
#nx .nx-addr::before { content: ""; width: 9px; height: 11px; border-radius: 2px; border: 2px solid #8E8980; box-sizing: border-box; flex: none; }
#nx .nx-conn { margin-left: auto; color: var(--nx-on-cream-2); font-weight: 600; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
#nx .nx-conn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nx-led); }
#nx .nx-tvb { position: absolute; left: 0; right: 0; top: 46px; bottom: 0; overflow: hidden; }
#nx .nx-cur { position: absolute; z-index: 5; pointer-events: none; transition: left 700ms cubic-bezier(.4,0,.2,1), top 700ms cubic-bezier(.4,0,.2,1); }
#nx .nx-cur svg { width: 20px; height: 20px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); display: block; }
#nx .nx-cur span { position: absolute; left: 16px; top: 16px; background: var(--nx-slate); color: var(--nx-cream); font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 3px; white-space: nowrap; }
.nx-hide { opacity: 0; transform: translateY(6px); }
.nx-show { opacity: 1 !important; transform: none !important; transition: opacity 500ms cubic-bezier(0,0,0,1), transform 500ms cubic-bezier(0,0,0,1); }
/* Canva, simplified, in its colours */
.cv-top { position: absolute; left: 0; right: 0; top: 0; height: 48px; background: linear-gradient(90deg, #00C4CC, #7D2AE8); color: #fff; display: flex; align-items: center; gap: 14px; padding: 0 16px; font: 600 14px var(--nx-sans); }
.cv-top span { opacity: .85; font-weight: 500; } .cv-top b { margin-left: auto; background: rgba(255,255,255,.2); padding: 6px 12px; border-radius: 6px; font-weight: 600; }
.cv-ic { position: absolute; left: 0; top: 48px; bottom: 0; width: 64px; background: #18191B; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 16px; }
.cv-ic i { width: 22px; height: 22px; border-radius: 6px; background: #3A3B3E; display: block; } .cv-ic i.on { background: #7D2AE8; }
.cv-pn { position: absolute; left: 64px; top: 48px; bottom: 0; width: 230px; background: #fff; padding: 14px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; font: 400 13px var(--nx-sans); color: #0E1318; }
.cv-pn .h { font-weight: 700; } .cv-pn .sw { display: flex; gap: 6px; } .cv-pn .sw i { width: 30px; height: 30px; border-radius: 50%; display: block; border: 1px solid #ddd; }
.cv-pn .ft { padding: 8px 10px; border-radius: 6px; background: #F2F3F5; } .cv-pn .ph { height: 74px; border-radius: 6px; background: url("../img/launch/warm-1.jpg") center / cover; }
.cv-cv { position: absolute; left: 294px; right: 0; top: 48px; bottom: 0; background: #EBECF0; display: grid; place-items: center; }
.cv-post { width: 400px; height: 400px; background: #F4ECE0; position: relative; box-shadow: 0 8px 30px rgba(0,0,0,.15); overflow: hidden; }
.cv-post .ph { position: absolute; left: 0; right: 0; top: 0; height: 265px; background: url("../img/launch/warm-1.jpg") center 40% / cover; }
.cv-post .t { position: absolute; left: 24px; right: 24px; bottom: 50px; font: 700 26px var(--nx-sans); color: #3B3026; letter-spacing: -.01em; }
.cv-post .s { position: absolute; left: 24px; bottom: 24px; font: 400 13px var(--nx-sans); color: #6E5E4E; letter-spacing: .12em; text-transform: uppercase; }
.cv-post .sel { position: absolute; inset: 0; box-shadow: inset 0 0 0 2px #8B3DFF; }
/* Google Analytics, simplified, in its style */
.ga-top { position: absolute; left: 0; right: 0; top: 0; height: 52px; background: #fff; border-bottom: 1px solid #E3E3E3; display: flex; align-items: center; gap: 12px; padding: 0 18px; color: #202124; font: 400 15px var(--nx-sans); }
.ga-top i { width: 22px; height: 22px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 2px; } .ga-top i b { background: #F9AB00; border-radius: 2px; display: block; }
.ga-side { position: absolute; left: 0; top: 52px; bottom: 0; width: 64px; background: #fff; border-right: 1px solid #E3E3E3; display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 18px; }
.ga-side i { width: 22px; height: 22px; border-radius: 50%; background: #E8EAED; display: block; } .ga-side i.on { background: #E8F0FE; box-shadow: inset 0 0 0 6px #1A73E8; }
.ga-main { position: absolute; left: 64px; right: 0; top: 52px; bottom: 0; background: #F8F9FA; padding: 18px; box-sizing: border-box; color: #202124; display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: auto 1fr; gap: 14px; font-family: var(--nx-sans); }
.ga-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 2px rgba(60,64,67,.2); padding: 14px 16px; min-width: 0; }
.ga-k { display: grid; grid-template-columns: repeat(4, 1fr); } .ga-k div { padding: 2px 10px 8px; border-left: 1px solid #E3E3E3; } .ga-k div:first-child { border: 0; padding-left: 0; } .ga-k div.on { box-shadow: inset 0 -3px 0 #1A73E8; }
.ga-k small { display: block; font-size: 12px; color: #5F6368; } .ga-k b { font-size: 22px; font-weight: 500; } .ga-k em { font-style: normal; font-size: 12px; color: #188038; margin-left: 6px; } .ga-k em.dn { color: #D93025; }
.ga-src div { display: grid; grid-template-columns: 110px 1fr 44px; gap: 10px; align-items: center; font-size: 13px; padding: 6px 0; } .ga-src i { height: 10px; border-radius: 2px; background: #1A73E8; display: block; } .ga-src span { text-align: right; color: #5F6368; }
/* Shopify admin, simplified, in its style */
.sh-top { position: absolute; left: 0; right: 0; top: 0; height: 52px; background: #1A1A1A; color: #E3E3E3; display: flex; align-items: center; gap: 14px; padding: 0 16px; font: 500 14px var(--nx-sans); }
.sh-top i { width: 24px; height: 24px; border-radius: 6px; background: #5E8E3E; display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 700; font-size: 13px; }
.sh-top span { margin-left: auto; background: #303030; border-radius: 8px; padding: 6px 12px; color: #B5B5B5; min-width: 260px; }
.sh-nav { position: absolute; left: 0; top: 52px; bottom: 0; width: 220px; background: #EBEBEB; padding: 12px 10px; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; font: 500 13px var(--nx-sans); color: #303030; }
.sh-nav div { padding: 7px 10px; border-radius: 8px; } .sh-nav div.on { background: #fff; font-weight: 650; }
.sh-main { position: absolute; left: 220px; right: 0; top: 52px; bottom: 0; background: #F1F1F1; padding: 18px 22px; box-sizing: border-box; font-family: var(--nx-sans); color: #303030; overflow: hidden; }
.sh-main h3 { margin: 0 0 12px; font-size: 20px; font-weight: 650; }
.sh-k { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: #fff; border-radius: 12px; box-shadow: 0 1px 0 rgba(0,0,0,.08); padding: 12px 16px; margin-bottom: 14px; }
.sh-k div { padding: 0 10px; border-left: 1px solid #EBEBEB; } .sh-k div:first-child { border: 0; padding-left: 0; } .sh-k small { display: block; font-size: 12px; color: #616161; } .sh-k b { font-size: 20px; font-weight: 650; }
.sh-t { background: #fff; border-radius: 12px; box-shadow: 0 1px 0 rgba(0,0,0,.08); overflow: hidden; font-size: 13px; }
.sh-t div { display: grid; grid-template-columns: 90px 1fr 1fr 110px 90px; gap: 10px; padding: 10px 16px; border-top: 1px solid #EBEBEB; align-items: center; } .sh-t div:first-child { border: 0; background: #F7F7F7; color: #616161; font-weight: 600; }
.sh-pill { display: inline-block; padding: 2px 8px; border-radius: 8px; background: #EBEBEB; font-size: 12px; } .sh-pill.ok { background: #CDFED4; color: #014B40; } .sh-pill.wait { background: #FFEB78; color: #4F4700; }

/* ---------- Mel's cards in her column: intake and filing ---------- */
#nx .nx-mcard { background: var(--nx-cream); color: var(--nx-on-cream); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.45; opacity: 0; transform: translateY(6px); transition: opacity 300ms cubic-bezier(0,0,0,1), transform 300ms cubic-bezier(0,0,0,1); }
#nx .nx-mcard.in { opacity: 1; transform: none; }
#nx .nx-mcard .nx-ml { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nx-on-cream-2); margin-top: 2px; }
#nx .nx-mcard .nx-mf { display: flex; align-items: center; gap: 10px; font-weight: 600; }
#nx .nx-mcard .nx-mf i { width: 26px; height: 32px; background: var(--nx-slate); border-radius: 3px; flex: none; display: grid; place-items: end center; padding-bottom: 4px; box-sizing: border-box; color: var(--nx-cream); font: 700 8px var(--nx-sans); font-style: normal; }
#nx .nx-mcard ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
#nx .nx-mcard li { display: flex; gap: 8px; align-items: flex-start; }
#nx .nx-mcard li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #A8A39B; flex: none; margin-top: 2px; box-sizing: border-box; transition: all 300ms; }
#nx .nx-mcard li.ok::before { border-color: var(--nx-led); background: var(--nx-led); box-shadow: inset 0 0 0 3px var(--nx-cream); }
#nx .nx-mcard .nx-sw { display: flex; gap: 6px; } #nx .nx-mcard .nx-sw i { width: 22px; height: 22px; border-radius: 4px; display: block; border: 1px solid rgba(30,43,60,.15); }
#nx .nx-mcard .nx-mb { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
#nx .nx-mcard .nx-mb button { font: 600 14px var(--nx-sans); border-radius: 3px; padding: 9px 14px; color: var(--nx-on-cream); box-shadow: inset 0 0 0 1px rgba(30,43,60,.3); }
#nx .nx-mcard .nx-mb button.pri { background: var(--nx-slate); color: var(--nx-cream); box-shadow: none; display: inline-flex; gap: 8px; align-items: center; }
#nx .nx-mcard .nx-mb button.pri::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--nx-led); }
#nx .nx-mcard .nx-mb button[disabled] { opacity: .5; }
#nx .nx-mcard .nx-picks { display: grid; gap: 4px; } #nx .nx-mcard .nx-picks button { text-align: left; font: 500 14px var(--nx-sans); padding: 6px 10px; border-radius: 3px; color: var(--nx-on-cream); background: var(--nx-paper); }

/* the light on a rail item: something new */
#nx .nx-ri .nx-new { position: absolute; top: 5px; right: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--nx-led); box-shadow: 0 0 0 2px var(--nx-slate), 0 0 0 5px rgba(101,205,210,.25); }

/* ---------- the Engine's Memory ---------- */
#nx .nx-etabs { position: absolute; left: auto; right: 64px; top: 6px; display: inline-flex; gap: 2px; padding: 3px; border-radius: 6px; background: rgba(255,247,233,.08); pointer-events: auto; }
#nx .nx-etabs button { font: 600 13px var(--nx-sans); padding: 7px 16px; border-radius: 4px; color: var(--nx-on-slate-2); }
#nx .nx-etabs button.on { background: var(--nx-cream); color: var(--nx-slate); }
#nx .nx-mem { position: absolute; inset: 0; display: none; pointer-events: auto; background: radial-gradient(120% 90% at 38% 48%, #4E5862 0%, #424B54 50%, #394148 100%); color: var(--nx-cream); overflow: hidden; }
#nx .nx-eng.nx-memon .nx-mem { display: block; }
#nx .nx-mstage { position: absolute; left: 0; top: 0; width: 760px; height: 600px; transform-origin: 0 0; }
#nx .nx-mttl { position: absolute; left: 24px; top: 64px; font-size: 26px; font-weight: 700; line-height: 1.2; }
#nx .nx-mttl span { display: block; font-size: 14px; font-weight: 400; color: var(--nx-on-slate-2); margin-top: 4px; }
#nx .nx-msrc { position: absolute; left: 24px; width: 150px; padding: 10px 12px; border-radius: 10px; background: rgba(255,247,233,.08); border: 1px solid rgba(255,247,233,.14); font-size: 14px; }
#nx .nx-msrc b { display: block; font-size: 15px; } #nx .nx-msrc span { font-size: 12px; color: var(--nx-on-slate-2); }
#nx .nx-magt { position: absolute; left: 560px; width: 170px; padding: 9px 12px; border-radius: 10px; background: rgba(255,247,233,.08); border: 1px solid rgba(255,247,233,.14); font-size: 14px; display: flex; gap: 8px; align-items: center; }
#nx .nx-magt i { width: 18px; height: 18px; border-radius: 50%; background: var(--nx-led); box-shadow: inset 0 0 0 5px #424B54; flex: none; }
#nx .nx-magt.hit { border-color: var(--nx-led); }
#nx .nx-core { position: absolute; left: 260px; top: 230px; width: 220px; height: 220px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 50% 45%, rgba(101,205,210,.35), rgba(101,205,210,.08) 60%, transparent 70%); box-shadow: 0 0 0 1px rgba(101,205,210,.55), 0 0 60px rgba(101,205,210,.25); animation: nx-core 3.2s ease-in-out infinite; }
@keyframes nx-core { 50% { box-shadow: 0 0 0 1px rgba(101,205,210,.75), 0 0 90px rgba(101,205,210,.35); } }
#nx .nx-core b { display: block; font-size: 52px; line-height: 1; font-variant-numeric: tabular-nums; } #nx .nx-core span { font-size: 14px; color: var(--nx-on-slate-2); }
#nx .nx-mpaths { position: absolute; left: 0; top: 0; width: 760px; height: 600px; overflow: visible; }
#nx .nx-mpaths path { fill: none; stroke: rgba(101,205,210,.4); stroke-width: 1.5; stroke-dasharray: 4 6; animation: nx-flow 1.6s linear infinite; }
@keyframes nx-flow { to { stroke-dashoffset: -20; } }
#nx .nx-orb { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--nx-led); box-shadow: 0 0 12px var(--nx-led); }
#nx .nx-mlist { position: absolute; right: 16px; top: 56px; bottom: 16px; width: 316px; background: var(--nx-cream); color: var(--nx-on-cream); border-radius: 12px; padding: 18px 20px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
#nx .nx-mlist h3 { margin: 0; font-size: 22px; font-weight: 700; }
#nx .nx-mlist .nx-row { align-items: flex-start; font-size: 14px; cursor: pointer; }
#nx .nx-mlist .nx-row:hover { background: var(--nx-cream-2); }
@media (prefers-reduced-motion: reduce) { #nx .nx-mpaths path, #nx .nx-core { animation: none; } }