/* 基础样式 */
* {
    margin: 0;
    padding: 0;
    box - sizing: border - box;
}
body {
    font - family: 'Roboto', sans - serif;
    background - color: #1A1A1A;
    color: #fff;
    line - height: 1.6;
    overflow - x: hidden;
}
.container {
    max - width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: grid;
    grid - template - columns: repeat(auto - fit, minmax(300px, 1fr));
    gap: 20px;
}
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100 % ;
    background - color: #121212;
    padding: 10px 20px;
    display: flex;
    justify - content: space - between;
    align - items: center;
    z - index: 999;
}
.header h1 {
    font - size: 24px;
    color: #00BFFF;
}
.nav - links a {
    color: #fff;
    text - decoration: none;
    margin: 0 10px;
    transition: color 0.3s ease;
}
.nav - links a:hover {
    color: #9F00FF;
}
.mode - toggle {
    background - color: #00BFFF;
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border - radius: 5px;
    transition: background - color 0.3s ease;
}
.mode - toggle:hover {
    background - color: #9F00FF;
}
.hero {
    height: 100vh;
    background - image: url('https://images.gptkong.com/demo/sample1.png');
    background - size: cover;
    background - position: center;
    display: flex;
    align - items: center;
    justify - content: center;
    color: #fff;
    text - align: center;
}
.hero h1 {
    font - size: 48px;
    font - weight: bold;
    text - shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}
.card {
    background - color: #1e1e1e;
    padding: 20px;
    border - radius: 10px;
    box - shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease - in - out forwards;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.card h3 {
    color: #00BFFF;
    margin - bottom: 10px;
}
.card p {
    color: #ccc;
}
.sidebar {
    background - color: #121212;
    padding: 20px;
    border - radius: 10px;
}
.sidebar ul {
    list - style: none;
}
.sidebar li {
    margin - bottom: 10px;
}
.sidebar a {
    color: #00BFFF;
    text - decoration: none;
    transition: color 0.3s ease;
}
.sidebar a:hover {
    color: #9F00FF;
}
footer {
    background - color: #121212;
    color: #fff;
    padding: 20px;
    display: flex;
    justify - content: space - between;
    align - items: center;
}
.links a {
    color: #00BFFF;
    text - decoration: none;
    margin - right: 10px;
    transition: color 0.3s ease;
}
.links a:hover {
    color: #9F00FF;
}
.data canvas {
    max - width: 100 % ;
    height: auto;
}
.button {
    background - color: #00BFFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border - radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.button:hover {
    background - color: #9F00FF;
    transform: scale(1.1);
}
.button:active {
    transform: scale(0.9);
}
@media (max - width: 768px) {
    .container {
        grid - template - columns: 1fr;
    }
    .hero h1 {
        font - size: 36px;
    }
}