@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --bg:#0A1118;
  --panel:#111B26;
  --panel-border:#1F3040;
  --text:#DCE6EE;
  --muted:#6B8299;
  --amber:#F5A94E;
  --cyan:#4FD9C4;
  --red:#E5533D;
  --mono:'JetBrains Mono', monospace;
  --sans:'IBM Plex Sans', sans-serif;
  --radius:6px;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

#bg-canvas{
  position:fixed;
  inset:0;
  z-index:0;
  opacity:0.55;
  pointer-events:none;
}

a{color:var(--cyan); text-decoration:none;}
a:hover{text-decoration:underline;}

::selection{background:var(--amber); color:#0A1118;}

/* Layout shell */
.shell{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:300px 1fr;
  min-height:100vh;
}

/* Sidebar */
.sidebar{
  border-right:1px solid var(--panel-border);
  background:rgba(10,17,24,0.7);
  backdrop-filter:blur(6px);
  padding:28px 20px;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}

.sidebar-terminal{margin-bottom:20px;}

.brand{
  font-family:var(--mono);
  font-size:0.95rem;
  margin-bottom:0;
  color:var(--amber);
}
.terminal-trigger{
  display:block;
  width:100%;
  text-align:left;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--panel-border);
  border-radius:4px;
  padding:8px 10px;
  font:inherit;
  color:inherit;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.terminal-trigger:hover:not(.busy){
  border-color:var(--cyan);
  background:rgba(79,217,196,0.06);
}
.terminal-trigger:focus-visible{
  outline:1px solid var(--cyan);
  outline-offset:2px;
}
.terminal-trigger.busy{
  pointer-events:none;
  opacity:0.7;
}
.brand .prompt{color:var(--cyan);}
.brand .terminal-input{color:var(--text);}
.brand .cursor{
  display:inline-block;
  width:8px; height:1em;
  background:var(--amber);
  vertical-align:text-bottom;
  animation:blink 1s steps(1) infinite;
  margin-left:2px;
}
.terminal-output{margin:8px 0 0;}
.terminal-output .terminal-out-line{
  font-size:0.72rem;
  margin-bottom:2px;
}
.terminal-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
  font-family:var(--mono);
  font-size:0.68rem;
}
.terminal-actions-label{color:var(--muted);}
.terminal-cmd-btn{
  background:var(--panel);
  border:1px solid var(--panel-border);
  color:var(--cyan);
  font-family:var(--mono);
  font-size:0.68rem;
  padding:3px 9px;
  border-radius:4px;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.terminal-cmd-btn:hover:not(:disabled){
  border-color:var(--cyan);
  color:var(--amber);
}
.terminal-cmd-btn:disabled{
  opacity:0.45;
  cursor:not-allowed;
}
@keyframes blink{50%{opacity:0;}}
@keyframes fadeIn{to{opacity:1;}}

.role-line{
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--muted);
  margin-bottom:28px;
}

.status-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:0.68rem;
  color:var(--cyan);
  border:1px solid var(--panel-border);
  padding:3px 8px;
  border-radius:100px;
  margin-bottom:28px;
}
.status-badge .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 6px var(--cyan);
}

.tree{
  font-family:var(--mono);
  font-size:0.82rem;
}
.tree .path-root{color:var(--muted); margin-bottom:10px; display:block;}
.tree ul{list-style:none;}
.tree li{position:relative; padding-left:18px; margin:2px 0;}
.tree li::before{
  content:'├─';
  position:absolute; left:0; color:var(--panel-border);
}
.tree li:last-child::before{content:'└─';}
.tree a{
  color:var(--muted);
  display:block;
  padding:6px 8px;
  border-radius:4px;
  transition:all .15s ease;
}
.tree a:hover, .tree a.active{
  color:var(--amber);
  background:var(--panel);
  text-decoration:none;
}
.tree .sub{margin-left:8px; margin-top:4px;}
.tree .sub li::before{content:'│ ▸'; font-size:0.7rem;}
.tree .sub a{font-size:0.76rem; color:var(--muted);}

.sidebar-footer{
  margin-top:32px;
  padding-top:20px;
  border-top:1px solid var(--panel-border);
  font-family:var(--mono);
  font-size:0.72rem;
}
.sidebar-footer .contact-row{
  display:flex; align-items:center; gap:8px;
  margin-bottom:8px;
  color:var(--muted);
}
.sidebar-footer a{color:var(--text);}

/* Main content */
main{
  padding:56px 64px 100px;
  max-width:920px;
}

