:root { --bg:#03050c; --panel:rgba(7,12,25,.76); --line:rgba(119,201,255,.18); --text:#ecf6ff; --muted:#8b9bb3; --cyan:#64edff; --blue:#8098ff; --gold:#ffc26b; --danger:#ff6f86; --radius:18px; }
* { box-sizing:border-box; } html { background:var(--bg); } body { margin:0; min-width:320px; color:var(--text); background:radial-gradient(circle at 76% -10%,#142a55 0,transparent 36rem),radial-gradient(circle at 7% 56%,#11122e 0,transparent 34rem),var(--bg); font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input,select { font:inherit; } button { color:inherit; } .app-shell { position:relative; overflow:hidden; min-height:100vh; padding:24px clamp(18px,5vw,72px) 26px; isolation:isolate; } #warp-canvas { position:fixed; inset:0; z-index:-3; width:100%; height:100%; pointer-events:none; opacity:.72; } .aurora { position:fixed; z-index:-2; inset:auto -18vw -26vh auto; width:64vw; height:70vh; background:radial-gradient(ellipse,rgba(60,159,255,.14),transparent 62%); filter:blur(16px); pointer-events:none; }
.glass { background:linear-gradient(135deg,rgba(20,30,57,.74),rgba(4,8,18,.7)); border:1px solid var(--line); box-shadow:0 18px 70px rgba(0,0,0,.27); backdrop-filter:blur(18px); } .topbar { display:flex; gap:20px; align-items:center; min-height:58px; padding:0 17px; border-radius:var(--radius); } .wordmark { color:var(--text); text-decoration:none; letter-spacing:.13em; font-size:12px; font-weight:800; } .wordmark span { color:var(--cyan); font-size:20px; vertical-align:-2px; } .connection { margin:0 auto 0 0; color:var(--muted); font-size:11px; letter-spacing:.11em; font-weight:700; } .status-dot { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 14px var(--gold); } .status-dot.live { background:var(--cyan); box-shadow:0 0 14px var(--cyan); } .header-actions { display:flex; gap:7px; }.icon-button,.control-button { border:1px solid rgba(138,203,255,.25); border-radius:9px; padding:8px 11px; background:rgba(11,20,40,.7); cursor:pointer; transition:background .18s,border-color .18s,transform .18s; }.icon-button:hover,.control-button:hover,.control-button.is-active { background:rgba(91,193,255,.18); border-color:rgba(104,237,255,.65); }.icon-button:focus-visible,.control-button:focus-visible,input:focus-visible,select:focus-visible,.event-card:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
.hero { max-width:790px; padding:clamp(64px,10vw,134px) 0 35px; } .eyebrow { margin:0 0 8px; color:var(--cyan); letter-spacing:.15em; font-size:10px; font-weight:800; } h1,h2,p { margin-top:0; } h1 { margin-bottom:15px; max-width:700px; font-size:clamp(42px,7vw,86px); line-height:.92; letter-spacing:-.065em; } h1 em { color:var(--cyan); font-style:normal; text-shadow:0 0 38px rgba(92,237,255,.45); }.intro { max-width:575px; color:#adbed3; font-size:16px; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border-radius:var(--radius); overflow:hidden; }.metrics article { min-height:104px; padding:19px 21px; background:rgba(5,10,22,.38); }.metric-label,.metrics small { display:block; color:var(--muted); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }.metrics strong { display:block; margin:5px 0 3px; overflow:hidden; color:var(--text); font-size:clamp(18px,2.2vw,27px); text-overflow:ellipsis; white-space:nowrap; letter-spacing:-.04em; }
.controls { display:flex; gap:11px; align-items:center; margin:15px 0; padding:10px; border-radius:var(--radius); }.playback { display:flex; gap:6px; }.control-button { font-size:11px; font-weight:800; letter-spacing:.08em; }.search-field { flex:1; min-width:150px; }.search-field input,.select-field select { width:100%; border:1px solid rgba(148,188,235,.22); border-radius:9px; padding:9px 11px; color:var(--text); background:rgba(5,11,23,.66); }.select-field { display:flex; gap:7px; align-items:center; color:var(--muted); font-size:11px; white-space:nowrap; }.select-field select { width:auto; color:#b9c9db; }
.marquee-shell { overflow:hidden; height:29px; border-top:1px solid rgba(148,188,235,.13); border-bottom:1px solid rgba(148,188,235,.13); }.marquee { display:flex; align-items:center; gap:27px; width:max-content; min-height:28px; color:#97abc4; font-size:10px; letter-spacing:.11em; animation:drift 32s linear infinite; }.marquee b { color:var(--gold); }.stream-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.36fr); gap:17px; margin-top:27px; align-items:start; }.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:14px; }.section-heading h2,.detail-panel h2,.help-dialog h2 { margin:0; font-size:27px; letter-spacing:-.045em; }.result-count { margin:0; color:var(--muted); font-size:12px; }.stream { display:grid; gap:10px; }.event-card { --accent:var(--cyan); position:relative; display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:14px; align-items:center; overflow:hidden; min-height:78px; padding:10px 14px; border:1px solid rgba(111,181,244,.15); border-radius:14px; background:linear-gradient(90deg,rgba(10,22,43,.86),rgba(5,10,21,.43)); cursor:pointer; text-align:left; color:var(--text); transition:transform .2s,border-color .2s,background .2s; }.event-card::before { position:absolute; left:0; top:10%; bottom:10%; width:3px; content:""; border-radius:2px; background:var(--accent); box-shadow:0 0 18px var(--accent); }.event-card:hover,.event-card.is-selected { transform:translateX(5px); border-color:color-mix(in srgb,var(--accent) 65%,transparent); background:linear-gradient(90deg,rgba(16,40,72,.9),rgba(5,11,25,.54)); }.ship-image { width:48px; height:48px; object-fit:contain; filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 60%,transparent)); }.event-main { min-width:0; }.event-title { display:block; overflow:hidden; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }.event-meta { display:block; overflow:hidden; margin-top:2px; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.event-value { color:var(--accent); font-size:13px; font-weight:800; white-space:nowrap; }.lane { color:var(--muted); font-size:9px; letter-spacing:.1em; }.empty-state { padding:35px; border:1px dashed var(--line); border-radius:14px; color:var(--muted); text-align:center; }.stream-note { color:#71829b; font-size:11px; } kbd { padding:1px 4px; border:1px solid #50617b; border-radius:3px; font:10px ui-monospace,monospace; }
.detail-panel { position:sticky; top:22px; min-height:325px; padding:21px; border-radius:var(--radius); }.detail-panel > p:not(.eyebrow) { color:#aabbd0; }.detail-list { display:grid; grid-template-columns:1fr auto; gap:8px 13px; margin:21px 0; }.detail-list dt { color:var(--muted); }.detail-list dd { margin:0; max-width:150px; text-align:right; }.zkill-link { display:inline-block; padding:9px 12px; border:1px solid rgba(100,237,255,.37); border-radius:9px; color:var(--cyan); text-decoration:none; font-weight:700; font-size:12px; } footer { display:flex; justify-content:space-between; gap:20px; margin-top:50px; color:#71829b; font-size:11px; }.help-dialog { max-width:480px; padding:26px; border:1px solid var(--line); border-radius:var(--radius); color:var(--text); }.help-dialog::backdrop { background:rgba(0,0,0,.66); backdrop-filter:blur(5px); }.help-dialog dl { display:grid; grid-template-columns:140px 1fr; gap:10px; }.help-dialog dt { color:var(--cyan); font-weight:700; }.help-dialog dd { margin:0; color:#b4c1d0; }.dialog-close { float:right; border:0; background:transparent; color:var(--text); font-size:25px; cursor:pointer; }.noscript { position:fixed; z-index:5; bottom:10px; left:10px; right:10px; padding:12px; background:#36131b; color:#ffe5e8; text-align:center; }
@keyframes drift { to { transform:translateX(-40%); } } @media (max-width:820px) { .metrics { grid-template-columns:repeat(2,1fr); }.stream-layout { grid-template-columns:1fr; }.detail-panel { position:relative; top:auto; }.controls { flex-wrap:wrap; }.search-field { order:2; flex-basis:100%; }.hero { padding-top:72px; }.event-card { grid-template-columns:45px minmax(0,1fr); }.event-value { grid-column:2; }.lane { display:none; } } @media (max-width:480px) { .app-shell { padding:12px; }.topbar { padding:0 12px; }.connection { display:none; }.metrics article { padding:14px; }.controls { gap:7px; }.select-field { flex:1; }.select-field select { min-width:0; }.header-actions { margin-left:auto; } footer { display:block; } footer span { display:block; margin:6px 0; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } #warp-canvas { display:none; } }
/* The cards are a compact trajectory field: horizontal offset is lane; scale and opacity are log value depth. */
.event-card { margin-left:calc((var(--lane, 0) * 5px) - 7px); opacity:calc(.72 + var(--depth, .5) * .28); transform:perspective(850px) translateZ(calc(var(--depth, .5) * 44px)) scale(calc(.91 + var(--depth, .5) * .09)); }
.event-card:hover,.event-card.is-selected { transform:perspective(850px) translateX(5px) translateZ(calc(var(--depth, .5) * 44px)) scale(calc(.91 + var(--depth, .5) * .09)); }
.event-side { display:grid; justify-items:end; gap:4px; }.ship-fallback { display:grid; place-items:center; color:var(--cyan); font-size:26px; border:1px solid var(--line); border-radius:12px; }.no-canvas #warp-canvas { display:none; }.no-canvas .aurora { opacity:.45; }
@media (prefers-reduced-motion:reduce) { .event-card,.event-card:hover,.event-card.is-selected { transform:none; margin-left:0; opacity:1; } }

.dossier-link{color:var(--muted);text-decoration:none;font-size:10px;letter-spacing:.12em;font-weight:700}.dossier-link:hover{color:var(--cyan)}

/* Immersive contact field. Each real killmail begins near the vanishing point
   and flies toward the observer. ISK magnitude controls the clamped hull scale. */
.stream-panel{min-width:0}
.stream{position:relative;display:block;min-height:clamp(560px,68vh,820px);overflow:hidden;border:1px solid rgba(112,205,255,.16);border-radius:28px;background:radial-gradient(circle at 50% 48%,rgba(99,229,255,.13) 0 1px,rgba(32,93,150,.08) 2px,transparent 19%),linear-gradient(180deg,rgba(3,8,18,.28),rgba(2,5,13,.72));box-shadow:inset 0 0 120px rgba(17,97,162,.11),0 35px 90px rgba(0,0,0,.34);perspective:900px;isolation:isolate}
.stream::before,.stream::after{content:"";position:absolute;z-index:-1;left:50%;top:48%;width:150%;height:150%;translate:-50% -50%;border-radius:50%;border:1px solid rgba(92,214,255,.08);box-shadow:0 0 90px rgba(63,164,255,.08) inset;animation:tunnel-pulse 8s linear infinite}
.stream::after{width:92%;height:92%;animation-delay:-4s;border-color:rgba(255,194,107,.07)}
.event-card{position:absolute;z-index:2;left:50%;top:48%;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;width:clamp(164px,18vw,238px);min-height:74px;padding:9px 12px;border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);border-radius:16px;background:linear-gradient(110deg,rgba(8,22,43,.93),rgba(4,8,18,.7));box-shadow:0 0 34px color-mix(in srgb,var(--accent) 14%,transparent),0 16px 38px rgba(0,0,0,.42);color:var(--text);cursor:pointer;text-align:left;transform-origin:center;will-change:transform,opacity;animation:contact-flight var(--flight) linear var(--delay) infinite;opacity:0;backdrop-filter:blur(9px)}
.event-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(95deg,color-mix(in srgb,var(--accent) 45%,transparent),transparent 45%);z-index:-1;opacity:.4}
.event-card:hover,.event-card:focus-visible,.event-card.is-selected{animation-play-state:paused;z-index:12;border-color:var(--accent);box-shadow:0 0 48px color-mix(in srgb,var(--accent) 36%,transparent),0 24px 58px rgba(0,0,0,.62)}
.contact-visual{position:relative;display:grid;place-items:center;width:74px;height:62px}
.ship-image{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--accent) 72%,transparent));transition:filter .2s}
.ship-fallback{display:grid;place-items:center;border:1px solid var(--line);border-radius:14px;color:var(--cyan);font-size:31px}
.contact-data{display:grid;min-width:0;gap:2px}
.event-title,.event-meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.event-title{font-size:13px}.event-value{color:var(--accent);font-size:12px;font-weight:900}.event-meta{color:var(--muted);font-size:9px;letter-spacing:.04em}
.contact-wake{position:absolute;z-index:-2;right:90%;top:50%;width:clamp(90px,18vw,280px);height:2px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 72%,transparent));filter:blur(.3px);opacity:.7;transform-origin:right}
.contact-wake::before,.contact-wake::after{content:"";position:absolute;right:0;width:75%;height:1px;background:inherit;transform:rotate(3deg);transform-origin:right}.contact-wake::after{transform:rotate(-3deg)}
.stream-paused .event-card{animation-play-state:paused}
@keyframes contact-flight{0%{transform:translate3d(var(--lane-x),var(--lane-y),-920px) scale(calc(.18 * var(--mass)));opacity:0}7%{opacity:.2}20%{opacity:.92}79%{opacity:1}100%{transform:translate3d(var(--end-x),var(--end-y),350px) scale(calc(1.34 * var(--mass)));opacity:0}}
@keyframes tunnel-pulse{from{transform:scale(.08);opacity:.7}to{transform:scale(1.25);opacity:0}}
@media (max-width:820px){.stream{min-height:600px}.stream-layout{grid-template-columns:1fr}.event-card{width:180px}.detail-panel{position:relative}.hero{padding-bottom:22px}}
@media (prefers-reduced-motion:reduce){.stream{display:grid;grid-template-columns:1fr;gap:8px;min-height:auto;padding:10px;perspective:none}.stream::before,.stream::after{display:none}.event-card,.event-card:hover,.event-card:focus-visible,.event-card.is-selected{position:relative;left:auto;top:auto;width:100%;opacity:1;animation:none;transform:none;margin:0}.contact-wake{display:none}}


/* Full-page trajectory mode and selected-contact glass overlay. */
.section-heading-actions{display:flex;align-items:center;gap:12px}.field-button{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid rgba(100,237,255,.28);border-radius:10px;background:rgba(7,18,35,.76);color:#b9d6e9;font-size:10px;font-weight:900;letter-spacing:.1em;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s,color .2s}.field-button span[aria-hidden]{color:var(--cyan);font-size:16px;line-height:.7}.field-button:hover,.field-button.is-active{border-color:rgba(100,237,255,.75);background:rgba(52,153,197,.17);box-shadow:0 0 25px rgba(100,237,255,.12);color:var(--text)}.field-button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.detail-panel{overflow:hidden;isolation:isolate;background:linear-gradient(145deg,rgba(17,31,58,.88),rgba(3,8,19,.9));border-color:rgba(116,216,255,.23);box-shadow:0 24px 85px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.04)}.detail-panel::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--detail-accent,var(--cyan)) 18%,transparent),transparent 42%);pointer-events:none}.detail-grid{position:absolute;z-index:-2;inset:0;opacity:.12;background-image:linear-gradient(rgba(103,218,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(103,218,255,.22) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(135deg,transparent 10%,#000 90%)}.detail-topline{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px}.detail-topline .eyebrow{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.detail-actions{display:flex;align-items:center;gap:8px}.detail-close{display:none;width:28px;height:28px;padding:0;border:1px solid rgba(100,237,255,.3);border-radius:8px;background:rgba(5,13,27,.7);color:#b9d6e9;font-size:20px;line-height:1;cursor:pointer;transition:border-color .2s,background .2s,color .2s,transform .2s}.detail-close:hover{border-color:rgba(100,237,255,.8);background:rgba(52,153,197,.2);color:#fff;transform:scale(1.04)}.detail-close:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.detail-lock{padding:4px 7px;border:1px solid rgba(100,237,255,.22);border-radius:999px;color:#8cb5c8;font:700 8px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.12em;white-space:nowrap}.detail-panel.has-contact .detail-lock{color:var(--cyan);border-color:rgba(100,237,255,.48);box-shadow:0 0 14px rgba(100,237,255,.12)}.detail-ship-art{position:absolute;z-index:-1;right:-34px;top:28px;width:190px;height:190px;opacity:.23;filter:saturate(.75);mask-image:linear-gradient(115deg,transparent,#000 45%);pointer-events:none}.detail-ship-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 30px color-mix(in srgb,var(--detail-accent,var(--cyan)) 65%,transparent))}.detail-panel h2{position:relative;z-index:1;max-width:72%;margin-top:12px}.detail-destruction{position:relative;z-index:1;display:block;margin:5px 0 10px;color:var(--detail-accent,var(--cyan));font-size:clamp(18px,2vw,26px);letter-spacing:-.035em;text-shadow:0 0 26px color-mix(in srgb,var(--detail-accent,var(--cyan)) 45%,transparent)}.detail-panel.contact-refresh{animation:contact-popup .42s cubic-bezier(.2,.9,.2,1)}@keyframes contact-popup{0%{transform:translateY(9px) scale(.985);opacity:.55;filter:blur(2px)}100%{transform:none;opacity:1;filter:none}}
html.field-open,html.field-open body{overflow:hidden}.field-open .stream-layout{position:fixed;z-index:80;inset:0;display:block;margin:0;background:#02050c}.field-open .stream-panel{width:100%;height:100%}.field-open .section-heading{position:fixed;z-index:95;top:clamp(16px,3vw,34px);left:clamp(16px,4vw,58px);right:clamp(16px,4vw,58px);align-items:center;margin:0;padding:12px 14px;border:1px solid rgba(113,205,255,.17);border-radius:15px;background:linear-gradient(100deg,rgba(3,9,21,.84),rgba(11,25,48,.58));box-shadow:0 16px 50px rgba(0,0,0,.3);backdrop-filter:blur(15px)}.field-open .section-heading h2{font-size:clamp(19px,2.5vw,30px)}.field-open .stream{width:100%;height:100%;min-height:100%;border:0;border-radius:0;background:radial-gradient(circle at 50% 48%,rgba(99,229,255,.18) 0 1px,rgba(32,93,150,.095) 2px,transparent 20%),radial-gradient(ellipse at 50% 48%,rgba(17,71,119,.16),transparent 55%),#02050c}.field-open .stream-note{position:fixed;z-index:94;left:clamp(16px,4vw,58px);bottom:clamp(16px,3vw,32px);margin:0;padding:8px 11px;border:1px solid rgba(113,205,255,.14);border-radius:9px;background:rgba(3,9,21,.68);backdrop-filter:blur(10px)}.field-open .empty-state{position:fixed;z-index:94;left:50%;top:50%;translate:-50% -50%;background:rgba(3,9,21,.72)}.field-open .detail-panel{position:fixed;z-index:96;top:auto;right:clamp(16px,4vw,58px);bottom:clamp(16px,3vw,32px);width:min(430px,calc(100vw - 32px));min-height:0;max-height:min(620px,calc(100vh - 150px));overflow:auto;padding:24px;border-color:rgba(100,237,255,.35);box-shadow:0 30px 110px rgba(0,0,0,.72),0 0 70px rgba(70,183,255,.12),inset 0 1px rgba(255,255,255,.06);backdrop-filter:blur(24px) saturate(1.25)}.field-open .detail-close{display:inline-grid;place-items:center}.field-open .detail-panel.is-dismissed{visibility:hidden;opacity:0;pointer-events:none;transform:translateY(18px) scale(.97)}.field-open .detail-list{margin:17px 0}.field-open .detail-panel.contact-refresh{animation:field-contact-popup .48s cubic-bezier(.16,1,.3,1)}@keyframes field-contact-popup{0%{transform:translateY(20px) scale(.96);opacity:0;filter:blur(5px)}100%{transform:none;opacity:1;filter:none}}
@media(max-width:640px){.section-heading-actions{gap:7px}.result-count{display:none}.field-button{padding:8px}.field-open .section-heading{padding:9px 10px}.field-open .section-heading .eyebrow{display:none}.field-open .detail-panel{right:10px;bottom:10px;width:calc(100vw - 20px);max-height:47vh;padding:17px}.field-open .detail-list{grid-template-columns:1fr auto;font-size:11px}.field-open .detail-list dd{max-width:180px}.field-open .detail-ship-art{width:140px;height:140px}.field-open .stream-note{display:none}}
@media(prefers-reduced-motion:reduce){.detail-panel.contact-refresh,.field-open .detail-panel.contact-refresh{animation:none}}