:root{
  --bg: #f8f9fa; 
  --card: #ffffff; 
  --text: #202124; 
  --muted:#5f6368; 
  --brand:#4285f4; 
  --ring: rgba(66, 133, 244, .35);
  --shadow: 0 1px 3px rgba(60,64,67,.3), 0 4px 8px rgba(60,64,67,.15);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #171717; 
    --card: #202020; 
    --text: #e8eaed; 
    --muted:#9aa0a6;
    --brand:#8ab4f8; 
    --ring: rgba(138, 180, 248, .35);
    --shadow: 0 1px 3px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.3);
  }
}

*{box-sizing:border-box}
html,body{height:100%} 
body{
  margin:0;
  font-family: 'LXGW Neo XiHei';
  color:var(--text);
  background: var(--bg);
  overflow-x:hidden;
  transition: background-color .4s ease;
}
.page-enter{opacity:0; transform:translateY(10px); animation:fadeUp .8s ease-out .05s forwards;}
@keyframes fadeUp{to{opacity:1; transform:translateY(0)}}
.delay-1{animation-delay:.12s} .delay-2{animation-delay:.18s}
.delay-3{animation-delay:.24s} .delay-4{animation-delay:.30s}
.delay-5{animation-delay:.36s} .delay-6{animation-delay:.42s}
.delay-7{animation-delay:.48s} .delay-8{animation-delay:.54s}
.center-wrapper{
  display:flex; align-items:center; justify-content:center; width: 100%;
}
.first-screen{ height: 100vh; }
.container{
  max-width:1100px; width:100%; display:grid; grid-template-columns: 1fr; gap:36px; padding: 0 24px;
}
@media(min-width:900px){.container{grid-template-columns: 420px 1fr; align-items:center}}

.avatar-wrap{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; width: auto; max-width: 100%; }
.avatar{ width:140px; height:140px; border-radius:50%; object-fit: cover; overflow:hidden; transform: translateZ(0); transition: transform .35s ease, box-shadow .35s ease; box-shadow: var(--shadow); }
.avatar:hover{ transform: translateY(-3px) scale(1.02); box-shadow: 0 6px 15px rgba(66, 133, 244,.25);} 
.name{font-size:28px; font-weight:800; letter-spacing:.2px}
.subtitle{color:var(--muted); margin-top:4px}
.social{display:flex; gap:16px; margin-top:18px; flex-wrap:wrap;}
.icon-btn{width:50px; height:50px; border-radius:16px; display:grid; place-items:center; background:var(--card); box-shadow:var(--shadow); border:none; color:var(--brand); text-decoration:none; transform:translateZ(0); transition: transform .25s ease, box-shadow .25s ease, background-color .25s; position:relative; outline:none;}
.icon-btn:hover{ transform:translateY(-4px); box-shadow: 0 6px 15px rgba(66, 133, 244,.25); background: var(--bg);} 
.icon-btn i { font-size: 24px; } 


.code-area,
.code-area * {
    font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
}

.code-card{
    background:#1e1e1e; color:#d4d4d4; border-radius:16px; padding:18px 18px 22px; box-shadow: var(--shadow); border:none; overflow:hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}
.code-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,.4); 
}
.dots{display:flex; gap:8px; padding:8px}
.dot{width:10px; height:10px; border-radius:50%}
.d-red{background:#ff5f56}.d-yellow{background:#ffbd2e}.d-green{background:#27c93f}
pre{margin:0; padding:14px 18px 8px; overflow:auto; font-size:15px; line-height:1.7}

.cursor {
    display: inline-block; color: #fff; opacity: 1;
    animation: blink 0.7s infinite step-end;
}

@keyframes blink {
    from, to { opacity: 1; }
    50% { opacity: 0; }
}


#ascii-art-container pre {
    font-family: inherit; 
    
    font-size: 13px; 
    line-height: 1; 
    margin: 0;
    padding: 0;
    white-space: pre; 
    overflow-x: auto;
    overflow-y: hidden;    
    max-height: 200px;
    color: inherit;
}

.second-screen { padding: 60px 0 80px; width: 100%; }
.sites-section { max-width: 1100px; width: 100%; padding: 0 24px; margin: 0 auto; }
.section-title { font-size: 24px; font-weight: 600; color: var(--text); margin-bottom: 30px; }
.sites{display:grid; grid-template-columns: 1fr; gap:20px; margin-top:0;}
@media(min-width:680px){.sites{grid-template-columns: repeat(2, 1fr)}} 
@media(min-width:1000px){.sites{grid-template-columns: repeat(4, 1fr)}}
.site{
    position:relative; border-radius:18px; padding:20px; overflow:hidden; background:var(--card); 
    border:1px solid rgba(0,0,0,.04); box-shadow: var(--shadow); 
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s; 
    text-decoration:none; color:inherit; 
    display:flex; flex-direction:column; gap:8px; min-height:120px;
}
.site:hover{ 
    transform: translateY(-6px); 
    box-shadow: 0 10px 20px rgba(66, 133, 244,.2), 0 2px 5px rgba(66, 133, 244,.1);
    border-color: var(--brand); 
}
.site h3{margin:0; font-size:18px}
.site p{margin:0; color:var(--muted); font-size:14px}
.site-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.site-icon img { width: 100%; height: 100%; object-fit: contain; }

#back-to-top {
    position: fixed; bottom: 24px; right: 24px; width: 50px; height: 50px;
    border-radius: 50%; background: var(--brand); color: var(--card); border: none;
    cursor: pointer; box-shadow: var(--shadow); display: grid; place-items: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s ease; z-index: 1000;
}
#back-to-top.show { opacity: 1; visibility: visible; }
#back-to-top:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(66, 133, 244,.4); }
#back-to-top i { font-size: 20px; }

@media(max-width:900px){
    .code-area { display: none; }
    .first-screen { height: auto; min-height: 50vh; padding-top: 50px; padding-bottom: 50px; }
    .container { grid-template-columns: 1fr; }
    .avatar-wrap { align-items: center; text-align: center; }
    .social { justify-content: center; }
    .sites{ grid-template-columns: 1fr; gap: 16px; }
    .site-icon { width: 40px; height: 40px; }
    .section-title { text-align: center; }
}

@media (max-width: 600px) {
  .code-area,
  .code-area * {
      font-size: 14px !important; 
  }

  #ascii-art-container pre {
    font-size: 11px;
  }
}

.footer{text-align:center; padding:12px 0; color:var(--muted); font-size:13px;}
.footer .dot { opacity: .7; margin: 0 .25em; }
.footer .footer-link { color: var(--muted); text-decoration: none; padding: 0 .15em; border-bottom: 1px dashed rgba(66, 133, 244,.35); transition: border-color .2s, opacity .2s; }
.footer .footer-link:hover { border-bottom-color: var(--brand); opacity: .95; }

[data-anim]{opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease}
[data-anim].show{opacity:1; transform:translateY(0)}
.hidden { visibility: hidden; }
.fade-in { animation: fadeIn 0.6s ease forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

html, body { max-width: 100%; overflow-x: hidden; }
.footer, .site p, .site h3, .footer a{ word-wrap: break-word; overflow-wrap: anywhere; }

@media (prefers-color-scheme: dark){
    .social .icon-btn i {
        color: var(--brand) !important; 
    }
    .social .icon-btn img {
        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(1.2);
        transition: filter .3s ease; 
    }
}