:root{--hsl-blue: #007AC9;--hsl-tram-green: #00985F;--hsl-train-purple: #8C4799;--hsl-metro-orange: #FF6319;--hsl-ferry-blue: #00B9E4;--hsl-light-blue: #E9F6FA;--text-primary: #0f172a;--text-secondary: #64748b;--bg-overlay: rgba(0, 0, 0, .4);--bg-fab: rgba(255, 255, 255, .8);--bg-fab-active: #f1f5f9;--shadow-fab: 0 10px 15px -3px rgba(0, 0, 0, .1);--shadow-card: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--ease-spring: cubic-bezier(.175, .885, .32, 1.275);--ease-smooth: .3s ease-in-out;font-family:Gotham Rounded,Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#fcfeff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}html{height:100%;width:100%;overflow:hidden;position:fixed}body{margin:0;width:100%;height:100%;position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;touch-action:none}#root{position:absolute;inset:0;overflow:hidden}.h-full{height:100%}.w-full{width:100%}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1 1 0%}.relative{position:relative}.overflow-hidden{overflow:hidden}.backdrop-blur{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.user-marker{width:20px;height:20px;background-color:var(--hsl-blue);border:3px solid white;border-radius:50%;box-shadow:0 0 10px #007ac980;z-index:5}.vehicle-marker{width:36px;height:36px;position:relative;display:flex;align-items:center;justify-content:center;background-color:var(--hsl-blue);border:none;border-radius:50%;box-shadow:0 4px 6px #0000004d;z-index:1}.vehicle-marker{animation:fadeIn .15s ease-out;animation-fill-mode:both}.vm-rotation-wrapper{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out}.vehicle-marker .vm-rotation-wrapper .vm-arrow{position:absolute;top:-8px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:7px solid var(--hsl-blue)}.vehicle-marker .vm-rotation-wrapper .vm-content{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);font-weight:700;display:flex;align-items:center;justify-content:center;width:100%;height:100%;transform-origin:center;transition:transform .3s ease-in-out}.vehicle-marker .vm-content.text-lg{font-size:16px;letter-spacing:-.5px}.favorite-item.text-lg{font-size:19px;letter-spacing:-.5px}.vehicle-marker .vm-content.text-sm{font-size:14px;letter-spacing:-.5px}.favorite-item.text-sm{font-size:19px;letter-spacing:-.5px}.variant-bus{--variant-color: var(--hsl-blue)}.variant-tram{--variant-color: var(--hsl-tram-green)}.variant-rail,.variant-train{--variant-color: var(--hsl-train-purple)}.variant-subway,.variant-metro{--variant-color: var(--hsl-metro-orange)}.variant-ferry{--variant-color: var(--hsl-ferry-blue)}.vehicle-marker{background-color:var(--variant-color)}.vehicle-marker .vm-rotation-wrapper .vm-arrow{border-bottom-color:var(--variant-color)}.text-hsl-bus{color:var(--hsl-blue)}.text-hsl-tram{color:var(--hsl-tram-green)}.text-hsl-train{color:var(--hsl-train-purple)}.text-hsl-subway,.text-hsl-metro{color:var(--hsl-metro-orange)}.favorite-item{background-color:#007ac9cc;background-color:color-mix(in srgb,var(--variant-color),transparent 20%);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.1)}.vehicle-marker.variant-upcoming .vm-arrow{display:none}.departure-time-bubble{position:absolute;bottom:-15px;left:50%;transform:translate(-50%);background:#fff;color:#666;font-size:12px;font-weight:500;line-height:15px;padding:0 3px;border-radius:3px;white-space:nowrap;box-shadow:0 2px 4px #0000004d;z-index:20;pointer-events:none;border:1px solid rgba(255,255,255,.3)}.fab-base,.search-fab,.recenter-fab{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--bg-fab);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:var(--shadow-fab);border:none;cursor:pointer;transition:all .3s var(--ease-spring);padding:0}.fab-base:hover,.search-fab:hover,.recenter-fab:hover{transform:scale(1.05);opacity:1}.fab-base:active,.search-fab:active,.recenter-fab:active{transform:scale(.95)}.search-fab,.recenter-fab{position:absolute;right:1.5rem;width:3.5rem;height:3.5rem}.search-fab{bottom:1.5rem;z-index:60}.search-fab.open{transform:rotate(90deg);background-color:var(--bg-fab-active)}.search-fab-icon{width:2rem;height:2rem}.search-fab-icon.close-icon{color:var(--text-primary)}.search-fab-icon.open-icon{color:var(--hsl-blue)}.recenter-fab{bottom:6rem;z-index:40}.recenter-fab-icon{width:1.8rem;height:1.8rem;color:var(--hsl-blue);transition:all .3s ease}.recenter-fab.locked .recenter-fab-icon{fill:var(--hsl-blue)}.recenter-fab.free .recenter-fab-icon{fill:none;color:var(--hsl-blue)}.favorites-list-container{position:absolute;bottom:1.5rem;left:0;right:5.5rem;padding-left:1rem;display:flex;flex-direction:row;flex-wrap:wrap-reverse;justify-content:flex-start;gap:.75rem;z-index:30;pointer-events:none;min-height:3.5rem;align-items:center;align-content:flex-end;max-height:calc(100vh - 10rem);content-visibility:auto}.favorites-list-container::-webkit-scrollbar{display:none}@keyframes fadeInSlideUp{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.favorite-item{animation:fadeInSlideUp .2s ease-out;transition:all .2s ease-in-out}.onboarding-guides-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:50}.guide-bubble{position:absolute;background-color:#fff;color:var(--hsl-blue);padding:.5rem 1rem;border-radius:9999px;box-shadow:0 4px 6px #0000001a,0 2px 4px #0000000f;font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:.5rem;pointer-events:auto;animation:zoomIn .2s ease-out backwards}.search-overlay-container{position:absolute;bottom:0;left:0;width:100%;padding:1rem;padding-bottom:0;pointer-events:none;z-index:55;display:flex;flex-direction:column;justify-content:flex-end;animation:fadeIn .15s ease-out}.search-overlay-container *{pointer-events:auto}.guide-1-pos{bottom:2.05rem;right:5.5rem}.guide-2-pos{bottom:5.5rem;left:1rem;transform:none}.search-fab.centered{inset:50% auto auto 50%;transform:translate(-50%,-50%)}.favorite-item{width:3rem;height:3rem;border-radius:15px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 6px -1px #0000001a;font-weight:700;line-height:1;pointer-events:auto;user-select:none;-webkit-user-select:none;touch-action:manipulation}.grayscale{filter:grayscale(100%)}.opacity-60{opacity:.6}.search-overlay-container{position:absolute;inset:0 0 auto;height:100%;z-index:55;display:flex;flex-direction:column;justify-content:flex-start;pointer-events:none;background-color:var(--bg-overlay);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:fadeIn .15s ease-out}.search-content-wrapper{width:100%;max-width:28rem;margin:0 auto;padding:1rem;pointer-events:auto}.search-results-wrapper{margin-top:1rem;margin-bottom:0;display:flex;flex-direction:column}.search-results-list{background-color:#fffffff2;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:1rem;box-shadow:var(--shadow-card);overflow:hidden;max-height:50vh;overflow-y:auto}.search-result-item{width:100%;padding:1rem;text-align:left;border-bottom:1px solid #f3f4f6;display:flex;align-items:center;gap:.75rem;background:none;border:none;cursor:pointer;transition:background-color .2s;color:var(--text-primary)}.search-result-item:last-child{border-bottom:none}.search-result-item:hover{background-color:#eff6ff}.search-result-item.added{opacity:.5;cursor:default;background-color:#f9fafb}.search-empty-state{padding:2rem;text-align:center;color:#94a3b8;font-style:italic}.search-overlay-container,.search-content-wrapper,.search-results-list,.search-input-container{box-sizing:border-box}.search-results-list{max-height:40vh}.transport-icon{width:1.5rem;height:1.5rem;object-fit:contain}.route-icon{font-size:1.5rem}.route-info{display:flex;flex-direction:column}.route-short-name{font-weight:700;color:var(--text-primary)}.route-long-name{font-size:.75rem;color:var(--text-secondary)}.badge-added{margin-left:auto;font-size:.75rem;font-weight:600;color:#16a34a;background-color:#dcfce7;padding:.25rem .5rem;border-radius:9999px}.search-input-container{background-color:#fff;border-radius:9999px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;display:flex;align-items:center;padding:.25rem}.search-icon-wrapper{padding-left:1rem;color:#94a3b8;display:flex;align-items:center}.search-input{flex:1;background:transparent;border:none;font-size:1.125rem;padding:.75rem;color:var(--text-primary);outline:none}.search-input::placeholder{color:#94a3b8}.confirmation-modal-overlay{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background-color:var(--bg-overlay);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:fadeIn .2s ease-out}.confirmation-modal-content{background-color:#fff;color:#111827;font-weight:500;padding:1.5rem;border-radius:1rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;max-width:20rem;width:100%;margin:0 1rem;display:flex;flex-direction:column;gap:1rem;animation:zoomIn .2s ease-out}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.highlight-text{font-weight:700}.modal-actions{display:flex;gap:.75rem;margin-top:.5rem}.modal-btn{flex:1;padding:.625rem 1rem;border-radius:.75rem;font-weight:600;transition:transform .1s;border:none;cursor:pointer}.modal-btn:active{transform:scale(.95)}.cancel-btn{background-color:#f3f4f6;color:#374151}.remove-btn{background-color:var(--hsl-blue);color:#fff;box-shadow:0 4px 6px -1px #007ac94d}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-fadeIn{animation:fadeIn .2s ease-out forwards}.animate-slideUp{animation:slideUp .3s cubic-bezier(.16,1,.3,1) forwards;will-change:transform,opacity}.info-button{position:absolute;top:.9rem;left:.4rem;width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:var(--bg-fab);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--hsl-blue);box-shadow:var(--shadow-fab);border:none;cursor:pointer;z-index:80;transition:all .3s var(--ease-spring)}.info-button:hover{transform:scale(1.05);opacity:1}.info-button:active{transform:scale(.95)}.info-button.open{transform:rotate(90deg);background-color:var(--bg-fab-active);opacity:1}.info-icon{transition:transform .3s}.info-icon.close-icon{color:var(--text-primary)}.info-icon.open-icon{color:var(--hsl-blue)}.info-modal-overlay{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:1rem}.info-modal-backdrop{position:fixed;inset:0;background-color:var(--bg-overlay);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:opacity var(--ease-smooth)}.info-modal-container{background-color:#fff;border-radius:1rem;box-shadow:var(--shadow-card);width:100%;max-width:20rem;padding:1.5rem;color:var(--text-primary);position:relative;z-index:10;transition:opacity var(--ease-smooth);will-change:opacity}.info-modal-header{text-align:center;margin-bottom:2rem;margin-top:1rem}.info-app-title{font-size:1.25rem;font-weight:700;letter-spacing:-.025em;color:#0f172a;margin:0}.info-features-list{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2rem;padding:0 1rem}.feature-desc{font-size:1rem;font-weight:400;color:#475569;margin:0;line-height:1.4;letter-spacing:.025rem}.info-pwa-box{background-color:#f8fafc;border:1px solid #f1f5f9;border-radius:.5rem;padding:1rem;margin-bottom:1.5rem}.pwa-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;margin:0 0 .5rem}.pwa-desc{font-size:.875rem;color:#334155;line-height:1.5;margin:0}.info-danger-zone{border-top:1px solid #f1f5f9;padding-top:1rem;text-align:center}.btn-reset-app{font-size:.75rem;font-weight:500;color:#ef4444;background:none;border:none;cursor:pointer;padding:.5rem 1rem;transition:color .2s}.btn-reset-app:hover{color:#dc2626}.reset-desc{font-size:.625rem;color:#94a3b8;margin-top:.25rem}.info-title-gradient{background:linear-gradient(to right,var(--hsl-blue),#00985F);-webkit-background-clip:text;background-clip:text;color:transparent}.feature-icon-bg{width:2rem;height:2rem;border-radius:9999px;background-color:#f1f5f9;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px #0000000d}.pwa-guide-box{background-color:#f8fafc;border-radius:.75rem;padding:1rem;border:1px solid rgba(0,122,201,.1)}.danger-zone{border-top:1px solid #e2e8f0}.reset-btn{width:100%;padding:.75rem 1rem;border-radius:.75rem;background-color:#ef44441a;color:#ef4444;font-size:.875rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:background-color .2s;border:none;cursor:pointer}.reset-btn:hover{background-color:#ef444433}.text-brand-primary{color:var(--hsl-blue)}.opacity-0{opacity:0}.opacity-100{opacity:1}.text-status-error{color:#ef4444}.text-slate-500{color:#64748b}.text-slate-400{color:#94a3b8}@media(orientation:landscape)and (max-height:600px){.info-modal-container{display:flex;flex-direction:row;gap:2rem;max-width:42rem;width:90vw;max-height:85vh;overflow-y:auto;padding:2rem;align-items:flex-start}.info-section-main{flex:1;display:flex;flex-direction:column;justify-content:flex-start}.info-section-secondary{flex:1;display:flex;flex-direction:column;gap:1.5rem;margin-top:.5rem}.info-modal-header{text-align:left;margin-top:0;margin-bottom:1.5rem}.info-features-list{padding:0;margin-bottom:0}.info-pwa-box{margin-bottom:0}.info-danger-zone{margin-top:0}}.landscape-search-blocker{display:flex;position:fixed;inset:0;background:#000000e6;z-index:1001;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.landscape-blocker-content{text-align:center;color:#fff;padding:2rem;max-width:400px}.rotate-icon{margin-bottom:1rem;animation:rotatePhone 2s ease-in-out infinite}.rotate-icon svg{filter:drop-shadow(0 4px 12px rgba(255,255,255,.3))}.landscape-blocker-content h3{font-size:1.25rem;font-weight:600;margin-bottom:.5rem;color:#fff}.landscape-blocker-content p{font-size:1rem;color:#fffc;margin:0}@keyframes rotatePhone{0%,to{transform:rotate(0)}25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}}