* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Courier New', monospace; background: #000; color: #00ff41; overflow-x: hidden; line-height: 1.6; }
        #matrix-canvas { position: fixed; inset: 0; z-index: -1; opacity: .3; }
        body::before { content: ""; position: fixed; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.15), rgba(0,0,0,.15) 1px, transparent 1px, transparent 2px); pointer-events: none; z-index: 999; }
        .site-nav { position: sticky; top: 0; z-index: 1000; min-height: 68px; display: flex; align-items: center; padding: 12px 30px; background: linear-gradient(120deg, rgba(42,32,92,.98) 0%, rgba(32,72,125,.98) 52%, rgba(92,45,107,.98) 100%); border-bottom: none; box-shadow: 0 5px 22px rgba(69,71,170,.35); backdrop-filter: blur(10px); }
        .site-brand { display: inline-flex; align-items: center; gap: 12px; color: #ffd166; text-decoration: none; font-family: 'Microsoft YaHei', '微软雅黑', sans-serif; font-size: 1.35rem; font-weight: 900; letter-spacing: .5px; text-shadow: 0 0 9px rgba(255,209,102,.38); }
        .site-brand img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; }
        .site-brand:hover, .site-brand:focus-visible { color: #ffe29a; text-shadow: 0 0 12px rgba(255,209,102,.7); }
        .container { max-width: 900px; margin: 0 auto; padding: 24px 20px 40px; position: relative; z-index: 1; }
        .terminal-header { background: #1a1a1a; border: 1px solid #00ff41; border-bottom: none; padding: 10px 15px; border-radius: 5px 5px 0 0; display: flex; align-items: center; gap: 8px; }
        .terminal-btn { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
        .btn-red { background: #ff5f56; } .btn-yellow { background: #ffbd2e; } .btn-green { background: #27c93f; }
        .terminal-title { margin-left: 10px; font-size: 14px; color: #888; }
        .terminal-body { background: rgba(0,0,0,.85); border: 1px solid #00ff41; border-top: none; padding: 30px; border-radius: 0 0 5px 5px; margin-bottom: 30px; backdrop-filter: blur(5px); }
        .nav-link { color: #00ff41; text-decoration: none; display: inline-block; border: 1px solid #00ff41; padding: 7px 14px; border-radius: 3px; transition: .3s; }
        .nav-link:hover, .nav-link:focus-visible { color: #000; background: #00ff41; box-shadow: 0 0 15px #00ff41; }
        .profile-section { display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap; }
        .avatar { width: 225px; height: 225px; border: 2px solid #00ff41; border-radius: 5px; padding: 5px; box-shadow: 0 0 15px rgba(0,255,65,.5); background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #006622; }
        .avatar img { width: 100%; height: 100%; object-fit: cover; }
        .info-text { flex: 1; min-width: 250px; }
        .info-text p { margin: 8px 0; }
        .label { color: #00cc33; font-weight: bold; }
        h1 { font-family: 'JetBrains Mono', monospace; font-size: 2.5rem; margin-bottom: 10px; text-shadow: 0 0 10px #00ff41; animation: glitch 2s infinite; }
        h2 { font-size: 1.5rem; margin: 0 0 15px; color: #00ff41; text-shadow: 0 0 5px #00ff41; border-bottom: 1px dashed #00ff41; padding-bottom: 5px; }
        h2::before { content: "> "; }
        .skill-item { margin: 18px 0; }
        .skill-name { margin-bottom: 5px; display: flex; justify-content: space-between; gap: 20px; }
        .skill-bar { height: 8px; background: #111; border: 1px solid #00ff41; border-radius: 2px; overflow: hidden; }
        .skill-progress { height: 100%; background: linear-gradient(90deg, #00cc33, #00ff41); box-shadow: 0 0 10px #00ff41; }
        footer { text-align: center; padding: 20px; color: #006622; font-size: .85rem; }
        @keyframes glitch { 0%,90%,100% { opacity: 1; } 91% { opacity: .8; transform: translateX(2px); } 92% { opacity: 1; transform: translateX(-2px); } 93% { opacity: .9; transform: translateX(1px); } }
        @media (max-width: 600px) { .site-nav { padding: 10px 16px; } .site-brand { font-size: 1.1rem; } .site-brand img { width: 36px; height: 36px; } .profile-section { flex-direction: column; } .terminal-body { padding: 20px; } h1 { font-size: 1.8rem; } .avatar { width: 100%; height: auto; aspect-ratio: 1 / 1; } }