:root {  --bg-primary: #0a0a0a;  --bg-secondary: #111111;  --bg-tertiary: #1a1a1a;  --text-primary: #f5f5f5;  --text-secondary: #e0e0e0;  --text-muted: #999999;  --border-color: #333333;  --accent-color: #ffffff;  --hover-color: #222222;}/* Base & Reset */*, :before, :after {  box-sizing: border-box;}body {  font: 0.9rem/1.6 'Courier New', 'SF Mono', Monaco, Inconsolata, 'Fira Code', monospace;  background-color: var(--bg-primary);  color: var(--text-primary);  letter-spacing: 0.5px;  margin: 0;  padding: 0;}/* Layout & Containers */.container, main, nav, header, footer {  max-width: 900px;  margin: 0 auto;  padding: 0 2rem;  width: 100%;}header, footer {  background-color: 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 0.3s ease;  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 & Elements */h1, h2, h3, h4, h5, h6 {  color: var(--text-primary);  position: relative;}h1 {  font-size: 2.7rem;  margin-bottom: 1rem;  text-align: center;}h1::before { content: '> '; }h2::before { content: '// '; }h3::before { content: '/// '; }h1::before, h2::before, h3::before {  color: var(--text-muted);}p, a, li, td {  color: var(--text-primary);  line-height: 1.7;}p { margin-bottom: 1.5rem; }a {  color: var(--text-secondary);  transition: color 0.3s ease;}a:hover { color: var(--text-primary); }ul, ol {  color: var(--text-secondary);  padding-left: 2rem;}li { margin-bottom: 0.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 & Preformatted */code, pre {  background-color: var(--bg-secondary);  border: 1px solid var(--border-color);  font-family: inherit;}code {  padding: 0.2rem 0.4rem;  color: var(--text-primary);}pre {  padding: 1.5rem;  overflow-x: auto;  margin: 1.5rem 0;}pre code {  background: none;  border: none;  padding: 0;}/* Tables & Forms */table, th, td {  border: 1px solid var(--border-color);  border-collapse: collapse;}table {  width: 100%;  margin: 1.5rem 0;  background-color: var(--bg-secondary);}th, td {  padding: 0.75rem;  text-align: left;}th {  background-color: var(--bg-tertiary);  font-weight: bold;}input, textarea, select, button, .button {  background-color: var(--bg-secondary);  border: 1px solid var(--border-color);  color: var(--text-primary);  padding: 0.75rem;  font-family: inherit;  transition: all 0.3s ease;}input:focus, textarea:focus, select:focus {  outline: none;  border-color: var(--text-secondary);}input::placeholder, textarea::placeholder {  color: var(--text-muted);}/* Buttons & Interactive */button, .button {  color: var(--text-secondary);  padding: 0.75rem 1.5rem;  cursor: pointer;}button:hover, .button:hover {  color: var(--text-primary);  border-color: var(--text-muted);  background-color: 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 & Cards */article, .blog-item {  background-color: var(--bg-secondary);  border: 1px solid var(--border-color);  padding: 2rem;  margin-bottom: 2rem;  position: relative;  transition: all 0.3s ease;  width: 100%;  max-width: none;}article:hover, .blog-item:hover {  background-color: var(--hover-color);  border-color: var(--text-muted);  transform: translateY(-2px);}/* Blog Components */.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: var(--text-muted);  font-size: 0.72rem;}.blog-title {  font-size: 1.17rem;  margin-bottom: 0.5rem;  color: var(--text-primary);  text-decoration: none;  display: block;}.blog-title:hover { color: var(--text-secondary); }.blog-meta {  display: flex;  gap: 1rem;  margin-bottom: 1rem;  font-size: 0.81rem;  color: var(--text-muted);  flex-wrap: wrap;}.blog-meta span::before { content: '// '; }.blog-excerpt {  color: var(--text-secondary);  margin-bottom: 1rem;}/* Search & Meta */.meta, .date, .tags {  color: var(--text-muted);  font-size: 0.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: 0.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 & Badges */.tag, .tags span {  background-color: var(--bg-tertiary);  color: var(--text-secondary);  padding: 0.3rem 0.8rem;  font-size: 0.72rem;  border: 1px solid var(--border-color);  display: inline-block;}.tag::before, .tags span::before {  content: '';  color: var(--text-muted);}.tags {  display: flex;  flex-wrap: wrap;  gap: 0.5rem;  margin-top: 1rem;}/* 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 & Effects */.typing::after {  content: '_';  animation: blink 1s infinite;  color: var(--text-secondary);}@keyframes blink {  0%, 50% { opacity: 1; }  51%, 100% { opacity: 0; }}/* Responsive Design */@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: 767px) {  .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: 2rem; }  .search-wrapper, .hero { max-width: 100%; padding: 2rem 0; }  header { padding: 1.5rem 0; }  .blog-meta { font-size: 0.81rem; }  .gap-sm { gap: 0.5rem; }  .gap-md { gap: 1rem; }  .gap-lg { gap: 1.5rem; }}@media (max-width: 575px) {  .container, main, nav { padding: 0 0.75rem; }  nav ul li a { font-size: 0.9rem; }  article { padding: 1rem; }  h1 { font-size: 1.75rem; }  h2 { font-size: 1.5rem; }  h3 { font-size: 1.25rem; }  .search-input { padding: 0.75rem 1rem; font-size: 0.9rem; }  .hero { padding: 1.5rem 0; }}@media (max-width: 400px) {  .container, main, nav { padding: 0 0.5rem; }  nav { padding: 0.75rem 0.5rem; }  nav ul { flex-direction: column; gap: 0.75rem; text-align: center; }  article { padding: 0.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; }}/* Print Styles */@media print {  .container, main { max-width: none; padding: 0; }  nav, .search-container { display: none; }  article { break-inside: avoid; padding: 1rem 0; }}/* High DPI Displays */@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }}/* Prevent long words from breaking layout */p, h1, h2, h3, h4, h5, h6 {  overflow-wrap: break-word;}/* Improve tap targets */a, button {  min-height: 44px; /* Minimum recommended touch target size */}html {  font-size: 100%; /* Allows browser zoom to work properly */}body {  font-size: 1rem;  min-width: 320px;  -webkit-text-size-adjust: 100%;}/* Use relative units for font sizes */h1 { font-size: 2.5rem; }h2 { font-size: 2rem; }h3 { font-size: 1.75rem; }h4 { font-size: 1.5rem; }h5 { font-size: 1.25rem; }h6 { font-size: 1rem; }/* Responsive base font scaling */@media (max-width: 768px) {  html {    font-size: 16px; /* Set base font size for mobile */  }  body {    font-size: 1rem; /* 1rem = 16px on mobile */    line-height: 1.5; /* Slightly more spacing for readability */    padding: 0.5rem; /* Add some breathing room on small screens */  }  h1 {    font-size: 1.8rem !important; /* Larger on mobile for readability */    margin-bottom: 1.5rem !important;  }  h2 {    font-size: 1.5rem !important;  }  h3 {    font-size: 1.25rem !important;  }}/* Container should have max-width but be flexible */.container, main {  max-width: 100%; /* Allow container to shrink on mobile */  padding: 0 1rem; /* Smaller padding on mobile */  width: 100%;}@media (min-width: 768px) {  .container, main {    max-width: 900px; /* Fixed width on larger screens */    padding: 0 2rem;  }}nav {  flex-direction: column; /* Stack vertically on mobile */  gap: 1rem;  padding: 1rem;}@media (min-width: 768px) {  nav {    flex-direction: row; /* Horizontal on larger screens */  }}p, li, td, .blog-excerpt {  font-size: 1rem; /* Base font size */  line-height: 1.6; /* Better line spacing for readability */}@media (max-width: 768px) {  p, li, td, .blog-excerpt {    font-size: 1.05rem; /* Slightly larger text on mobile */    line-height: 1.7; /* More line spacing */  }  /* Increase spacing between paragraphs */  p {    margin-bottom: 1.25rem;  }}button, .button {  padding: 0.8rem 1.2rem; /* Smaller padding on mobile */  font-size: 1rem;}@media (min-width: 768px) {  button, .button {    padding: 0.75rem 1.5rem; /* Original padding on larger screens */  }}table {  display: block;  overflow-x: auto; /* Allow horizontal scrolling on small screens */  width: 100%;  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */}img {  max-width: 100%;  height: auto;}pre {  font-size: 0.9rem; /* Smaller code on mobile */  padding: 1rem;  overflow-x: auto; /* Horizontal scrolling for long code lines */}@media (min-width: 768px) {  pre {    font-size: 0.85rem; /* Original size on larger screens */  }}input, textarea, select {  font-size: 1rem; /* Larger on mobile for touch */  padding: 0.8rem;}@media (min-width: 768px) {  input, textarea, select {    font-size: 0.9rem; /* Original size on desktop */    padding: 0.75rem;  }}