.boot-line{
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--muted);
  margin-bottom:4px;
  opacity:0;
  animation:fadeIn .4s ease forwards;
}
.boot-line b{color:var(--cyan); font-weight:500;}
.boot-line.ok{color:var(--cyan);}

h1.name{
  font-family:var(--mono);
  font-size:2.6rem;
  font-weight:700;
  margin:18px 0 4px;
  letter-spacing:-0.5px;
}
.role-sub{
  font-family:var(--mono);
  color:var(--amber);
  font-size:1rem;
  margin-bottom:40px;
}

.panel{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  margin-bottom:32px;
  overflow:hidden;
}
.panel-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-bottom:1px solid var(--panel-border);
  background:rgba(255,255,255,0.02);
}
.panel-bar .dots{display:flex; gap:6px;}
.panel-bar .dots span{width:9px; height:9px; border-radius:50%; background:#2A3B4C;}
.panel-bar .dots span:nth-child(1){background:#E5533D;}
.panel-bar .dots span:nth-child(2){background:#F5A94E;}
.panel-bar .dots span:nth-child(3){background:#4FD9C4;}
.panel-bar .filename{
  font-family:var(--mono);
  font-size:0.74rem;
  color:var(--muted);
  margin-left:4px;
}
.panel-body{padding:24px 26px;}

.section-label{
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-bottom:14px;
}

p{color:var(--text); margin-bottom:12px; font-size:0.98rem;}
p:last-child{margin-bottom:0;}

.entry{margin-bottom:24px;}
.entry:last-child{margin-bottom:0;}
.entry-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:4px;
}
.entry-title{font-weight:600; font-size:1.02rem;}
.entry-date{
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--cyan);
  white-space:nowrap;
}
.entry ul{margin:10px 0 0 0; list-style:none;}
.entry li{
  position:relative;
  padding-left:18px;
  margin-bottom:7px;
  color:var(--muted);
  font-size:0.92rem;
}
.entry li::before{
  content:'>';
  position:absolute; left:0; color:var(--cyan);
  font-family:var(--mono);
}

.contact-links{display:flex; flex-direction:column; gap:8px;}
.contact-links a{font-family:var(--mono); font-size:0.9rem;}

.chip-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
.chip{
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--muted);
  border:1px solid var(--panel-border);
  padding:4px 10px;
  border-radius:100px;
}

.media-frame{
  position:relative;
  width:100%;
  padding-top:56.25%;
  border-radius:4px;
  overflow:hidden;
  border:1px solid var(--panel-border);
  margin:14px 0;
  background:#000;
}
.media-frame iframe, .media-frame img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border:0;
}

.img-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:14px 0;
}
.img-grid img{
  width:100%; border-radius:4px; border:1px solid var(--panel-border);
  display:block;
}

.cert-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:16px;
}
.cert-item{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .15s ease, transform .15s ease;
  display:flex;
  flex-direction:column;
}
.cert-item:hover{
  border-color:var(--cyan);
  transform:translateY(-2px);
}
.cert-item img{
  width:100%;
  aspect-ratio:1.4 / 1;
  object-fit:cover;
  display:block;
  border-bottom:1px solid var(--panel-border);
}
.cert-label{
  font-family:var(--mono);
  font-size:0.7rem;
  color:var(--muted);
  padding:10px 12px;
  line-height:1.3;
  flex:1;
  display:flex;
  align-items:center;
}

.project-link{
  font-family:var(--mono);
  font-size:0.85rem;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.project-link::after{content:'↗';}

footer.site-footer{
  font-family:var(--mono);
  font-size:0.7rem;
  color:var(--muted);
  padding:24px 64px 40px;
  border-top:1px solid var(--panel-border);
  position:relative;
  z-index:1;
}

/* Mobile nav toggle */
.mobile-topbar{display:none;}

@media (max-width:900px){
  .shell{grid-template-columns:1fr;}
  .sidebar{
    position:relative;
    height:auto;
    display:none;
    border-right:none;
    border-bottom:1px solid var(--panel-border);
  }
  .sidebar.open{display:block;}
  .mobile-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 20px;
    border-bottom:1px solid var(--panel-border);
    font-family:var(--mono);
    color:var(--amber);
    position:sticky; top:0;
    background:rgba(10,17,24,0.9);
    backdrop-filter:blur(6px);
    z-index:2;
  }
  .mobile-topbar button{
    background:none;
    border:1px solid var(--panel-border);
    color:var(--text);
    font-family:var(--mono);
    padding:6px 10px;
    border-radius:4px;
  }
  main{padding:32px 20px 80px;}
  h1.name{font-size:2rem;}
  .img-grid{grid-template-columns:1fr;}
  footer.site-footer{padding:20px;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}