:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}body{margin:0}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}*{box-sizing:border-box;max-width:100%;margin:0;padding:0}html,body,#root{background:#020617;width:100%;height:100%}#root{max-width:100%!important;margin:0!important;padding:0!important}body{color:#fff;background:#020617;font-family:Inter,sans-serif;font-size:13px;display:block;overflow:hidden auto}.landing{background-color:#0000;background-image:radial-gradient(circle at 50% 20%,#38bdf840,#0000 60%),linear-gradient(135deg,#0f172a,#1e293b);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:400% 400%;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;justify-content:center;align-items:center;width:100vw;height:100vh;animation:10s infinite gradientMove;display:flex}@keyframes gradientMove{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.hero{text-align:center;margin-top:-40px}.title{color:#fff;text-shadow:0 0 12px #ffffff59;font-size:48px;font-weight:700}.subtitle{opacity:.8;margin:10px 0 20px;font-size:18px}.enter-btn{cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;background:linear-gradient(135deg,#3b82f6,#38bdf8);border:1px solid #ffffff26;border-radius:12px;padding:18px 40px;font-size:20px;font-weight:600;transition:all .2s;box-shadow:0 10px 30px #38bdf866,inset 0 0 10px #ffffff1a}.enter-btn:hover{transform:translateY(-2px)scale(1.02);box-shadow:0 15px 40px #38bdf899}.container{background:radial-gradient(circle at top,#020617,#01030a);grid-template-columns:minmax(240px,300px) minmax(240px,280px) 1fr minmax(260px,320px);gap:14px;height:auto;min-height:100vh;padding:14px;display:grid;overflow:visible}.insight-metric.clickable{cursor:pointer;transition:all .2s}.insight-metric.clickable:hover{background:#ffffff0f;transform:translateY(-1px)}.sidebar{background:linear-gradient(160deg,#0f172af2,#1e293bd9);border:1px solid #ffffff0f;border-radius:14px;padding:10px;overflow-y:auto;box-shadow:0 20px 50px #000000b3,inset 0 0 30px #6366f114}.sidebar h3{justify-content:flex-start;margin-bottom:12px;font-size:24px}.icon{border-radius:6px;justify-content:center;align-items:center;width:26px;height:26px;font-size:14px;display:flex}.icon.purple{background:linear-gradient(135deg,#7c3aed,#6366f1);box-shadow:0 0 12px #7c3aed99}.match-card{cursor:pointer;background:#ffffff08;border:1px solid #ffffff0d;border-radius:10px;align-items:center;gap:12px;margin-bottom:10px;padding:10px;transition:all .25s;display:flex}.match-card:hover{background:#ffffff14;transform:translate(4px)}.match-card.active{background:linear-gradient(135deg,#2563eb,#1e40af);border:1px solid #3b82f6;box-shadow:0 0 20px #3b82f699}.match-thumb{object-fit:cover;border-radius:10px;flex-shrink:0;width:56px;height:56px}.match-status{opacity:.8;background:#38bdf8;border-radius:50%;width:8px;height:8px;margin-left:auto}.match-content{flex-direction:column;flex:1;gap:2px;display:flex}.match-thumb{object-fit:cover;border:1px solid #ffffff1a;border-radius:8px;width:48px;height:48px}.match-info{flex-direction:column;font-size:12px;display:flex}.match-title{font-size:16px;font-weight:600}.match-meta{color:#ffffff80;font-size:14px}.match-id{color:#e2e8f0;font-size:14px;font-weight:600}.match-map{color:#38bdf8;font-size:14px}.match-card.active .match-status{background:#60a5fa;box-shadow:0 0 8px #60a5fa}.match-card.active{background:linear-gradient(135deg,#2563eb,#1e3a8a);box-shadow:inset 0 0 12px #ffffff1a,0 0 20px #3b82f680}.main{gap:14px;width:100%;height:100%;min-height:0;display:contents}.sidebar{grid-column:1}.map-container{grid-column:3;min-width:0}.insights-container{grid-column:4}.timeline-wrapper{padding:10px 12px}.timeline-bar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#020617cc;border:1px solid #ffffff0f;border-radius:14px;align-items:center;gap:12px;padding:10px 14px;display:flex;box-shadow:0 10px 25px #0009,inset 0 0 8px #ffffff08}.play-btn{cursor:pointer;color:#38bdf8;background:#3b82f633;border:1px solid #3b82f666;border-radius:10px;justify-content:center;align-items:center;width:34px;height:34px;font-size:14px;transition:all .2s;display:flex}.play-btn:hover{transform:scale(1.1)}.time-label{color:#38bdf8;min-width:42px;font-size:13px}.time-label.right{color:#ffffff80}.timeline-slider{appearance:none;cursor:pointer;background:#ffffff1a;border-radius:10px;flex:1;height:5px}.timeline-slider::-webkit-slider-thumb{appearance:none;background:#38bdf8;border-radius:50%;width:14px;height:14px;margin-top:-4px;box-shadow:0 0 8px #38bdf8cc}.expand-btn{opacity:.6;cursor:pointer;font-size:14px}.expand-btn:hover{opacity:1}.map-section{align-items:flex-start;gap:16px;display:flex}.card{margin-bottom:16px}.map-wrapper{aspect-ratio:1;background:linear-gradient(145deg,#020617,#020617);border:1px solid #ffffff14;border-radius:10px;width:100%;height:auto;max-height:calc(100vh - 180px);margin:0 auto;position:relative;overflow:hidden;box-shadow:0 20px 60px #000c,0 0 50px #3b82f633}.insights-card{width:100%;max-height:auto;scrollbar-width:none;background:linear-gradient(145deg,#1e293b,#0b1220);border:1px solid #ffffff14;border-radius:14px;flex-direction:column;height:100%;padding:6px;display:flex;overflow:visible;box-shadow:0 15px 40px #000000b3,inset 0 0 15px #6366f10d}.insights-card::-webkit-scrollbar{width:4px}.insights-card::-webkit-scrollbar-track{background:0 0}.insights-card::-webkit-scrollbar-thumb{background:#fff3;border-radius:10px}.insights-card::-webkit-scrollbar-thumb:hover{background:#ffffff59}.insights-card{scrollbar-width:thin;scrollbar-color:#fff3 transparent}.detail-item{padding:6px 8px;font-size:13px}.detail-box{font-size:12px}.card{color:#fff}.card h2{color:#fff;margin-bottom:8px}.map-container{justify-content:center;align-items:flex-start;width:100%;min-width:0;height:100%;display:flex}.container>*{min-width:0}.insights-container{flex-shrink:0;width:100%;min-width:260px;max-width:320px;height:100%;max-height:calc(100vh - 28px);overflow-y:auto}.card p{color:#ffffffe6}.card b{color:#fff}.right-panel{flex-direction:column;justify-content:flex-start;align-items:center;gap:14px;width:100%;height:100%;display:flex}.controls-card{width:100%}.dropdown{color:#fff;background:#020617;border:1px solid #334155;border-radius:6px;width:90%;height:38px;margin-bottom:8px;padding:6px}.dropdown:focus{border:1px solid #38bdf8}.left-panel{flex-direction:column;grid-column:2;gap:16px;width:100%;min-width:240px;max-width:280px;height:100%;max-height:calc(100vh - 28px);display:flex;overflow:hidden}.details-card{background:linear-gradient(145deg,#1e293b,#0b1220);border:1px solid #ffffff14;border-radius:14px;padding:14px;box-shadow:0 10px 30px #0009,inset 0 0 10px #ffffff0a}.details-card h3{justify-content:flex-start;align-items:center;gap:8px;margin-bottom:14px;font-size:18px;font-weight:600;display:flex}.detail-item{background:#ffffff0a;border-radius:10px;justify-content:space-between;margin-bottom:8px;padding:10px 12px;font-size:13px;display:flex}.detail-item span{color:#fff9;font-size:13px}.details-footer{border-top:1px solid #ffffff14;justify-content:space-between;margin-top:10px;padding-top:10px;display:flex}.footer-item{opacity:.9;align-items:center;gap:6px;font-size:13px;display:flex}.detail-item b{color:#38bdf8;font-size:13px;font-weight:600}.details-card:hover,.insights-card:hover{transform:translateY(-2px);box-shadow:0 15px 40px #000000b3,0 0 20px #3b82f633}.bar-item{justify-content:flex-start;align-items:center;gap:8px;margin-bottom:10px;display:flex}.bar-item span{width:80px;font-size:16px}.bar{background:#ffffff1a;border-radius:6px;width:120px;height:6px;overflow:hidden}.bar.small{height:5px}.bar-fill{border-radius:6px;height:100%}.bar-fill.red{background:#ef4444}.bar-fill.green{background:#22c55e}.bar-fill.blue{background:#38bdf8}.bar-item b{text-align:right;width:20px;font-size:16px}.bar-item span{width:70px}.bar-item b{margin-left:30px}.sub-title{opacity:.7;text-align:left;width:100%;margin:12px 0 6px;font-size:16px}.zone-item span{text-align:left;width:100%}.zone-item{flex-direction:column;margin-bottom:6px;font-size:16px;display:flex}.insight-text{opacity:.9;background:#ffffff0d;border-radius:6px;margin-bottom:6px;padding:6px 8px;font-size:16px}.section-block{width:100%;margin-top:14px}.section-title{opacity:.7;text-align:left;margin-bottom:6px;font-size:13px;font-weight:500}.section-block{width:100%;margin-top:12px;padding-left:2px}.section-block.compact{margin-top:6px}.zone-line{justify-content:flex-start;align-items:center;gap:8px;margin-bottom:6px;font-size:16px;display:flex}.zone-rank{opacity:.6;width:20px;font-size:16px}.zone-name{text-align:left;font-size:16px}.controls-card{border-radius:10px 0 0 10px}.insight-metric{background:#ffffff0d;border-radius:10px;justify-content:space-between;align-items:center;margin-bottom:10px;padding:10px 12px;font-size:16px;font-weight:500;display:flex}.insight-metric span{opacity:.7}.insight-metric b{font-weight:600}.controls-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(145deg,#1e293b,#0f172a);border:1px solid #ffffff14;border-radius:10px;flex:1;align-items:center;width:100%;max-height:100%;padding:10px;transition:all .25s;overflow-y:auto;box-shadow:0 15px 40px #000000b3,inset 0 0 12px #ffffff0a}.controls-card:hover{transform:translateY(-2px);box-shadow:0 20px 50px #000c,0 0 20px #3b82f633}.controls-title{justify-content:flex-start;margin-bottom:12px;font-size:18px;font-weight:600;display:flex}.controls-group{flex-direction:column;font-size:16px;display:flex}.controls-group label{cursor:pointer;opacity:.9;align-items:center;transition:all .2s;display:flex}.controls-group label:hover{opacity:1;transform:translate(2px)}.section-title{opacity:.6;margin-bottom:8px;font-size:13px}.controls-section{border-top:1px solid #ffffff0d;margin-top:12px;padding-top:10px}.controls-select{color:#fff;background:#020617;border:1px solid #ffffff1a;border-radius:8px;width:100%;margin-bottom:10px;padding:8px}.control-item{cursor:pointer;align-items:center;gap:10px;padding:6px 4px;font-size:14px;transition:all .2s;display:flex}.control-item input{display:none}.custom-checkbox{background:0 0;border:2px solid #fff3;border-radius:4px;width:16px;height:16px;transition:all .2s;position:relative}.control-item:hover{opacity:1;transform:translate(3px)}.control-item:hover .custom-checkbox{border-color:#38bdf8}.control-item input:checked+.custom-checkbox{background:#38bdf8;border-color:#38bdf8}.control-item input:checked+.custom-checkbox:after{content:"";border:2px solid #020617;border-width:0 2px 2px 0;width:4px;height:8px;position:absolute;top:1px;left:4px;transform:rotate(45deg)}.search-container{width:98%;padding:6px 6px 6px 15px;position:relative}.search-input{color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0f172a99;border:1px solid #ffffff14;border-radius:10px;outline:none;width:100%;padding:10px 36px 10px 12px;font-size:14px;transition:all .25s}.search-input::placeholder{color:#fff6}.search-input:focus{background:#0f172acc;border-color:#38bdf8;box-shadow:0 0 0 1px #38bdf84d,0 0 12px #38bdf866}.search-icon{opacity:.6;pointer-events:none;font-size:16px;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.search-container:hover .search-input{border-color:#fff3}.sidebar{flex-direction:column;height:100%;display:flex}.sidebar-header{z-index:5;margin-bottom:10px;padding:8px 8px 10px;position:sticky;top:0}.matches-list{flex:1;padding-right:4px;overflow-y:auto}.matches-list::-webkit-scrollbar{width:6px}.matches-list::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:10px}.matches-list:before,.matches-list:after{content:"";pointer-events:none;z-index:2;height:12px;position:sticky;left:0;right:0}.matches-list:before{background:linear-gradient(#020617,#0000);top:0}.matches-list:after{background:linear-gradient(#0000,#020617);bottom:0}.bar-item span,.zone-line,.zone-name,.insight-metric,.bar-item b,.zone-rank{font-size:13px}.details-card h3,.controls-title,.insights-card h3{font-size:18px;font-weight:600}.detail-item,.control-item{line-height:1.4}.insight-block{background:#ffffff0a;border-radius:10px;margin-bottom:12px;padding:12px}.insight-title{color:#38bdf8;margin-bottom:6px;font-size:14px;font-weight:600}.insight-desc{margin-bottom:4px;font-size:13px}.insight-reason{opacity:.7;margin-bottom:6px;font-size:12px}.insight-action{color:#22c55e;font-size:12px}.hero-features{color:#f7f7f8;justify-content:center;gap:20px;margin:20px 0;font-size:14px;display:flex}.hero-features div{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffff14;border:1px solid #ffffff1f;border-radius:999px;padding:8px 14px;transition:all .2s}.hero-features div:hover{background:#ffffff1f;transform:translateY(-2px)}.hero-preview{margin-top:30px;position:relative}.hero-preview:after{content:"";filter:blur(20px);background:radial-gradient(circle,#38bdf840,#0000);width:60%;height:40px;position:absolute;bottom:-20px;left:50%;transform:translate(-50%)}.hero-preview img{opacity:.9;border-radius:16px;width:800px;transition:transform .3s;box-shadow:0 25px 70px #0009}.hero-preview img:hover{transform:scale(1.06)}@media (width<=1200px){.insights-container{display:none}}@media (width<=768px){.container{flex-direction:column;height:auto;padding:10px;display:flex}.main{flex-direction:column}.sidebar,.left-panel,.insights-container{height:100%;display:none}.timeline-bar{gap:8px;padding:8px}.play-btn{width:28px;height:28px}.time-label{font-size:11px}.title{font-size:clamp(26px,6vw,40px)}.subtitle{font-size:clamp(14px,3vw,16px)}.hero-preview img{width:90vw}}@media (width<=480px){.timeline-bar{flex-wrap:wrap}.time-label{display:none}.hero-features{flex-direction:column;gap:10px}}.landing{min-height:100dvh}@media (width<=768px){.hero{margin-top:0;padding:20px}.hero-features{flex-wrap:wrap;justify-content:center}.container{flex-direction:column;min-height:100vh;display:flex}}@media (width<=1400px){.container{grid-template-columns:220px 240px 1fr 260px}}