* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', 'Arial', sans-serif;
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e57c2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1600px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 25px 70px rgba(0,0,0,0.3);
            padding: 45px;
        }
        
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 35px;
            font-size: 2.8em;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.1);
            position: relative;
        }
        
        h1::after {
            content: '🌍 🎼 🏮';
            display: block;
            font-size: 0.5em;
            margin-top: 10px;
            opacity: 0.7;
        }
        
        .intro {
            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
            padding: 30px;
            border-radius: 15px;
            margin-bottom: 45px;
            font-size: 1.15em;
            line-height: 1.9;
            color: #1a237e;
            border: 2px solid rgba(26, 35, 126, 0.1);
        }
        
        .intro strong {
            color: #0d47a1;
            font-size: 1.1em;
        }
        
        .legend {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin: 35px 0;
            flex-wrap: wrap;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 12px;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 500;
        }
        
        .legend-color {
            width: 35px;
            height: 35px;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
        }
        
        .timeline-container {
            position: relative;
            padding: 50px 0;
        }
        
        .period-section {
            margin-bottom: 60px;
            position: relative;
        }
        
        .period-header {
            background: linear-gradient(135deg, #37474f 0%, #263238 100%);
            color: white;
            padding: 20px 30px;
            border-radius: 15px 15px 0 0;
            margin-bottom: 0;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
        }
        
        .period-header h2 {
            font-size: 2em;
            margin-bottom: 8px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        
        .period-header .time-range {
            font-size: 1.2em;
            opacity: 0.9;
            font-style: italic;
        }
        
        .period-content {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
            padding: 30px;
            background: #fafafa;
            border-radius: 0 0 15px 15px;
            border: 2px solid #e0e0e0;
            border-top: none;
        }
        
        .dimension-card {
            padding: 25px;
            border-radius: 12px;
            position: relative;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .dimension-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        
        .west-music {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
        }
        
        .china-history {
            background: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%);
            color: white;
        }
        
        .world-events {
            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
            color: white;
        }
        
        .dimension-title {
            font-size: 1.3em;
            font-weight: bold;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid rgba(255,255,255,0.3);
        }
        
        .dimension-content ul {
            list-style: none;
            padding: 0;
        }
        
        .dimension-content li {
            margin-bottom: 12px;
            padding-left: 28px;
            position: relative;
            line-height: 1.6;
            font-size: 1.05em;
        }
        
        .dimension-content li::before {
            content: '◆';
            position: absolute;
            left: 0;
            font-size: 1.2em;
            opacity: 0.8;
        }
        
        .key-event {
            background: rgba(255,255,255,0.2);
            padding: 3px 6px;
            border-radius: 4px;
            font-weight: 600;
        }
        
        .connections-panel {
            background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
            padding: 30px;
            border-radius: 15px;
            margin: 40px 0;
            border: 2px solid #ff9800;
        }
        
        .connections-panel h3 {
            color: #e65100;
            font-size: 1.8em;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .connection-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 20px;
            margin-top: 25px;
        }
        
        .connection-card {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            border-left: 4px solid #ff6f00;
        }
        
        .connection-card h4 {
            color: #e65100;
            margin-bottom: 10px;
            font-size: 1.25em;
        }
        
        .connection-card p {
            line-height: 1.7;
            color: #424242;
        }
        
        .insight-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 35px;
            border-radius: 15px;
            margin-top: 50px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
        }
        
        .insight-section h3 {
            font-size: 2em;
            margin-bottom: 25px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        
        .insight-content {
            font-size: 1.15em;
            line-height: 1.9;
        }
        
        .insight-content p {
            margin-bottom: 18px;
        }
        
        @media (max-width: 1200px) {
            .period-content {
                grid-template-columns: 1fr;
            }
            
            .connection-grid {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 25px;
            }
            
            h1 {
                font-size: 2em;
            }
            
            .period-content {
                padding: 20px;
                gap: 15px;
            }
        }
        
        .interactive-hint {
            text-align: center;
            color: #546e7a;
            font-style: italic;
            margin: 25px 0;
            animation: pulse 2s infinite;
            font-size: 1.1em;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }
        
        .timeline-line {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(to bottom, 
                #6a11cb 0%, 
                #fc4a1a 33%, 
                #11998e 66%, 
                #764ba2 100%);
            transform: translateX(-50%);
            z-index: -1;
        }

/* Site navigation; the teaching document below keeps its original design. */
body{padding:0}.timeline-main{padding:28px 20px 40px}.masthead{background:#1b293a;color:#fff;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif}.head-inner{max-width:1600px;margin:auto;padding:20px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:13px;color:white;text-decoration:none;flex-shrink:0}.brand img{border:1px solid #718192;border-radius:9px;object-fit:cover}.brand strong{display:block;font-size:20px;line-height:1.4;letter-spacing:.08em;font-weight:650}.brand small{display:block;color:#eeb994;font-size:12px;letter-spacing:.04em;margin-top:3px}.masthead nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;max-width:100%;gap:8px}.masthead nav a{color:#c9d2de;text-decoration:none;font-size:14px;border:1px solid transparent;border-radius:6px;padding:8px 12px;white-space:nowrap}.masthead nav a:hover{background:#ffffff0d}.masthead nav a[aria-current]{color:#eeb994;border-color:#65707c;background:#ffffff06}a:focus-visible{outline:3px solid #eeb994;outline-offset:4px}h1{margin-bottom:15px}.timeline-subtitle{text-align:center;font-size:16px;color:#546e7a;line-height:1.7;margin-bottom:30px}.page-footer{text-align:center;margin-top:30px;font-size:13px;color:#e4e9ff;line-height:1.8}.page-footer a{color:inherit}.period-section,.dimension-card,.connection-card{min-width:0}.skip{position:absolute;top:-100px;left:16px;color:#1b293a;background:white;padding:12px;z-index:5}.skip:focus{top:12px}
@media(max-width:760px){.head-inner{padding:16px 20px;gap:14px}.brand strong{font-size:18px}.brand img{width:42px;height:42px}.masthead nav{gap:4px}.masthead nav a{padding:6px 9px;font-size:12px}.timeline-main{padding:18px 12px 30px}.timeline-subtitle{font-size:14px}}
@media(max-width:480px){.head-inner{padding:14px 17px}.brand{gap:10px}.brand strong{font-size:17px}.brand small{font-size:10px}.brand img{width:38px;height:38px}.masthead nav{justify-content:flex-start}.masthead nav a{font-size:11px;padding:6px 7px}.container{padding:22px 16px;border-radius:14px}h1{font-size:26px;line-height:1.4}.intro{padding:18px;font-size:15px;margin-bottom:24px}.legend{justify-content:flex-start;gap:15px;margin:22px 0;padding:16px;font-size:14px}.legend-color{width:24px;height:24px}.interactive-hint{font-size:14px;line-height:1.8}.timeline-container{padding:24px 0}.period-section{margin-bottom:30px}.period-header{padding:18px 14px}.period-header h2{font-size:22px;line-height:1.5}.period-header .time-range{font-size:14px;line-height:1.7}.period-content{padding:14px 12px;gap:14px}.dimension-card{padding:18px 14px}.dimension-title{font-size:17px}.dimension-content li{font-size:14px;padding-left:19px;overflow-wrap:anywhere}.connections-panel{padding:20px 14px;margin:25px 0}.connections-panel h3,.insight-section h3{font-size:23px;line-height:1.5}.connection-card{padding:16px}.connection-card h4{font-size:17px}.connection-card p,.insight-content{font-size:14px}.insight-section{padding:24px 18px;margin-top:28px}}
@media(prefers-reduced-motion:reduce){.interactive-hint{animation:none}.dimension-card{transition:none}}
@media print{.masthead,.skip,.page-footer{display:none}body{background:white}.timeline-main{padding:0}.container{box-shadow:none;padding:0}.dimension-card,.connection-card{break-inside:avoid}}