:root{--bg-color:#022c22;--surface-color:#064e3bb3;--surface-border:#ffffff1a;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent-color:#10b981;--accent-hover:#059669;--danger-color:#f43f5e}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);background-image:radial-gradient(circle at 50% 0,#064e3b 0%,#022c22 100%);height:100vh;font-family:Inter,sans-serif;line-height:1.6;overflow:hidden}#root{height:100%}.app-container{flex-direction:column;height:100vh;display:flex}.app-header{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--surface-border);z-index:1000;background:#022c22cc;justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex}.logo{align-items:center;gap:.75rem;display:flex}.logo h1{background:linear-gradient(135deg,#10b981,#34d399);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.5rem;font-weight:800}.logo .icon{width:28px;height:28px;color:var(--accent-color)}.tabs{gap:.5rem;display:flex}.tab-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:.5rem 1rem;font-size:.95rem;font-weight:600;transition:all .2s}.tab-btn:hover{color:var(--text-primary);background:#ffffff0d}.tab-btn.active{color:var(--accent-color);background:#38bdf81a}.content-area{flex:1;position:relative;overflow:hidden}.tab-content{opacity:0;visibility:hidden;width:100%;height:100%;transition:opacity .3s,visibility .3s;position:absolute;top:0;left:0;overflow-y:auto}.tab-content.active{opacity:1;visibility:visible;z-index:10}#map{background:#1a202c;width:100%;height:100%}.map-overlay{background:var(--surface-color);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--surface-border);z-index:1000;border-radius:12px;padding:1.2rem;position:absolute;bottom:30px;left:30px;box-shadow:0 10px 25px #0000004d}.map-overlay h3{margin-bottom:.25rem;font-size:1.1rem}.map-overlay p{color:var(--text-secondary);font-size:.85rem}.passages-container{max-width:800px;margin:2rem auto;padding:0 1rem}.timeline-container{padding-left:3rem;position:relative}.timeline-con.timeline:before{content:"";background:linear-gradient(180deg, var(--accent-color) 0%, #34d399 100%);opacity:.3;z-index:1;width:2px;position:absolute;top:0;bottom:0;left:20px}.timeline-node.anchorage{z-index:2;margin-bottom:2rem;position:relative}.timeline-dot{background:var(--bg-color);border:2px solid var(--accent-color);z-index:3;border-radius:50%;justify-content:center;align-items:center;width:2.2rem;height:2.2rem;font-size:1rem;display:flex;position:absolute;top:.5rem;left:-2.85rem;box-shadow:0 0 10px #38bdf833}.timeline-card{background:var(--surface-color);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--surface-border);border-radius:12px;padding:1.25rem;transition:transform .2s,box-shadow .2s}.timeline-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0003}.timeline-card-header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.timeline-card-header h3{color:var(--text-primary);font-size:1.1rem}.duration-tag{color:var(--accent-color);background:#38bdf81a;border-radius:12px;padding:.2rem .6rem;font-size:.75rem;font-weight:600}.timeline-card-body{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;display:grid}.stat{flex-direction:column;display:flex}.stat span.label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:.75rem}.stat span.value{font-size:.95rem;font-weight:600}.timeline-connector.passage{z-index:2;margin-bottom:2rem;position:relative}.passage-line-container{justify-content:center;align-items:center;width:2.2rem;display:flex;position:absolute;top:0;bottom:0;left:-2.85rem}.passage-dot{z-index:3;background:#064e3b;border:2px solid #34d399;border-radius:50%;justify-content:center;align-items:center;width:1.8rem;height:1.8rem;font-size:.85rem;display:flex;left:-29px;box-shadow:0 0 10px #818cf833}.passage-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#34d39908;border:1px dashed #34d39933;border-radius:12px;align-items:stretch;padding:0;transition:transform .2s,box-shadow .2s;display:flex;overflow:hidden}.passage-card:hover{background:#34d3990d;transform:translateY(-2px);box-shadow:0 8px 20px #0000001a}.passage-header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.passage-header h4{color:#6ee7b7;font-size:1rem}.distance-tag{color:#6ee7b7;background:#34d3991a;border-radius:12px;padding:.2rem .6rem;font-size:.75rem;font-weight:600}.passage-body{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;display:grid}.stats-tab{padding:3rem 2rem}.stats-section-title{color:var(--text-primary);border-bottom:1px solid var(--surface-border);max-width:1200px;margin:2.5rem auto 1.5rem;padding-bottom:.5rem;font-size:1.5rem}.stats-section-title:first-child{margin-top:0}.bento-grid{grid-template-columns:repeat(12,1fr);gap:1.5rem;max-width:1200px;margin:0 auto;display:grid}.col-span-12{grid-column:span 12}.col-span-8{grid-column:span 8}.col-span-6{grid-column:span 6}.col-span-4{grid-column:span 4}.col-span-3{grid-column:span 3}@media (width<=1024px){.col-span-4{grid-column:span 6}.col-span-8{grid-column:span 12}}@media (width<=768px){.bento-grid{flex-direction:column;display:flex}}.stat-card{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#1e293b66;border:1px solid #ffffff0d;border-radius:20px;flex-direction:column;justify-content:center;align-items:flex-start;padding:2rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden;box-shadow:0 4px 20px #0003}.stat-card:hover{background:#1e293b99;border:1px solid #818cf833;transform:translateY(-4px);box-shadow:0 12px 30px #0006}.stat-card:before{content:"";background:linear-gradient(90deg, var(--accent-color), #34d399);width:100%;height:4px;position:absolute;top:0;left:0}.stat-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem;font-size:.9rem;font-weight:600}.stat-value{color:var(--text-primary);margin-bottom:.5rem;font-size:2.5rem;font-weight:800}.stat-desc{color:var(--text-secondary);font-size:.85rem}.header-actions{align-items:center;gap:.75rem;display:flex}.map-link-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:1px solid #ffffff26;border-radius:6px;align-items:center;gap:.25rem;padding:.25rem .5rem;font-size:.7rem;transition:all .2s;display:flex}.map-link-btn:hover{border-color:var(--accent-color);color:var(--accent-color);background:#ffffff0d;box-shadow:0 0 8px #38bdf833}.time-ratio-bar-container{background:var(--surface-color);border:1px solid var(--surface-border);border-radius:12px;max-width:1200px;margin:2rem auto;padding:1.5rem}.time-ratio-bar{background:#ffffff0d;border-radius:8px;height:16px;margin-bottom:1rem;display:flex;overflow:hidden}.ratio-segment.sailing{background:linear-gradient(90deg,#818cf8,#4f46e5);box-shadow:0 0 10px #818cf84d}.ratio-segment.anchored{background:linear-gradient(90deg, var(--accent-color), #0284c7);box-shadow:0 0 10px #38bdf84d}.route-icon{color:#6ee7b7;margin:0 .5rem;display:inline-block}.route-desc{color:#6ee7b7;justify-content:space-between;font-size:.85rem;display:flex}.ratio-labels{color:var(--text-secondary);justify-content:space-between;font-size:.85rem;display:flex}.ratio-labels span{align-items:center;gap:.35rem;font-weight:500;display:flex}.countries-list{flex-wrap:wrap;gap:.75rem;max-width:1200px;margin:0 auto 2rem;display:flex}.country-chip{background:var(--surface-color);border:1px solid var(--surface-border);border-radius:20px;align-items:center;gap:.5rem;padding:.4rem .8rem;font-size:.85rem;transition:transform .2s,border-color .2s;display:flex}.country-chip:hover{border-color:#ffffff40;transform:translateY(-1px)}.country-name{color:var(--text-primary);font-weight:500}.country-count{color:var(--text-secondary);background:#ffffff0d;border-radius:10px;padding:.1rem .4rem;font-size:.75rem}.top-anchorages-list{flex-direction:column;gap:.75rem;max-width:1200px;margin:0 auto 3rem;display:flex}.top-anchorage-item{background:var(--surface-color);border:1px solid var(--surface-border);cursor:pointer;border-radius:12px;align-items:center;padding:1rem;transition:all .2s;display:flex}.top-anchorage-item:hover{border-color:var(--accent-color);background:#38bdf808;transform:translate(4px)}.anchorage-rank{color:var(--accent-color);flex-shrink:0;width:35px;font-size:1.2rem;font-weight:800}.anchorage-info{flex-grow:1}.anchorage-name{color:var(--text-primary);font-size:.95rem;font-weight:600}.anchorage-dates{color:var(--text-secondary);margin-top:.15rem;font-size:.75rem}.anchorage-duration{color:var(--text-primary);background:#ffffff0d;border-radius:8px;flex-shrink:0;padding:.3rem .6rem;font-size:.9rem;font-weight:700}.stat-card.interactive{cursor:pointer;transition:all .2s}.stat-card.interactive:hover{background:#34d3990d;border-color:#34d399;transform:translateY(-5px);box-shadow:0 8px 24px #34d39926}.stat-card.interactive:before{background:linear-gradient(90deg,#34d399,#059669)}.leaflet-container{background:#022c22!important}.leaflet-layer{filter:sepia(30%)hue-rotate(110deg)saturate(150%)brightness(95%)}.leaflet-control-zoom-in,.leaflet-control-zoom-out,.leaflet-control-attribution{filter:invert()hue-rotate(180deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--surface-border);background:var(--surface-color)!important;color:var(--text-primary)!important}.animated-route-flow{pointer-events:none;animation:6s linear infinite flowRoute;stroke:#34d399!important;stroke-dasharray:10 20!important;stroke-opacity:1!important}.animated-route-flow-global{pointer-events:none;animation:6s linear infinite flowRoute;stroke:#10b981!important;stroke-dasharray:8 16!important;stroke-width:4px!important;stroke-opacity:1!important}@keyframes flowRoute{0%{stroke-dashoffset:120px}to{stroke-dashoffset:0}}@media (width<=600px){.logo h1{display:none}}