:root {  --bg-primary: #0a0a0a;  --bg-secondary: #111;  --bg-tertiary: #1a1a1a;  --text-primary: #f7f5f5;  --text-secondary: #e0e0e0;  --text-muted: #999;  --border-color: #333;  --accent-color: #fff;  --hover-color: #222;}/* Base */*, :before, :after { box-sizing: border-box }html { font-size: 100% }body {  font: .9rem/1.6 'Courier New', 'SF Mono', Monaco, Inconsolata, 'Fira Code', monospace;  background: var(--bg-primary);  color: var(--text-primary);  letter-spacing: .5px;  margin: 0;  padding: 0;  min-width: 320px;  -webkit-text-size-adjust: 100%}/* Layout */.container, main, nav, header, footer {  max-width: 900px;  margin: 0 auto;  padding: 0 2rem;  width: 100%}header, footer {  background: var(--bg-primary);  border: 1px solid var(--border-color);  padding: 2rem 0}header {  border-width: 0 0 1px;  margin-bottom: 3rem}footer {  border-width: 1px 0 0;  text-align: center;  color: var(--text-muted);  margin-top: 4rem}footer::before { content: '// ' }/* Navigation */nav {  display: flex;  justify-content: space-between;  align-items: center}.logo, nav a:first-child {  font: bold 1.35rem/1 inherit;  color: var(--text-primary);  text-decoration: none;  position: relative}.logo::before, nav a:first-child::before {  content: '> ';  color: var(--text-secondary)}nav ul {  display: flex;  gap: 2rem;  list-style: none;  margin: 0;  padding: 0}nav ul li a {  color: var(--text-secondary);  text-decoration: none;  transition: color .3s;  position: relative}nav ul li a:hover { color: var(--text-primary) }nav ul li a::before, nav ul li a::after { color: var(--text-muted) }nav ul li a::before { content: '[' }nav ul li a::after { content: ']' }/* Typography */h1, h2, h3, h4, h5, h6 {  color: var(--text-primary);  position: relative;  overflow-wrap: break-word}h1 { font-size: 2.5rem; margin-bottom: 1rem; text-align: center }h2 { font-size: 2rem }h3 { font-size: 1.75rem }h4 { font-size: 1.5rem }h5 { font-size: 1.25rem }h6 { font-size: 1rem }h1::before { content: '# ' }h2::before { content: '/*' }h2::after { content: '*/' }h3::before { content: '// ' }h4::before { content: '~ ' }h5::before { content: '--- ' }h1::before, h2::before, h3::before h4::before h5::before{ color: var(--text-muted) }p, a, li, td {  color: var(--text-primary);  line-height: 1.7}p { margin-bottom: 1.5rem; overflow-wrap: break-word }a {  color: var(--text-secondary);  transition: color .3s;  min-height: 44px}a:hover { color: var(--text-primary) }ul, ol {  color: var(--text-secondary);  padding-left: 2rem}li { margin-bottom: .5rem }li::marker, ul li::before { color: var(--text-muted) }ul li {  list-style: none;  position: relative}ul li::before {  content: '- ';  position: absolute;  left: -1.5rem}/* Code */code, pre {  background: var(--bg-secondary);  border: 1px solid var(--border-color);  font-family: inherit}code { padding: .2rem .4rem; color: var(--text-primary) }pre {  padding: 1.5rem;  overflow-x: auto;  margin: 1.5rem 0;  font-size: .85rem;  -webkit-overflow-scrolling: touch}pre code { background: none; border: none; padding: 0 }/* Tables */table, th, td {  border: 1px solid var(--border-color);  border-collapse: collapse}table {  width: 100%;  margin: 1.5rem 0;  background: var(--bg-secondary);  display: block;  overflow-x: auto;  -webkit-overflow-scrolling: touch}th, td { padding: .75rem; text-align: left }th { background: var(--bg-tertiary); font-weight: bold }/* Forms */input, textarea, select, button, .button {  background: var(--bg-secondary);  border: 1px solid var(--border-color);  color: var(--text-primary);  padding: .75rem;  font-family: inherit;  transition: all .3s}input:focus, textarea:focus, select:focus {  outline: none;  border-color: var(--text-secondary)}input::placeholder, textarea::placeholder { color: var(--text-muted) }button, .button {  color: var(--text-secondary);  padding: .75rem 1.5rem;  cursor: pointer;  min-height: 44px}button:hover, .button:hover {  color: var(--text-primary);  border-color: var(--text-muted);  background: var(--hover-color)}button::before, .button::before { content: '[' }button::after, .button::after { content: ']' }button::before, .button::before, button::after, .button::after { color: var(--text-muted) }/* Articles */article, .blog-item {  background: var(--bg-secondary);  border: 1px solid var(--border-color);  padding: 2rem;  margin-bottom: 2rem;  position: relative;  transition: all .3s;  width: 100%;  max-width: none;  overflow: hidden}article img { width: 100%; max-height: 10em; object-fit: cover }article:hover, .blog-item:hover {  background: var(--hover-color);  border-color: var(--text-muted);  transform: translateY(-2px)}/* Blog */.blog-list, .blog-posts {  display: grid;  gap: 2rem;  width: 100%;  counter-reset: blog-counter;  margin-bottom: 3rem}.blog-item { padding: 2rem; margin-bottom: 0 }.blog-item::before {  content: '[' counter(blog-counter) ']';  counter-increment: blog-counter;  position: absolute;  top: 1rem;  right: 1.5rem;  color: white;  font-size: .72rem;  z-index: 100;}.blog-title {  font-size: 1.17rem;  color: var(--text-primary);  text-decoration: none;  display: block;  position: relative;  z-index: 10;  font-family: inherit}.blog-title:hover { color: var(--text-secondary) }.blog-meta {  display: flex;  gap: 1rem;  margin-bottom: 1rem;  font-size: .81rem;  color: var(--text-muted);  flex-wrap: wrap;  position: relative;  z-index: 10;  padding-right: 120px;  font-family: inherit}.blog-meta span::before { content: '// ' }.blog-excerpt {  color: var(--text-secondary);  margin-bottom: 1rem;  position: relative;  z-index: 10;  padding-right: 120px;  font-family: inherit}/* Search */.meta, .date, .tags { color: var(--text-muted); font-size: .9rem; margin-bottom: 1rem }.meta::before, .date::before { content: '// ' }.search-container { margin-bottom: 3rem; position: relative }.search-wrapper { position: relative; max-width: 500px; width: 100%; margin: 0 auto }.search-input { width: 100%; padding: 1rem 1.5rem; font-size: .9rem }.search-input::placeholder { color: var(--text-muted) }.no-results {  text-align: center;  padding: 3rem 2rem;  color: var(--text-muted);  font-style: italic}.no-results p::before { content: '// ' }/* Tags */.tag, .tags span {  background: var(--bg-tertiary);  color: var(--text-secondary);  padding: .3rem .8rem;  font-size: .72rem;  border: 1px solid var(--border-color);  display: inline-block;  font-family: inherit}.tags {  display: flex;  flex-wrap: wrap;  gap: .5rem;  margin-top: 1rem;  position: relative;  z-index: 10;  padding-right: 120px}/* Triangle Background */.triangle-bg {  position: absolute;  top: 0;  right: 0;  width: 370px;  height: 370px;  background-image: var(--bg-image);  background-size: cover;  background-position: center;  clip-path: polygon(100% 0%, 0% 0%, 100% 100%);  z-index: 1}.triangle-bg::after {  content: '';  position: absolute;  inset: 0;  background: linear-gradient(to left,    rgba(17,17,17,0) 0%,    rgba(17,17,17,.1) 15%,    rgba(17,17,17,.25) 30%,    rgba(17,17,17,.45) 45%,    rgba(17,17,17,.65) 60%,    rgba(17,17,17,.8) 75%,    rgba(17,17,17,.95) 90%,    rgba(17,17,17,1) 100%)}/* Common Elements */hr {  border: none;  border-top: 1px solid var(--border-color);  margin: 2rem 0}/* Terminal Styles (Index-specific) */#index .terminal-section {  background: var(--bg-secondary);  border: 1px solid var(--border-color);  padding: 1.5rem;  margin: 2rem 0;  font-family: inherit}#index .command-line {  display: flex;  align-items: center;  margin-bottom: .5rem;  color: var(--text-primary)}#index .prompt {  color: var(--text-muted);  margin-right: .5rem}#index .command { color: var(--text-secondary) }#index .output {  margin-left: 1.5rem;  margin-bottom: 1rem;  color: var(--text-secondary)}#index .status-indicator {  display: inline-block;  width: 8px;  height: 8px;  border-radius: 50%;  margin-right: .5rem}#index .status-online { background: #0f0 }#index .status-busy { background: #ff0 }#index .skills-grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));  gap: .5rem;  margin: 1rem 0}#index .skill-item {  background: var(--bg-tertiary);  border: 1px solid var(--border-color);  padding: .5rem;  text-align: center;  font-size: .8rem;  color: var(--text-secondary)}#index .progress-bar {  background: var(--bg-tertiary);  height: 4px;  margin: .5rem 0;  overflow: hidden}#index .progress-fill {  height: 100%;  background: var(--text-muted);  animation: progress-load 2s ease-out}@keyframes progress-load {  from { width: 0 }}#index .interactive-terminal {  background: var(--bg-secondary);  border: 1px solid var(--border-color);  padding: 1rem;  margin: 1.5rem 0}#index .terminal-input {  background: transparent;  border: none;  color: var(--text-primary);  font-family: inherit;  font-size: inherit;  outline: none;  width: 100%}#index .cursor { animation: blink 1s infinite }/* Utilities */.text-center { text-align: center }.mb-2 { margin-bottom: 1rem }.mb-4 { margin-bottom: 2rem }.mt-4 { margin-top: 2rem }.w-full { width: 100% }.max-w-full { max-width: 100% }.h-auto { height: auto }.gap-sm { gap: 1rem }.gap-md { gap: 2rem }.gap-lg { gap: 3rem }.aspect-video { aspect-ratio: 16/9 }.aspect-square { aspect-ratio: 1/1 }/* Animations */.typing::after {  content: '_';  animation: blink 1s infinite;  color: var(--text-secondary)}@keyframes blink {  0%, 50% { opacity: 1 }  51%, 100% { opacity: 0 }}/* Images */img { max-width: 100%; height: auto }/* Responsive */@media (max-width: 1199px) {  .container, main, nav { max-width: 850px }}@media (max-width: 991px) {  .container, main, nav { padding: 0 1.5rem }  h1 { font-size: 2.5rem }  .project-grid, .blog-grid { grid-template-columns: repeat(2, 1fr) }  .about-section, .hero { grid-template-columns: 1fr; padding: 3rem 0 }  .gap-md { gap: 1.5rem }  .gap-lg { gap: 2rem }}@media (max-width: 768px) {  html { font-size: 16px }  body { font-size: 1rem; line-height: 1.5; padding: .5rem }  .container, main, nav { padding: 0 1rem }  nav { flex-direction: column; gap: 1rem; padding: 1rem }  nav ul { flex-wrap: wrap; justify-content: center; gap: 1rem }  .project-grid, .blog-grid { grid-template-columns: 1fr }  article, .blog-item { padding: 1.5rem }  h1 { font-size: 1.8rem !important; margin-bottom: 1.5rem !important }  h2 { font-size: 1.5rem !important }  h3 { font-size: 1.25rem !important }  .search-wrapper, .hero { max-width: 100%; padding: 2rem 0 }  header { padding: 1.5rem 0 }  .blog-meta { font-size: .81rem }  .gap-sm { gap: .5rem }  .gap-md { gap: 1rem }  .gap-lg { gap: 1.5rem }  .triangle-bg { width: 300px; height: 300px }  .blog-title { font-size: 1rem }  .blog-meta, .blog-excerpt, .tags { padding-right: 80px }  p, li, td, .blog-excerpt { font-size: 1.05rem; line-height: 1.7 }  p { margin-bottom: 1.25rem }  button, .button { padding: .8rem 1.2rem; font-size: 1rem }  pre { font-size: .9rem; padding: 1rem }  input, textarea, select { font-size: 1rem; padding: .8rem }  #index .skills-grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) }  #index .terminal-section { padding: 1rem }}@media (min-width: 769px) {  nav { flex-direction: row }  button, .button { padding: .75rem 1.5rem }  pre { font-size: .85rem }  input, textarea, select { font-size: .9rem; padding: .75rem }}@media (max-width: 575px) {  .container, main, nav { padding: 0 .75rem }  nav ul li a { font-size: .9rem }  article { padding: 1rem }  h1 { font-size: 1.75rem }  h2 { font-size: 1.5rem }  h3 { font-size: 1.25rem }  .search-input { padding: .75rem 1rem; font-size: .9rem }  .hero { padding: 1.5rem 0 }  .blog-item { padding: 1rem }}@media (max-width: 400px) {  .container, main, nav { padding: 0 .5rem }  nav { padding: .75rem .5rem }  nav ul { flex-direction: column; gap: .75rem; text-align: center }  article { padding: .75rem }  h1 { font-size: 1.5rem }  .hero { padding: 1rem 0 }}@media (max-height: 600px) {  .hero { padding: 2rem 0 }  header { padding: 1rem 0 }  main { min-height: calc(100vh - 120px) }}@media (max-width: 767px) and (orientation: landscape) {  .hero { padding: 1.5rem 0 }  nav { flex-direction: row; padding: 1rem }  nav ul { flex-direction: row; gap: 1rem }}@media print {  .container, main { max-width: none; padding: 0 }  nav, .search-container { display: none }  article { break-inside: avoid; padding: 1rem 0 }}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }}