*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #0a0c0f;
  color: #dfe6e9;
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
  font-size: 15px;
  line-height: 1.7;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.titlebar {
  background: #0f1115;
  border-bottom: 1px solid #20242b;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  user-select: none;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: 0.1s ease;
}
.dot.r { background: #ff5e5e; box-shadow: 0 0 2px #ff5e5e; }
.dot.y { background: #ffd966; box-shadow: 0 0 2px #ffd966; }
.dot.g { background: #2bde8f; box-shadow: 0 0 2px #2bde8f; }

.tbl {
  margin-left: 8px;
  color: #4b5568;
  font-size: 11px;
  letter-spacing: 0.3px;
  font-weight: 500;
}

#sticky {
  flex-shrink: 0;
  border-bottom: 1px solid #171c22;
  padding: 12px 24px 10px;
  background: #0a0c0f;
}

.logo-wrap {
  display: flex;
  justify-content: center;
  margin: 4px 0 14px;
}

.logo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #2deb8c;
  box-shadow:
    0 0 0 4px rgba(45, 235, 140, 0.08),
    0 0 18px rgba(45, 235, 140, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.6);
  animation: logo-glow 4s ease-in-out infinite;
  user-select: none;
}

@keyframes logo-glow {
  0%, 100% {
    box-shadow:
      0 0 0 4px rgba(45, 235, 140, 0.08),
      0 0 18px rgba(45, 235, 140, 0.35),
      0 4px 14px rgba(0, 0, 0, 0.6);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(45, 235, 140, 0.12),
      0 0 28px rgba(45, 235, 140, 0.55),
      0 4px 14px rgba(0, 0, 0, 0.6);
  }
}

.hmeta {
  display: flex;
  gap: 32px;
  margin-top: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.hmeta span {
  color: #2c3e4e;
  font-size: 12.5px;
  font-weight: 450;
}
.hmeta span b {
  color: #6cd4ff;
  font-weight: 600;
}
.hmeta .on b {
  color: #2deb8c;
  text-shadow: 0 0 2px #2deb8c;
}
#terminal {
  flex: 1;
  overflow-y: auto;
  padding: 12px 24px 24px;
  cursor: text;
  outline: none;
  scroll-behavior: smooth;
}
#terminal::-webkit-scrollbar { width: 5px; }
#terminal::-webkit-scrollbar-track { background: #0f1115; }
#terminal::-webkit-scrollbar-thumb { background: #2a2f38; border-radius: 4px; }
#terminal::-webkit-scrollbar-thumb:hover { background: #3e4452; }
.ln {
  color: #d8e2ec;
  line-height: 1.68;
  word-break: break-word;
}
.dim { color: #3e4a5a; font-weight: 400; }
.g { color: #2deb8c; font-weight: 500; text-shadow: 0 0 1px rgba(45, 235, 140, 0.3); }
.b { color: #6cd4ff; font-weight: 500; }
.y { color: #ffd966; }
.r { color: #ff8a7a; }
.m { color: #c3a6ff; }
.o { color: #ffb070; }
.sp { height: 8px; }

.json {
  background: #0d1117;
  border-left: 2px solid #2deb8c;
  padding: 12px 18px;
  margin: 6px 0;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre;
  overflow-x: auto;
  border-radius: 0 4px 4px 0;
}
.json .key { color: #6cd4ff; }
.json .str { color: #2deb8c; }
.json .num { color: #ffd966; }
.json .bool { color: #c3a6ff; }
.json .null { color: #ff8a7a; }
.json .punct { color: #5c6f87; }

.http {
  color: #5c6f87;
  font-size: 13.5px;
  margin: 4px 0;
  font-family: inherit;
}
.http .ok { color: #2deb8c; }
.http .verb { color: #ffd966; font-weight: 600; }

.pline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  line-height: 1.68;
  word-break: break-all;
  margin: 4px 0;
}

.ps1 {
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 12px;
}
.ps1 .u { color: #6cd4ff; font-weight: 700; text-shadow: 0 0 1px #1d4f6e; }
.ps1 .sep { color: #5c6f87; font-weight: 500; }
.ps1 .h { color: #2deb8c; font-weight: 700; }
.ps1 .pa { color: #a0b3c9; }
.ps1 .sy { color: #6c7a91; }

#live-input {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  line-height: 1.68;
  word-break: break-all;
  margin-top: 6px;
  margin-bottom: 4px;
}

#typed-pre, #typed-post {
  color: #f0f4fa;
  white-space: pre-wrap;
  font-weight: 450;
  letter-spacing: 0.2px;
}

#caret {
  display: inline-block;
  width: 9px;
  height: 16px;
  background: #2deb8c;
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
  flex-shrink: 0;
  box-shadow: 0 0 4px #2deb8c;
  border-radius: 1px;
}

@keyframes blink {
  0%, 49% { opacity: 1; background: #2deb8c; }
  50%, 100% { opacity: 0.2; background: #5cf2a8; }
}

#rsearch {
  display: none;
  margin: 6px 0 4px;
  color: #a0b3c9;
}
#rsearch .label { color: #ffd966; }
#rsearch .match { color: #2deb8c; }

#tabbox {
  display: none;
  position: fixed;
  background: #0e1219;
  border: 1px solid #2a313c;
  border-radius: 6px;
  z-index: 30;
  min-width: 240px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px 0;
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
}
#tabbox div {
  padding: 6px 18px;
  color: #9aaebc;
  font-size: 13.5px;
  cursor: pointer;
  font-family: inherit;
  transition: 0.08s linear;
}
#tabbox div.sel {
  background: #1a212c;
  color: #2deb8c;
  border-left: 2px solid #2deb8c;
}
#tabbox div:hover { background: #1c232e; color: #e2e9f0; }

.kv {
  display: flex;
  line-height: 1.85;
  margin: 4px 0;
}
.kv .k {
  color: #6b7c93;
  min-width: 150px;
  flex-shrink: 0;
  font-weight: 500;
}
.kv .v { color: #c9d9e8; }
.kv .v a {
  color: #6cd4ff;
  text-decoration: none;
  border-bottom: 1px dotted #2f4a62;
}
.kv .v a:hover {
  color: #9be1ff;
  border-bottom-color: #6cd4ff;
}

.skill {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 5px 0;
}
.sn {
  min-width: 200px;
  color: #bccadb;
  font-weight: 450;
  font-size: 14px;
}
.bar {
  width: 165px;
  height: 6px;
  background: #1c222c;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 1px #00000030;
}
.bf {
  height: 100%;
  background: #2deb8c;
  border-radius: 4px;
  box-shadow: 0 0 3px #2deb8c;
}
.bf.sec { background: #ff8a7a; box-shadow: 0 0 3px #ff8a7a; }
.sp2 { color: #5c6f87; font-size: 12px; margin-left: 4px; }

.section-title {
  color: #6cd4ff;
  font-size: 12.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 8px 0 6px;
  font-weight: 600;
}

.proj {
  border-left: 2px solid #20262f;
  padding: 6px 0 6px 16px;
  margin: 10px 0;
  transition: all 0.15s ease;
}
.proj:hover {
  border-left-color: #6cd4ff;
  background: rgba(108, 212, 255, 0.03);
}
.proj.book:hover { border-left-color: #2deb8c; background: rgba(45, 235, 140, 0.03); }

.pname {
  color: #6cd4ff;
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: -0.2px;
  font-size: 16px;
}
.pname.book { color: #2deb8c; }
.pdesc {
  color: #8d9eb0;
  font-size: 13.5px;
  margin-bottom: 6px;
  line-height: 1.65;
}
.ptags { color: #3e536a; font-size: 12.5px; margin-bottom: 6px; }

.pnav {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.pnav .lhint { color: #5c6f87; font-size: 12.5px; margin-right: 6px; }
.pnav code {
  color: #2deb8c;
  font-family: inherit;
  font-size: 12.5px;
  border: 1px solid #2a3a42;
  padding: 3px 14px;
  border-radius: 16px;
  cursor: pointer;
  background: #0f141c;
  transition: all 0.12s;
  text-decoration: none;
  display: inline-block;
}
.pnav code:hover {
  background: #2deb8c;
  color: #0a0c0f;
  border-color: #2deb8c;
}
.pnav code.blue { color: #6cd4ff; border-color: #2a4c66; }
.pnav code.blue:hover { background: #6cd4ff; color: #0a0c0f; border-color: #6cd4ff; }

.hrow {
  display: flex;
  line-height: 1.85;
  margin: 3px 0;
}
.hcmd {
  color: #2deb8c;
  min-width: 250px;
  font-weight: 500;
  font-size: 14px;
}
.hdesc { color: #7c8ea6; font-size: 14px; }

.dl {
  display: inline-block;
  margin-top: 8px;
  border: 1px solid #2deb8c;
  border-radius: 24px;
  color: #2deb8c;
  padding: 6px 20px;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: 0.12s;
  background: transparent;
}
.dl:hover {
  background: #2deb8c;
  color: #0a0c0f;
  box-shadow: 0 0 6px #2deb8c;
  border-color: #2deb8c;
}
.dl.b {
  border-color: #6cd4ff;
  color: #6cd4ff;
  margin-left: 14px;
}
.dl.b:hover {
  background: #6cd4ff;
  color: #0a0c0f;
  box-shadow: 0 0 6px #6cd4ff;
}

.tree {
  font-family: inherit;
  white-space: pre;
  color: #8d9eb0;
  line-height: 1.55;
  margin: 4px 0;
}
.tree .d { color: #6cd4ff; font-weight: 600; }
.tree .f { color: #d8e2ec; }
.tree .x { color: #2deb8c; }

#matrix-canvas {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  opacity: 0.6;
}

::selection {
  background: #2d5a7b;
  color: #eff5fa;
}

@media (max-width: 720px) {
  body { font-size: 14px; }
  .logo { width: 96px; height: 96px; }
  .hmeta { gap: 16px; }
  .hmeta span { font-size: 11.5px; }
  #sticky { padding: 10px 16px 8px; }
  #terminal { padding: 10px 16px 20px; }
  .kv .k { min-width: 110px; }
  .sn { min-width: 140px; font-size: 13px; }
  .bar { width: 110px; }
  .hcmd { min-width: 180px; font-size: 13px; }
  .hdesc { font-size: 13px; }
  .tbl { font-size: 10px; }
  #tabbox { min-width: 200px; }
}

@media (max-width: 480px) {
  .logo { width: 84px; height: 84px; }
  .hmeta { flex-direction: column; gap: 4px; align-items: center; }
  .kv { flex-direction: column; }
  .kv .k { min-width: auto; }
  .skill { flex-wrap: wrap; }
  .sn { min-width: auto; flex-basis: 100%; }
}