:root { --bg:#ffffff; --fg:#111827; --muted:#6b7280; --card:#f3f4f6; --acc:#0d00ff; }

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body { font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif; background:var(--bg); color:var(--fg); line-height:1.6; }

.nav { position:sticky; top:0; backdrop-filter:saturate(180%) blur(8px); background:color-mix(in oklab, var(--bg) 85%, transparent); display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-bottom:1px solid color-mix(in oklab, var(--fg) 15%, transparent); }
.nav a { color:var(--fg); text-decoration:none; margin-left:16px; }
.nav a.active { font-weight:600; border-bottom: 2px solid var(--acc); }
.logo { font-weight:700; letter-spacing:.2px; }

.hero { padding:80px 20px 40px; max-width:960px; margin:auto; text-align:center; }
.hero h1 { font-size:clamp(28px,4vw,44px); margin:0 0 12px; }
.hero p { color:var(--muted); margin:0 0 20px; }
.btn { display:inline-block; padding:10px 16px; border-radius:10px; background:var(--acc); color:white; text-decoration:none; }

.section { max-width:1100px; margin:40px auto; padding:0 20px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:18px; }
.card { background:var(--card); border:1px solid color-mix(in oklab, var(--fg) 10%, transparent); border-radius:14px; padding:14px; transition:transform .12s ease, border-color .12s ease; }
.card:hover { transform:translateY(-2px); border-color:var(--acc); }
.card img { width:100%; height:150px; object-fit:cover; border-radius:8px; }
.card h3 { margin:10px 0 6px; }
.card p { margin:0 0 10px; color:var(--muted); }
.tags span { display:inline-block; font-size:12px; padding:3px 8px; margin-right:6px; background:color-mix(in oklab, var(--acc) 20%, transparent); border-radius:999px; }
.links a { margin-right:12px; }

.about.section { max-width :1000px; margin: 10px auto; padding: 0 20px; }
.about h2 {font-size:1.8rem; margin-bottom: 0px; text-align:left;}
.about-content {display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;}
.about-text{flex: 1; max-width: 600px; color: var(--muted); font-size: 1rem; line-height: 1.7;}
.about-text a {color: var(--acc); text-decoration: none;}
.about-text a:hover {text-decoration: underline;}

.about-photo img {
  width: 240px;
  height: 240px;
  object-fit: cover;
  box-shadow: 8px 8px 10px 4px rgba(0,0,0,0.5);
  border-radius: 10px;
}

.resume {max-width: 900px; margin: 60px auto; padding: 0 40px; }
.resume h1 {font-size:1.8rem; margin-bottom: 4px; text-align: center;}
.resume h2{margin-top: 40px; border-bottom: 2px solid var(--acc); padding-bottom: 6px;}
.resume-section {margin-top:16px;}
.resume.date {color: var(--muted); font-size: 0.9rem; margin-bottom: 8px;}
.resume ul {list-style-type: disc; padding-left: 20px; margin: 8px 0;}
.resume ul li {margin-bottom: 6px; line-height: 1.5;}
.resume em{color: var(--acc); font-style: normal; font-weight: 600;}

.logo-inline{width: 22px; height: 22px; object-fit: contain; vertical-align: middle; margin-left: 6px;}
.logo-inline:hover{ opacity: 1;}

.blog-index h1{text-align: center; margin-bottom: 10px;}
.blog-index .intro{text-align: center; color: var(--muted); margin-bottom: 40px; font-size: 1.05rem;}
.blog-index .meta{font-size:0.85rem; color: var(--muted); margin-top: 8px;}
.blog-index .card h3 a {color:var(--fg); text-decoration: none;}
.blog-index .card h3 a:hover {color: var(--acc);}

.blog-post h1{font-size: 2rem; margin-bottom: 8px;}
.blog-post .meta{font-size:0.9rem; color: var(--muted); margin-bottom: 20px;}
.blog-hero{width: 100%; max-height: 400px; object-fit: contain; border-radius: 5px; margin-bottom: 10px;}

.links { max-width: 1000px; margin: 10px auto; padding: 0 20px; }
.links.section h2 { text-align: left; margin-bottom: 20px; }
.links.section ul li {margin-bottom: 8px;}
.links.section ul li a {color: var(--acc); text-decoration: none; font-size: 1.1rem;}
.links.section ul li a:hover {text-decoration: underline;}

.footer { max-width:960px; margin:60px auto 20px; padding:0 20px; color:var(--muted); text-align: center; }
#theme-toggle { background:none; border:1px solid color-mix(in oklab, var(--fg) 15%, transparent); padding:6px 10px; border-radius:10px; cursor:pointer; color:var(--fg); }


.equation-block {
      background: #f8f9fa;
      padding: 1.5rem;
      border-left: 4px solid #007bff;
      margin: 1.5rem 0;
      border-radius: 4px;
    }
    
    .btn {
      display: inline-block;
      margin-top: 2rem;
      padding: 0.8rem 1.5rem;
      background: #007bff;
      color: white;
      text-decoration: none;
      border-radius: 4px;
      transition: background 0.3s;
    }
    
    .btn:hover {
      background: #0056b3;
    }
    
    code {
      background: #f4f4f4;
      padding: 2px 6px;
      border-radius: 3px;
      font-family: 'Courier New', monospace;
      font-size: 0.9em;
    }