:root{
    --bg: #0f172a;
    --card: #0b1220;
    --muted: #9aa4b2;
    --accent: #4CAF50;
    --glass: rgba(255,255,255,0.06);
    --glass-2: rgba(255,255,255,0.03);
}

/* light mode variables */
:root{
    --page-bg: #f5f7fb;
    --text: #0f172a;
    --card-bg: #ffffff;
    --muted: #6b7280;
}

/* dark mode overrides */
:root.dark{
    --page-bg: #071025;
    --text: #e6eef6;
    --card-bg: var(--card);
    --muted: #9aa4b2;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: 'Noto Sans JP', 'Roboto', sans-serif;
    background: linear-gradient(180deg, var(--page-bg) 0%, #e9eef6 100%);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.6;
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{background:linear-gradient(90deg,#0f172a,#0b3a2a);color:#fff;padding:18px 0;position:sticky;top:0;z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;gap:16px;align-items:center}
.brand h1{font-size:1.3rem;margin:0}
.brand .role{font-size:0.85rem;color:rgba(255,255,255,0.85)}
.avatar{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,#4CAF50,#00b894);display:flex;align-items:center;justify-content:center;font-weight:700;color:#012;box-shadow:0 6px 18px rgba(12,22,30,0.4)}

.nav{display:flex;gap:12px;align-items:center}
.nav a{color:rgba(255,255,255,0.9);text-decoration:none;padding:8px 10px;border-radius:8px;transition:background .18s}
.nav a:hover{background:rgba(255,255,255,0.06)}
#theme-toggle{background:transparent;border:0;color:inherit;font-size:18px;cursor:pointer;padding:6px;border-radius:8px}

/* Hero */
.hero{padding:56px 0;background:linear-gradient(180deg, rgba(255,255,255,0.03), transparent)}
.hero h2{font-size:2rem;margin-bottom:10px}
.lead{color:var(--muted);max-width:760px}
.hero-cta{margin-top:18px;display:flex;gap:12px}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:700}
.btn.primary{background:var(--accent);color:#fff}
.btn.outline{border:2px solid rgba(15,23,42,0.06);background:transparent;color:var(--text)}

/* Sections */
.section{padding:40px 0}
.section h2{color:var(--accent);margin-bottom:18px}

.about-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.about-card{background:var(--card-bg);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(12,22,30,0.06)}
.skills-card{background:var(--card-bg);padding:18px;border-radius:12px}
.skills-card ul{list-style:disc;margin-left:18px;color:var(--muted)}

/* Projects */
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.project-card{background:var(--card-bg);padding:18px;border-radius:12px;transition:transform .18s,box-shadow .18s;box-shadow:0 8px 30px rgba(12,22,30,0.06)}
.project-card h3{margin-top:0;margin-bottom:8px}
.project-card p{color:var(--muted);font-size:0.95rem}
.project-card:hover{transform:translateY(-6px);box-shadow:0 18px 48px rgba(12,22,30,0.12)}
.project-links{margin-top:12px;display:flex;gap:10px}
.link{background:linear-gradient(90deg,#ffffff,#f1f5f9);padding:8px 12px;border-radius:8px;color:#0f172a;text-decoration:none;font-weight:700}
.github-link{background:#24292e;padding:8px 12px;color:#fff;text-decoration:none;border-radius:8px}

.learning-list{color:var(--muted);list-style:disc;margin-left:18px}
.contact-list{list-style:none;padding-left:0;color:var(--muted)}
.contact-list a{color:var(--text);text-decoration:none}

.site-footer{padding:20px 0;background:transparent;color:var(--muted);text-align:center}

/* Responsive */
@media (max-width:900px){
    .project-grid{grid-template-columns:repeat(2,1fr)}
    .about-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
    .project-grid{grid-template-columns:1fr}
    .nav{display:none}
    .header-inner{justify-content:space-between}
}

/* small polish */
a{transition:opacity .12s}
a:hover{opacity:0.9}

/* Sub headings inside sections */
.subhead{margin:6px 0 14px;font-size:1.05rem;color:var(--text)}