:root{--phase-pre: #4a6fa5;--phase-a0: #6b8c42;--phase-a: #d4a017;--phase-b: #c44d34;--phase-bridge: #8b5fbf;--phase-c: #2c7873;--phase-b-academic: #9c6b2e;--phase-b-commercial: #a84343;--bg-dark: var(--color-bg, #fafafa);--bg-card: var(--color-surface, #ffffff);--text-primary: var(--color-text, #1a1a1a);--text-secondary: var(--color-text-secondary, #4a5568);--border-radius: var(--radius-lg, 12px);--transition: var(--transition-normal, all .3s ease)}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--color-bg, #fafafa);color:var(--color-text, #1a1a1a);line-height:var(--leading-normal, 1.6);margin:0 auto}.main-content{max-width:1400px;margin:0 auto;width:100%}.hero{padding:var(--space-10) 0 var(--space-6) 0;text-align:center;max-width:800px;margin:0 auto}.hero h1{font-family:var(--font-serif, "Playfair Display", serif);font-weight:500;margin-bottom:var(--space-2, .5rem);background:linear-gradient(90deg,var(--phase-pre),var(--phase-a0),var(--phase-a),var(--phase-b),var(--phase-bridge),var(--phase-c));-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{max-width:800px;margin:0 auto}.controls{display:flex;justify-content:center;margin-bottom:var(--space-6, 30px)}.btn{font-family:var(--font-sans, "Inter", sans-serif);font-weight:600;padding:var(--space-3, .75rem) var(--space-5, 1.5rem);background-color:var(--color-surface, #ffffff);border:2px solid var(--color-border, #e5e5e5);border-radius:var(--border-radius);color:var(--color-text, #1a1a1a);font-size:var(--text-base, 1rem);cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:var(--space-2, .5rem)}.btn:hover{background-color:var(--color-primary-light, #f8f1e8);border-color:var(--color-primary, #8b4513);color:var(--color-primary, #8b4513);transform:translateY(-2px);box-shadow:var(--shadow-md, 0 4px 12px rgba(0, 0, 0, .05))}.btn.active{background-color:var(--color-primary, #8b4513);color:#fff;border-color:var(--color-primary, #8b4513)}.btn:focus-visible{outline:3px solid var(--color-secondary, #a6d05d);outline-offset:3px;box-shadow:var(--shadow-focus, 0 0 0 4px rgba(166, 208, 93, .4))}.roadmap-container{position:relative;overflow-x:auto;padding:var(--space-5, 1.5rem) var(--space-3, .75rem);margin-bottom:var(--space-8, 40px);min-height:600px}.roadmap-overview{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-4, 1rem);width:100%;min-width:1200px}.phase-card{background-color:var(--color-surface, #ffffff);border:1px solid var(--color-border-light, #e2e8f0);border-radius:var(--border-radius);padding:var(--space-5, 1.5rem);display:flex;flex-direction:column;cursor:pointer;transition:var(--transition);border-left:5px solid;position:relative;min-height:220px;box-shadow:var(--shadow-md, 0 4px 12px rgba(0, 0, 0, .05))}.phase-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg, 0 8px 25px rgba(0, 0, 0, .15))}.phase-card.pre-a{border-color:var(--phase-pre);background:linear-gradient(145deg,#4a6fa514,#4a6fa505)}.phase-card.a0{border-color:var(--phase-a0);background:linear-gradient(145deg,#6b8c4214,#6b8c4205)}.phase-card.a{border-color:var(--phase-a);background:linear-gradient(145deg,#d4a01714,#d4a01705)}.phase-card.b{border-color:var(--phase-b);background:linear-gradient(145deg,#c44d3414,#c44d3405)}.phase-card.bridge{border-color:var(--phase-bridge);background:linear-gradient(145deg,#8b5fbf14,#8b5fbf05)}.phase-card.c{border-color:var(--phase-c);background:linear-gradient(145deg,#2c787314,#2c787305)}.phase-b-tracks{display:flex;flex-direction:column;gap:var(--space-2, .5rem);margin-top:var(--space-3, .75rem)}.track-card{padding:var(--space-3, .75rem);border-radius:var(--radius-md, 8px);cursor:pointer;transition:var(--transition);border-left:3px solid}.track-card.academic{background:linear-gradient(145deg,#9c6b2e1f,#9c6b2e0a);border-left-color:var(--phase-b-academic)}.track-card.commercial{background:linear-gradient(145deg,#a843431f,#a843430a);border-left-color:var(--phase-b-commercial)}.track-card:hover{transform:translate(5px);box-shadow:var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .1))}.phase-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-4, 1rem)}.phase-title{font-size:var(--text-lg, 1.125rem);font-weight:700;line-height:var(--leading-snug, 1.375);margin-bottom:var(--space-2, .5rem);color:var(--color-text, #1a1a1a)}.phase-subtitle{font-size:var(--text-sm, .875rem);color:var(--color-text-secondary, #4a5568);margin-bottom:var(--space-3, .75rem);line-height:var(--leading-normal, 1.6)}.phase-stats{font-size:var(--text-sm, .875rem);color:var(--color-text-secondary, #4a5568);margin-top:auto;padding-top:var(--space-4, 1rem);border-top:1px solid var(--color-border, #e5e5e5)}.phase-icon{font-size:1.3rem;color:var(--color-text-light, #6b7280)}.phase-detail-view{display:none;width:100%;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.phase-detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-8, 40px);padding:var(--space-6, 1.5rem);border-radius:var(--border-radius);background:linear-gradient(135deg,var(--color-primary-light, #f8f1e8) 0%,var(--color-surface, #ffffff) 100%);border:1px solid var(--color-border-light, #e2e8f0)}.phase-detail-header h2{font-size:var(--text-3xl, 1.875rem);font-family:var(--font-serif, "Playfair Display", serif);font-weight:500;margin-bottom:var(--space-2, .5rem)}.phase-detail-header p{font-size:var(--text-lg, 1.125rem);color:var(--color-text-secondary, #4a5568);max-width:800px}.back-btn{font-family:var(--font-sans, "Inter", sans-serif);font-weight:600;padding:var(--space-3, .75rem) var(--space-5, 1.5rem);background-color:var(--color-surface, #ffffff);border:2px solid var(--color-border, #e5e5e5);border-radius:var(--border-radius);color:var(--color-text, #1a1a1a);font-size:var(--text-base, 1rem);cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:var(--space-2, .5rem)}.back-btn:hover{background-color:var(--color-primary-light, #f8f1e8);border-color:var(--color-primary, #8b4513);color:var(--color-primary, #8b4513)}.tracks-container{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-8, 3rem);margin-bottom:var(--space-8, 40px)}.track-detail{background-color:var(--color-surface, #ffffff);border:1px solid var(--color-border-light, #e2e8f0);border-radius:var(--border-radius);padding:var(--space-6, 1.5rem);display:flex;flex-direction:column;box-shadow:var(--shadow-md, 0 4px 12px rgba(0, 0, 0, .05))}.track-header{margin-bottom:var(--space-5, 1.5rem);padding-bottom:var(--space-4, 1rem);border-bottom:1px solid}.track-header.academic{border-color:var(--phase-b-academic)}.track-header.commercial{border-color:var(--phase-b-commercial)}.track-header h3{font-size:var(--text-2xl, 1.5rem);font-weight:600;margin-bottom:var(--space-1, .25rem);display:flex;align-items:center;gap:var(--space-3, .75rem)}.track-header.academic h3{color:var(--phase-b-academic)}.track-header.commercial h3{color:var(--phase-b-commercial)}.stages-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:var(--space-6, 2rem);margin-top:var(--space-5, 1.5rem)}.stage-card{background-color:var(--color-surface, #ffffff);border:1px solid var(--color-border-light, #e2e8f0);border-radius:var(--border-radius);padding:var(--space-6, 1.5rem);transition:var(--transition);border-top:4px solid;cursor:pointer;box-shadow:var(--shadow-md, 0 4px 12px rgba(0, 0, 0, .05))}.stage-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg, 0 8px 25px rgba(0, 0, 0, .15))}.stage-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-4, 1rem)}.stage-title{font-size:var(--text-xl, 1.25rem);font-weight:600;line-height:var(--leading-snug, 1.375);color:var(--color-text, #1a1a1a)}.stage-number{font-size:var(--text-sm, .875rem);color:var(--color-text-secondary, #4a5568);background-color:var(--color-bg, #fafafa);padding:var(--space-1, .25rem) var(--space-3, .75rem);border-radius:var(--radius-full, 9999px)}.stage-content ul{margin-left:var(--space-5, 1.5rem);margin-bottom:var(--space-5, 1.5rem)}.stage-content li{margin-bottom:var(--space-2, .5rem);color:var(--color-text-secondary, #4a5568);font-size:var(--text-base, 1rem)}.stage-more{display:inline-block;color:var(--color-primary, #8b4513);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;margin-top:var(--space-3, .75rem);transition:var(--transition)}.stage-more:hover{color:var(--color-primary-dark, #6b3410);text-decoration-thickness:3px}.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000bf;z-index:var(--z-modal, 1000);align-items:center;justify-content:center;padding:var(--space-5, 1.5rem);animation:fadeIn .3s ease}.modal-content{background-color:var(--color-surface, #ffffff);border-radius:var(--border-radius);width:100%;max-width:800px;max-height:90vh;overflow-y:auto;padding:var(--space-8, 3rem);position:relative;animation:slideUp .4s ease;box-shadow:var(--shadow-lg, 0 8px 25px rgba(0, 0, 0, .15))}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-close{position:absolute;top:var(--space-5, 1.5rem);right:var(--space-5, 1.5rem);background:none;border:none;color:var(--color-text, #1a1a1a);font-size:1.8rem;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:var(--transition)}.modal-close:hover{background-color:var(--color-bg, #fafafa);color:var(--color-primary, #8b4513)}.modal-header{margin-bottom:var(--space-6, 2rem);padding-bottom:var(--space-5, 1.5rem);border-bottom:1px solid var(--color-border, #e5e5e5)}.modal-header h3{font-size:var(--text-2xl, 1.5rem);font-weight:600;margin-bottom:var(--space-3, .75rem)}.modal-body ul{margin-left:var(--space-5, 1.5rem);margin-bottom:var(--space-8, 3rem)}.modal-body li{margin-bottom:var(--space-3, .75rem);padding-left:var(--space-2, .5rem);color:var(--color-text-secondary, #4a5568);font-size:var(--text-base, 1rem)}.status-badge{display:inline-block;padding:var(--space-1, .25rem) var(--space-4, 1rem);border-radius:var(--radius-full, 9999px);font-size:var(--text-sm, .875rem);font-weight:600;margin-top:var(--space-3, .75rem)}.status-planned{background-color:#6b8c421a;color:var(--color-success, #48bb78)}@media (max-width: 1200px){.roadmap-overview{grid-template-columns:repeat(3,1fr);min-width:900px}.tracks-container{grid-template-columns:1fr}}@media (max-width: 768px){body{padding:var(--space-4, 1rem)}.hero{padding:var(--space-8) 0 var(--space-6) 0}.hero h1{font-size:var(--text-4xl)}.controls{flex-direction:column;align-items:center}.btn,.back-btn{width:100%;justify-content:center}.roadmap-overview{grid-template-columns:1fr;min-width:400px}.phase-detail-header{flex-direction:column;align-items:flex-start;gap:var(--space-5, 1.5rem)}.stages-container{grid-template-columns:1fr}.modal-content{padding:var(--space-6, 2rem)}.nav-container{flex-direction:column;gap:var(--space-4);text-align:center}.main-nav{gap:var(--space-4)}}@media (max-width: 480px){.hero h1{font-size:var(--text-3xl)}.roadmap-overview{min-width:300px}.stage-card,.track-detail{padding:var(--space-5, 1.5rem)}}