.color-arrival{--arrival-progress:0;--arrival-reveal:0;--arrival-ring-turn:0deg;--arrival-scan-y:12%;position:relative;isolation:isolate;display:grid;grid-template-rows:52px minmax(0,1fr) 85px;height:440px;overflow:hidden;border:1px solid #527e8755;border-radius:24px;color:#dffbf4;background:radial-gradient(ellipse at 50% 57%,#29464e38,transparent 53%),linear-gradient(145deg,#101f2e,#08111f 65%,#17192d);box-shadow:0 24px 80px #0003,inset 0 1px #b3ffe309;font-family:var(--body,system-ui,sans-serif)}
.color-arrival:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(115deg,#8defd307,transparent 35%,transparent 60%,#b69aff07)}
.arrival-topline{position:relative;z-index:3;display:flex;align-items:center;gap:16px;padding:0 26px;border-bottom:1px solid #7caab318;background:#07131b55;font:500 11px/1.4 var(--mono,monospace);letter-spacing:.035em}
.arrival-channel{display:inline-flex;align-items:center;gap:8px;color:#a1f4d9;letter-spacing:.16em;font-size:10px}.arrival-channel i{width:5px;height:5px;border-radius:50%;background:#8defd3;box-shadow:0 0 10px #8defd355}
.arrival-status{color:#a9c2cf;flex:1}.arrival-bars{display:flex;align-items:flex-end;gap:3px;height:12px}.arrival-bars i{display:block;width:3px;background:#8defd3;opacity:calc(.22 + var(--arrival-progress)*.68);border-radius:1px}.arrival-bars i:nth-child(1){height:3px}.arrival-bars i:nth-child(2){height:6px}.arrival-bars i:nth-child(3){height:9px}.arrival-bars i:nth-child(4){height:12px;background:#b69aff}
.arrival-arena{position:relative;min-height:0;overflow:hidden;isolation:isolate}
.arrival-aura{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 62%,#8defd317,transparent 37%),radial-gradient(ellipse at 51% 68%,#b69aff0f,transparent 54%);opacity:calc(.35 + var(--arrival-progress)*.65)}
.arrival-grid{position:absolute;left:-25%;right:-25%;top:70%;bottom:-55%;transform:perspective(150px) rotateX(52deg);transform-origin:center top;background-image:linear-gradient(#8defd30b 1px,transparent 1px),linear-gradient(90deg,#8defd30b 1px,transparent 1px);background-size:38px 28px;mask-image:radial-gradient(ellipse at 50% 0,#000,transparent 58%)}
.arrival-orbit{position:absolute;left:50%;top:51%;border:1px solid #8defd313;border-radius:50%;transform:translate(-50%,-50%) rotate(var(--arrival-ring-turn));pointer-events:none}
.arrival-orbit:before,.arrival-orbit:after{content:"";position:absolute;border-radius:50%;inset:-1px;border:1px solid transparent;border-top-color:#8defd35c;transform:rotate(23deg);mask-image:conic-gradient(#000 0deg,transparent 65deg)}
.arrival-orbit:after{border-top-color:#b69aff65;transform:rotate(190deg)}
.arrival-orbit-outer{width:278px;height:278px;opacity:calc(.35 + var(--arrival-progress)*.4)}
.arrival-orbit-inner{width:224px;height:224px;transform:translate(-50%,-50%) rotate(calc(0deg - var(--arrival-ring-turn)));border-style:dashed;border-color:#b69aff17;opacity:.65}
.arrival-orbit-inner:before,.arrival-orbit-inner:after{display:none}
.arrival-corners{position:absolute;left:50%;top:51%;width:204px;height:190px;transform:translate(-50%,-50%);opacity:calc(.16 + (1 - var(--arrival-reveal))*.4)}
.arrival-corners i{position:absolute;width:10px;height:10px;border-color:#a1f4d969;border-style:solid}.arrival-corners i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}.arrival-corners i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}.arrival-corners i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}.arrival-corners i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}
.arrival-scan{position:absolute;left:calc(50% - 128px);width:256px;top:var(--arrival-scan-y);height:1px;background:linear-gradient(90deg,transparent,#9cf7df80,transparent);box-shadow:0 0 18px #8defd32a;opacity:0;pointer-events:none}
.color-arrival[data-phase=signal] .arrival-scan{opacity:.85}.color-arrival[data-phase=assemble] .arrival-scan{opacity:.18}
.arrival-pedestal{position:absolute;left:50%;top:80%;width:206px;height:31px;transform:translate(-50%,-50%);border:1px solid #8defd332;border-radius:50%;background:radial-gradient(ellipse,#8defd31a,transparent 66%);box-shadow:0 6px 24px #8defd30b,inset 0 0 15px #8defd30b;opacity:calc(.3 + var(--arrival-progress)*.7)}
.arrival-pedestal:after{content:"";position:absolute;inset:5px 20px;border:1px solid #b69aff3b;border-radius:50%}.arrival-pedestal i{position:absolute;left:50%;top:50%;width:68px;height:12px;transform:translate(-50%,-50%);border-radius:50%;background:#8defd31c;filter:blur(9px)}
.arrival-pixels{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;z-index:2;pointer-events:none}
.arrival-native[hidden],.arrival-fallback[hidden]{display:none!important}.arrival-fallback{position:absolute;left:calc(50% - 72px);bottom:20%;width:144px;height:144px;object-fit:contain;image-rendering:pixelated;z-index:2}
.arrival-marker{position:absolute;top:48%;color:#8defd356;font:400 12px/1 monospace;opacity:calc(.2 + var(--arrival-progress)*.55)}.arrival-marker-left{left:calc(50% - 167px)}.arrival-marker-right{right:calc(50% - 167px);color:#b69aff70}
.arrival-identity{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:4px 20px 16px;text-align:center;opacity:var(--arrival-reveal);transform:translateY(calc((1 - var(--arrival-reveal))*9px))}
.arrival-kicker{font:500 9px/1.5 var(--mono,monospace);letter-spacing:.16em;color:#8defd3cc}.arrival-name{margin:7px 0 0;max-width:100%;font:600 clamp(20px,3vw,29px)/1.15 var(--display,system-ui,sans-serif);letter-spacing:-.025em;color:#e8fff8;overflow-wrap:anywhere;text-wrap:balance}.arrival-rule{width:26px;height:2px;margin-top:10px;border-radius:2px;background:linear-gradient(90deg,#8defd3,#b69aff);opacity:.75}
.color-arrival[data-phase=waiting] .arrival-aura,.color-arrival[data-phase=loading] .arrival-aura,.color-arrival[data-phase=error] .arrival-aura{opacity:.25}.color-arrival[data-phase=error] .arrival-channel i{background:#b69aff;box-shadow:none}
@media(max-width:600px){.color-arrival{height:370px;grid-template-rows:44px minmax(0,1fr) 76px;border-radius:19px}.arrival-topline{padding:0 17px;gap:13px;font-size:10px}.arrival-orbit-outer{width:234px;height:234px}.arrival-orbit-inner{width:190px;height:190px}.arrival-corners{width:176px;height:170px}.arrival-pedestal{width:178px;height:27px}.arrival-marker-left{left:calc(50% - 139px)}.arrival-marker-right{right:calc(50% - 139px)}.arrival-name{font-size:23px}.arrival-kicker{font-size:8px}.arrival-identity{padding-top:2px}.arrival-rule{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.color-arrival *{animation:none!important;transition:none!important}.arrival-scan{display:none}.arrival-orbit{transform:translate(-50%,-50%)}.arrival-identity{transform:none}}
.color-arrival{grid-template-rows:52px minmax(0,1fr) 118px}.arrival-name .bilingual-secondary{font-size:.6em;line-height:1.35;letter-spacing:.01em;margin-top:4px}.arrival-identity .arrival-rule{margin-top:8px}
@media(max-width:600px){.color-arrival{grid-template-rows:44px minmax(0,1fr) 108px}.arrival-name{font-size:23px}.arrival-name .bilingual-secondary{font-size:.6em}.arrival-identity{padding-bottom:12px}}