:root{--font-display: "Outfit", sans-serif;--font-sans: "Inter", sans-serif;--bg-dark: #dcecfb;--bg-dark-rgb: 220, 236, 251;--primary-glow: #00f2ff;--primary-glow-rgb: 0, 242, 255;--secondary-glow: #a855f7;--secondary-glow-rgb: 168, 85, 247;--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--glass-bg: rgba(6, 12, 32, .55);--glass-border: rgba(255, 255, 255, .06);--glass-border-active: rgba(0, 242, 255, .25);--glass-shadow: rgba(0, 0, 0, .6);--transition-speed: .3s;--border-radius: 16px}*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}body,html{width:100%;height:100%;overflow:hidden;background-color:var(--bg-dark);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}#canvas-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.vignette{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,transparent 55%,rgba(220,236,251,.15) 85%,rgba(220,236,251,.4) 100%);pointer-events:none;z-index:2}#labels-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:5;pointer-events:none}.building-label{position:absolute;transform:translate(-50%,-100%);background:#060c20d9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-radius:20px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.85rem;font-weight:700;color:var(--text-primary);cursor:pointer;pointer-events:auto;box-shadow:0 4px 15px #00000080;transition:width .3s cubic-bezier(.16,1,.3,1),border-radius .3s cubic-bezier(.16,1,.3,1),background .3s ease,border-color .3s ease,box-shadow .3s ease,color .3s ease;z-index:10;overflow:hidden;white-space:nowrap}.building-label:after{content:"";position:absolute;bottom:-4px;left:50%;transform:translate(-50%) rotate(45deg);width:8px;height:8px;background:#060c20d9;border-right:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);z-index:-1;transition:border-color .3s ease,background .3s ease}.label-number{display:inline-block;min-width:16px;text-align:center;transition:margin .3s cubic-bezier(.16,1,.3,1)}.label-text{display:inline-block;opacity:0;max-width:0;font-weight:500;font-size:.8rem;overflow:hidden;transition:opacity .15s ease,max-width .3s cubic-bezier(.16,1,.3,1),margin .3s cubic-bezier(.16,1,.3,1)}.building-label:hover,.building-label.active{width:200px;border-radius:10px;border-color:var(--primary-glow);box-shadow:0 0 15px rgba(var(--primary-glow-rgb),.3);color:var(--primary-glow);background:#060c20f2}.building-label:hover:after,.building-label.active:after{border-color:var(--primary-glow);background:#060c20f2}.building-label:hover .label-text,.building-label.active .label-text{opacity:1;max-width:150px;margin-left:8px}.building-label.active{background:#00f2ff1f;border-color:var(--primary-glow);color:var(--primary-glow);box-shadow:0 0 20px rgba(var(--primary-glow-rgb),.25);font-weight:700}.building-label.active:after{background:#00f2ff1f;border-right:1px solid var(--primary-glow);border-bottom:1px solid var(--primary-glow)}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);box-shadow:0 8px 32px 0 var(--glass-shadow);border-radius:var(--border-radius);transition:border var(--transition-speed) ease,box-shadow var(--transition-speed) ease}.glass-panel:hover{border-color:#ffffff1a}#ui-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:24px;opacity:1;transition:opacity .5s ease}#ui-wrapper.hidden{opacity:0;pointer-events:none}header,aside,.ui-button,.nav-arrow-btn,.help-overlay{pointer-events:auto}.loader-container{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--bg-dark);z-index:100;display:flex;align-items:center;justify-content:center;transition:opacity .8s cubic-bezier(.16,1,.3,1)}.loader-container.fade-out{opacity:0;pointer-events:none}.loader-content{text-align:center;max-width:420px;width:90%;padding:40px;border-radius:var(--border-radius);background:#060c2066;border:1px solid rgba(255,255,255,.03);box-shadow:0 20px 50px #00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.logo-glow{font-family:var(--font-display);font-size:3.5rem;font-weight:800;letter-spacing:-2px;background:linear-gradient(135deg,var(--primary-glow),var(--secondary-glow));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:20px;filter:drop-shadow(0 0 15px rgba(0,242,255,.35));animation:logo-pulse 2s infinite ease-in-out}.loader-title{font-family:var(--font-display);font-size:1.5rem;font-weight:600;margin-bottom:8px;color:var(--text-primary)}.loader-subtitle{font-size:.875rem;color:var(--text-secondary);margin-bottom:30px}.progress-bar-container{width:100%;height:6px;background:#ffffff0d;border-radius:100px;overflow:hidden;margin-bottom:12px;box-shadow:inset 0 1px 3px #0003}.progress-bar{width:0%;height:100%;background:linear-gradient(90deg,var(--primary-glow),var(--secondary-glow));border-radius:100px;box-shadow:0 0 10px #00f2ff80;transition:width .2s ease-out}.progress-text{font-size:.875rem;font-family:var(--font-display);font-weight:600;color:var(--primary-glow);text-shadow:0 0 8px rgba(0,242,255,.3)}.top-bar{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;height:70px;margin-bottom:20px}.logo-area{display:flex;align-items:center;gap:10px}.pulse-dot{width:8px;height:8px;background-color:var(--primary-glow);border-radius:50%;box-shadow:0 0 8px var(--primary-glow);position:relative}.pulse-dot:after{content:"";position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border:1px solid var(--primary-glow);border-radius:50%;animation:dot-pulse 2s infinite ease-out}.logo-text{font-family:var(--font-display);font-weight:700;font-size:1.35rem;letter-spacing:-.5px}.logo-number{color:var(--primary-glow);text-shadow:0 0 10px rgba(0,242,255,.4)}.controls-area{display:flex;align-items:center;gap:12px}.ui-button{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:12px;color:var(--text-primary);display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;font-family:var(--font-display);font-weight:500;font-size:.9rem;cursor:pointer;transition:all var(--transition-speed) cubic-bezier(.16,1,.3,1);outline:none}.ui-button:hover{background:#ffffff14;border-color:#fff3;transform:translateY(-2px)}.ui-button:active{transform:translateY(0)}.btn-glow{background:#00f2ff0f;border-color:#00f2ff33;color:var(--primary-glow)}.btn-glow:hover{background:#00f2ff1f;border-color:var(--primary-glow);box-shadow:0 0 15px #00f2ff40}.btn-glow.touring{background:#a855f726;border-color:var(--secondary-glow);color:#e9d5ff;box-shadow:0 0 15px #a855f759;animation:tour-pulse 1.5s infinite alternate ease-in-out}.detail-drawer{position:absolute;top:114px;left:24px;width:400px;height:calc(100vh - 168px);z-index:10;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transition:transform .5s cubic-bezier(.16,1,.3,1),border-color var(--transition-speed) ease;will-change:transform}.detail-drawer.collapsed{transform:translate(-430px)}.drawer-header{padding:24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.04)}.year-badge{background:linear-gradient(135deg,#00f2ff26,#a855f726);border:1px solid rgba(0,242,255,.3);border-radius:8px;padding:4px 12px;font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--primary-glow);text-shadow:0 0 8px rgba(0,242,255,.3)}.milestone-counter{font-family:var(--font-display);font-size:.9rem;font-weight:500;color:var(--text-secondary)}#current-index{color:var(--text-primary);font-weight:700}.drawer-content{padding:24px;flex:1;display:flex;flex-direction:column;gap:16px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.05) transparent}.drawer-content::-webkit-scrollbar{width:4px}.drawer-content::-webkit-scrollbar-track{background:transparent}.drawer-content::-webkit-scrollbar-thumb{background:#ffffff0d;border-radius:10px}.drawer-content::-webkit-scrollbar-thumb:hover{background:#ffffff26}.milestone-title{font-family:var(--font-display);font-size:1.65rem;font-weight:700;line-height:1.25;color:var(--text-primary)}.milestone-subtitle{font-family:var(--font-display);font-size:.95rem;font-weight:500;color:var(--primary-glow);letter-spacing:.5px;text-transform:uppercase;margin-top:-8px}.description-container{margin-top:4px;line-height:1.6;font-size:.925rem;color:var(--text-secondary);white-space:pre-line;transition:opacity .3s ease}.fact-box{background:#ffffff05;border:1px solid rgba(255,255,255,.03);border-radius:12px;padding:16px;display:flex;gap:12px;margin-top:auto;align-items:flex-start;transition:all var(--transition-speed) ease}.fact-box:hover{background:#ffffff0a;border-color:#a855f726}.fact-icon{display:flex;align-items:center;justify-content:center;background:#a855f71f;border-radius:8px;padding:6px;color:var(--secondary-glow);box-shadow:0 0 10px #a855f71a}.fact-icon span{font-size:1.25rem}.fact-content{flex:1}.fact-title{font-family:var(--font-display);font-size:.85rem;font-weight:600;text-transform:uppercase;color:var(--text-primary);margin-bottom:4px;letter-spacing:.5px}.fact-text{font-size:.85rem;line-height:1.45;color:var(--text-secondary)}.drawer-footer{padding:18px 24px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.04)}.nav-arrow-btn{background:#ffffff05;border:1px solid rgba(255,255,255,.05);color:var(--text-primary);padding:8px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-speed) ease}.nav-arrow-btn:hover{background:#00f2ff0d;border-color:#00f2ff4d;color:var(--primary-glow)}.nav-instruction{font-size:.75rem;color:var(--text-muted);font-family:var(--font-display);letter-spacing:.5px}.help-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:101;padding:32px;max-width:360px;width:90%;text-align:center;box-shadow:0 12px 48px #000c}.help-overlay.hidden{display:none!important}.help-content h3{font-family:var(--font-display);font-size:1.35rem;margin-bottom:20px;color:var(--primary-glow)}.help-content ul{list-style:none;text-align:left;margin-bottom:24px;display:flex;flex-direction:column;gap:12px}.help-content li{font-size:.9rem;color:var(--text-secondary);display:flex;justify-content:space-between}.mouse-icon{font-weight:600;color:var(--text-primary)}.help-content button{width:100%}@keyframes logo-pulse{0%,to{filter:drop-shadow(0 0 12px rgba(0,242,255,.25))}50%{filter:drop-shadow(0 0 20px rgba(0,242,255,.5))}}@keyframes dot-pulse{0%{transform:scale(.8);opacity:.5}50%{transform:scale(1.8);opacity:.15}to{transform:scale(2.5);opacity:0}}@keyframes tour-pulse{0%{box-shadow:0 0 8px #a855f740}to{box-shadow:0 0 18px #a855f799}}@media (max-width: 1024px){#ui-wrapper{padding:16px}.top-bar{padding:12px 16px;height:60px}.detail-drawer{left:16px;top:92px;width:340px;height:calc(100vh - 120px)}}@media (max-width: 768px){#ui-wrapper{padding:12px;flex-direction:column;justify-content:space-between}.top-bar{height:auto;padding:10px 14px;flex-wrap:wrap;gap:8px}.logo-text{font-size:1.15rem}.controls-area{width:auto;justify-content:flex-end;gap:8px}.ui-button{padding:8px 12px;font-size:.8rem;border-radius:8px}.btn-text{display:none}.detail-drawer{position:relative;top:auto;left:auto;width:100%;height:48%;margin-top:auto;margin-bottom:0;transform:none;z-index:10}.detail-drawer.collapsed{transform:translateY(110%)}.drawer-content{padding:16px;gap:12px}.milestone-title{font-size:1.35rem}.fact-box{padding:10px;margin-top:8px}.building-label{font-size:.75rem;padding:4px 10px}}.milestone-title,.milestone-subtitle,.description-container,.fact-box,.year-badge{transition:opacity .22s cubic-bezier(.25,1,.5,1),transform .22s cubic-bezier(.25,1,.5,1);opacity:1;transform:translateY(0)}.text-fade-out{opacity:0!important;transform:translateY(8px)!important}