/* Adapted from the user-supplied NEXO opening. All styles are scoped. */
#nexo-startup{--blue: #225BE4; --blue-lift: #4C7CF0; --mint: #97F0D3; --ink: #060A14; --ink-2: #0E1730; --paper: #F7F9FC; --hair: rgba(215,228,250,.20); --dim: rgba(247,249,252,.48); --font-display: Pretendard,-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif; --font-mono: ui-monospace,SFMono-Regular,Menlo,monospace; color-scheme: dark;}
#nexo-startup *{box-sizing: border-box;}
#nexo-startup{height: 100%;}
#nexo-startup{margin: 0; background: var(--ink); color: var(--paper); font-family: var(--font-display); overflow: hidden;}
#nexo-startup{position: relative; width: 100%; height: 100%; min-height: 100dvh; background: radial-gradient(135% 105% at 50% 48%, var(--ink-2) 0%, var(--ink) 66%); overflow: hidden; isolation: isolate;}
#nexo-startup .nxi-bars{position: absolute; inset: 0; z-index: 36; pointer-events: none;}
#nexo-startup .nxi-bars b{position: absolute; left: 0; right: 0; height: 9%; background: #000; display: block;}
#nexo-startup .nxi-bars b:first-child{top: 0;}
#nexo-startup .nxi-bars b:last-child{bottom: 0;}
#nexo-startup .nxi-vig{position: absolute; inset: 0; z-index: 34; pointer-events: none; background: radial-gradient(105% 88% at 50% 46%, transparent 42%, rgba(2,4,10,.78) 100%);}
#nexo-startup .nxi-grain{position: absolute; inset: -50%; z-index: 35; pointer-events: none; opacity: .13; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>"); animation: nxi-grain 640ms steps(2) infinite;}
@keyframes nxi-grain{0%{transform: translate(0,0);}50%{transform: translate(-2%,1.5%);}100%{transform: translate(1.5%,-1%);}}
#nexo-startup .nxi-layer{position: absolute; inset: 0; display: grid; place-items: center; padding-inline: 20px; opacity: 0; visibility: hidden; z-index: 10;}
#nexo-startup .nxi-layer.nxi-on{opacity: 1; visibility: visible;}
#nexo-startup .nxi-mark{width: min(30vw,150px); height: auto; display: block; overflow: visible;}
#nexo-startup .nxi-mark .nxi-plate{fill: var(--blue);}
#nexo-startup .nxi-mark .nxi-s{fill: none; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round;}
#nexo-startup .nxi-mark .nxi-s-mint{stroke: var(--mint);}
#nexo-startup .nxi-mark .nxi-s-white{stroke: #fff;}
#nexo-startup #nxi-act1{transition: opacity .45s ease;}
#nexo-startup .nxi-a1{display: grid; place-items: center; gap: 26px;}
#nexo-startup .nxi-seam{width: min(56vw,340px); height: 1px; background: linear-gradient(90deg,transparent,var(--blue-lift),transparent); transform: scaleX(0); opacity: 0;}
#nexo-startup.nxi-go .nxi-seam{animation: nxi-seam 1s cubic-bezier(.16,.84,.3,1) forwards;}
@keyframes nxi-seam{0%{transform: scaleX(0); opacity: 0;}35%{opacity: 1;}70%{transform: scaleX(1); opacity: 1;}100%{transform: scaleX(1); opacity: 0;}}
#nexo-startup #nxi-act1 .nxi-mark{position: absolute;}
#nexo-startup #nxi-act1 .nxi-plate{opacity: 0; transform-origin: 50px 50px; transform: scale(.4);}
#nexo-startup #nxi-act1 .nxi-s{stroke-dasharray: 130; stroke-dashoffset: 130;}
#nexo-startup.nxi-go #nxi-act1 .nxi-plate{animation: nxi-plateIn .7s .5s cubic-bezier(.2,1.25,.35,1) forwards;}
#nexo-startup.nxi-go #nxi-act1 .nxi-s-mint{animation: nxi-drawS .55s 1.02s cubic-bezier(.3,.85,.3,1) forwards;}
#nexo-startup.nxi-go #nxi-act1 .nxi-s-white{animation: nxi-drawS .6s 1.2s cubic-bezier(.3,.85,.3,1) forwards;}
@keyframes nxi-plateIn{0%{opacity: 0; transform: scale(.4);}100%{opacity: 1; transform: scale(1);}}
@keyframes nxi-drawS{to{stroke-dashoffset: 0;}}
#nexo-startup #nxi-act2{padding: 0;}
#nexo-startup .nxi-rig{position: absolute; inset: -30% -24% 4%; display: grid; align-content: center; gap: 2vw; transform: rotate(-11deg) scale(1.02); z-index: 8;}
#nexo-startup .nxi-band{display: flex; align-items: center; gap: 1.5vw; width: max-content; will-change: transform;}
#nexo-startup .nxi-band.nxi-back{opacity: .2; filter: blur(3px);}
#nexo-startup .nxi-card{position: relative; flex: 0 0 auto; height: clamp(180px,33vh,320px); border-radius: 6px; overflow: hidden; isolation: isolate; background: #0C1424; box-shadow: 0 0 0 1px rgba(76,124,240,.18), 0 26px 64px rgba(0,0,0,.66); opacity: .38; transform: scale(.97); transition: opacity .28s ease, transform .5s cubic-bezier(.12,.72,.3,1), box-shadow .3s ease;}
#nexo-startup .nxi-card img{display: block; height: 100%; width: auto; filter: brightness(.62) saturate(.6) contrast(1.02);}
#nexo-startup .nxi-card::after{content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(190deg, rgba(34,91,228,.34) 0%, rgba(6,10,20,.50) 100%); mix-blend-mode: multiply; transition: background .3s ease,opacity .3s ease;}
#nexo-startup .nxi-card.nxi-hot{opacity: 1; transform: scale(1.04); box-shadow: 0 0 0 1px rgba(151,240,211,.45), 0 0 46px rgba(34,91,228,.42), 0 30px 72px rgba(0,0,0,.72);}
#nexo-startup .nxi-card.nxi-hot img{filter: brightness(1.04) saturate(1.02) contrast(1.02);}
#nexo-startup .nxi-card.nxi-hot::after{opacity: 0;}
#nexo-startup .nxi-scrim{position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 28; pointer-events: none; background: linear-gradient(180deg,transparent 0%,rgba(4,7,16,.34) 38%,rgba(4,7,16,.92) 86%,rgba(4,7,16,.97) 100%);}
#nexo-startup .nxi-plate-cap{position: absolute; left: 0; right: 0; bottom: 14.5%; z-index: 30; display: grid; justify-items: center; gap: 9px; text-align: center; padding-inline: 20px; pointer-events: none;}
#nexo-startup .nxi-plate-cap .nxi-ko{margin: 0; font-size: clamp(29px,6.8vw,58px); font-weight: 900; letter-spacing: -.025em; line-height: 1; text-shadow: 0 4px 34px rgba(0,0,0,.9); text-wrap: balance;}
#nexo-startup .nxi-plate-cap .nxi-en{font-family: var(--font-mono); font-size: clamp(10px,2.3vw,12px); font-weight: 500; letter-spacing: .3em; color: var(--mint); text-transform: uppercase; text-shadow: 0 2px 18px rgba(0,0,0,.95);}
#nexo-startup .nxi-plate-cap.nxi-beat .nxi-ko,#nexo-startup .nxi-plate-cap.nxi-beat .nxi-en{animation: nxi-kick .34s cubic-bezier(.16,.9,.28,1) both;}
@keyframes nxi-kick{0%{opacity: 0; transform: translateY(9px) scale(.99);}100%{opacity: 1; transform: none;}}
#nexo-startup .nxi-watermark{position: absolute; top: 13%; left: clamp(18px,4vw,42px); width: 30px; opacity: .75; z-index: 30;}
#nexo-startup .nxi-watermark .nxi-s{stroke-dasharray: none; stroke-dashoffset: 0;}
#nexo-startup .nxi-watermark .nxi-plate{opacity: 1; transform: none;}
#nexo-startup .nxi-hud{position: absolute; left: 0; right: 0; bottom: 10.2%; display: flex; align-items: center; justify-content: center; gap: 15px; z-index: 30; font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--dim); font-variant-numeric: tabular-nums;}
#nexo-startup .nxi-track{position: relative; width: min(36vw,190px); height: 1px; background: var(--hair);}
#nexo-startup .nxi-track i{position: absolute; inset: 0 auto 0 0; display: block; width: 0; background: var(--mint);}
#nexo-startup #nxi-act3{transition: opacity .6s ease;}
#nexo-startup .nxi-lockup{display: grid; place-items: center; gap: clamp(14px,3vh,24px); text-align: center;}
#nexo-startup #nxi-act3 .nxi-mark{width: min(26vw,116px);}
#nexo-startup #nxi-act3 .nxi-s{stroke-dasharray: none; stroke-dashoffset: 0;}
#nexo-startup #nxi-act3 .nxi-plate{opacity: 1; transform: none;}
#nexo-startup #nxi-act3.nxi-on .nxi-mark{animation: nxi-lockMark .9s cubic-bezier(.16,.9,.28,1) both;}
@keyframes nxi-lockMark{0%{transform: scale(1.45); opacity: 0; filter: blur(7px);}100%{transform: scale(1); opacity: 1; filter: blur(0);}}
#nexo-startup .nxi-wordmark{margin: 0; font-size: clamp(40px,10vw,84px); font-weight: 900; letter-spacing: .06em; line-height: 1; padding-left: .06em;}
#nexo-startup .nxi-subko{font-size: clamp(14px,3.6vw,19px); font-weight: 700; letter-spacing: .02em; color: var(--paper);}
#nexo-startup .nxi-rule{width: 44px; height: 1px; background: var(--blue-lift);}
#nexo-startup .nxi-tagline{margin: 0; max-width: 34ch; font-size: clamp(12px,3.2vw,15px); line-height: 1.7; color: var(--dim); text-wrap: balance;}
#nexo-startup #nxi-act3.nxi-on .nxi-wordmark,#nexo-startup #nxi-act3.nxi-on .nxi-subko,#nexo-startup #nxi-act3.nxi-on .nxi-rule,#nexo-startup #nxi-act3.nxi-on .nxi-tagline{animation: nxi-riseIn .8s cubic-bezier(.16,.9,.28,1) both;}
#nexo-startup #nxi-act3.nxi-on .nxi-wordmark{animation-delay: .32s;}
#nexo-startup #nxi-act3.nxi-on .nxi-subko{animation-delay: .44s;}
#nexo-startup #nxi-act3.nxi-on .nxi-rule{animation-delay: .54s;}
#nexo-startup #nxi-act3.nxi-on .nxi-tagline{animation-delay: .64s;}
@keyframes nxi-riseIn{0%{opacity: 0; transform: translateY(14px);}100%{opacity: 1; transform: translateY(0);}}
#nexo-startup .nxi-flash{position: absolute; inset: 0; z-index: 33; background: var(--paper); opacity: 0; pointer-events: none;}
#nexo-startup .nxi-flash.nxi-fire{animation: nxi-flash .5s ease-out;}
@keyframes nxi-flash{0%{opacity: 0;}10%{opacity: .94;}100%{opacity: 0;}}
#nexo-startup .nxi-ctl{position: absolute; z-index: 50; font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); background: rgba(6,10,20,.5); border: 1px solid var(--hair); border-radius: 999px; padding: 9px 18px; cursor: pointer; transition: color .2s,border-color .2s,opacity .35s;}
#nexo-startup .nxi-ctl:hover{color: var(--paper); border-color: var(--blue-lift);}
#nexo-startup .nxi-ctl:focus-visible{outline: 2px solid var(--mint); outline-offset: 3px;}
#nexo-startup #nxi-skip{top: 11.5%; right: clamp(16px,4vw,34px); opacity: 0; pointer-events: none;}
#nexo-startup #nxi-skip.nxi-show{opacity: 1; pointer-events: auto;}
#nexo-startup #nxi-replay{left: 50%; bottom: 11.5%; transform: translateX(-50%); opacity: 0; pointer-events: none;}
#nexo-startup #nxi-replay.nxi-show{opacity: 1; pointer-events: auto;}
@media (prefers-reduced-motion:reduce){#nexo-startup .nxi-grain{animation: none;}
#nexo-startup *{animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important;}}
@media (max-width:480px){#nexo-startup .nxi-rig{transform: rotate(-13deg) scale(1.18);}
#nexo-startup .nxi-plate-cap{bottom: 16%;}
#nexo-startup .nxi-card{height: clamp(150px,26vh,210px);}}
/* Startup integration: preserve the supplied composition without leaking into the app. */
#nexo-startup{position:fixed;inset:0;z-index:10000;padding:0;display:block;min-height:0;height:100dvh;transition:opacity .18s ease,visibility .18s ease;font-family:Pretendard,system-ui,'Malgun Gothic',sans-serif;line-height:1.5;text-align:left}
#nexo-startup.is-ready{opacity:0;visibility:hidden;pointer-events:none}
#nexo-startup .nxi-card{margin:0;padding:0;border:0}
#nexo-startup .nxi-card img{max-width:none;object-fit:contain}
#nexo-startup .nxi-mark{max-width:none;flex-shrink:0}
#nexo-startup .nxi-ctl{min-height:44px;min-width:100px;font-family:inherit;font-size:13px;letter-spacing:.02em;color:#cad1df}
#nexo-startup #nxi-skip{top:max(11.5%,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}
#nexo-startup #nxi-skip[hidden]{display:none}
#nexo-startup .nxi-status{position:absolute;z-index:45;left:20px;right:20px;bottom:11%;text-align:center}
#nexo-startup .nxi-status[hidden]{display:none}
#nexo-startup .nexo-load-message{color:#cad1df;font:13px/1.5 Pretendard,system-ui,sans-serif}
#nexo-startup .nexo-load-retry{min-height:44px;margin-top:8px}
#nexo-startup .nxi-tagline{max-width:34ch;color:#afb9cb}
#nexo-startup.nxi-static .nxi-grain{animation:none}
#nexo-startup.nxi-static .nxi-lockup *{animation:none}
#nexo-startup .nxi-card.nxi-missing{aspect-ratio:16/10}
@media(max-height:450px){#nexo-startup .nxi-lockup{gap:10px}#nexo-startup #nxi-act3 .nxi-mark{width:64px}#nexo-startup .nxi-wordmark{font-size:38px}#nexo-startup .nxi-status{bottom:10%}}

