:root {/* Brand Colors - PCB / Maker / Tech */--color-bg-base: #101214;--color-bg-surface: #1a1d21;--color-bg-surface-glass: rgba(26, 29, 33, 0.9);--color-primary: #00ff9d;/* PCB Trace Green/Cyan */--color-primary-dim: rgba(0, 255, 157, 0.1);--color-accent: #ff3366;/* LED Red */--color-warning: #ffcc00;/* Caution Tape Yellow */--color-border: #2d333b;--color-border-active: #00ff9d;--color-text-main: #e6edf3;--color-text-muted: #8b949e;/* Typography */--font-main: 'Inter', system-ui, -apple-system, sans-serif;--font-mono: 'JetBrains Mono', monospace;/* Datasheet font *//* Spacing */--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 32px;--space-xl: 64px;/* Layout */--sidebar-width: 300px;--max-content-width: 800px;}* {box-sizing: border-box;margin: 0;padding: 0;}body {font-family: var(--font-main);background-color: var(--color-bg-base);color: var(--color-text-main);line-height: 1.6;min-height: 100vh;-webkit-font-smoothing: antialiased;/* Technical Grid Background */background-image:linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);background-size: 40px 40px;background-position: -1px -1px;}/* Scrollbar */::-webkit-scrollbar {width: 8px;}::-webkit-scrollbar-track {background: var(--color-bg-base);}::-webkit-scrollbar-thumb {background: var(--color-border);border-radius: 4px;}::-webkit-scrollbar-thumb:hover {background: var(--color-text-muted);}a {color: var(--color-primary);text-decoration: none;transition: all 0.2s ease;position: relative;}a:hover {color: #fff;text-shadow: 0 0 5px var(--color-primary);}/* Animations */@keyframes fadeIn {from {opacity: 0;transform: translateY(10px);}to {opacity: 1;transform: translateY(0);}}@keyframes scanline {0% {transform: translateY(-100%);}100% {transform: translateY(100%);}}/* App Layout */.app-container {display: flex;min-height: 100vh;}/* Sidebar - "Instrument Panel" Look */.sidebar {width: var(--sidebar-width);background: var(--color-bg-surface);border-right: 1px solid var(--color-border);padding: 0;/* Removing padding to allow full-width items */position: fixed;height: 100vh;overflow-y: auto;top: 0;left: 0;display: flex;flex-direction: column;z-index: 100;box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);}.brand {font-family: var(--font-mono);font-size: 1.2rem;font-weight: 800;color: #fff;padding: var(--space-lg);border-bottom: 1px solid var(--color-border);letter-spacing: -0.5px;display: flex;align-items: center;gap: var(--space-sm);background: repeating-linear-gradient(45deg,var(--color-bg-surface),var(--color-bg-surface) 10px,#1f2428 10px,#1f2428 20px);}.brand span {color: var(--color-primary);}.nav-links {list-style: none;display: flex;flex-direction: column;padding: var(--space-md);gap: 2px;}.nav-item a {display: block;padding: var(--space-sm) var(--space-md);border-radius: 2px;color: var(--color-text-muted);font-family: var(--font-mono);/* Technical font for list */font-size: 0.9rem;border-left: 2px solid transparent;}.nav-item a:hover {background: rgba(255, 255, 255, 0.03);color: #fff;}.nav-item a.active {background: var(--color-primary-dim);color: var(--color-primary);border-left: 2px solid var(--color-primary);box-shadow: inset 0 0 10px var(--color-primary-dim);}/* Main Content */.main-content {margin-left: var(--sidebar-width);flex: 1;padding: var(--space-xl);max-width: 100%;}.content-wrapper {max-width: var(--max-content-width);margin: 0 auto;animation: fadeIn 0.4s ease-out;}/* Typography - Technical Headers */h1,h2,h3,h4,h5,h6 {color: #fff;font-family: var(--font-mono);letter-spacing: -0.03em;margin-bottom: var(--space-md);text-wrap: balance;line-height: 1.3;}h1 {font-size: 2rem;border-bottom: 2px solid var(--color-border);padding-bottom: var(--space-sm);margin-bottom: var(--space-xl);display: flex;align-items: center;justify-content: space-between;/* Space for sharing action */flex-wrap: wrap;/* Prevent overlap on narrow screens */gap: var(--space-md);}.share-actions {display: flex;gap: var(--space-sm);}h1::before {content: '#';margin-right: var(--space-sm);color: var(--color-primary);opacity: 0.5;}h2 {font-size: 1.5rem;margin-top: var(--space-xl);color: var(--color-primary);border-bottom: 1px solid rgba(0, 255, 157, 0.1);padding-bottom: var(--space-xs);}h3 {font-size: 1.25rem;margin-top: var(--space-lg);color: #fff;font-weight: 600;}h4 {font-size: 1.1rem;margin-top: var(--space-md);color: var(--color-text-main);text-transform: uppercase;letter-spacing: 1px;font-weight: 600;}h5 {font-size: 1rem;margin-top: var(--space-md);color: var(--color-primary);font-weight: normal;}h6 {font-size: 0.9rem;color: var(--color-text-muted);text-transform: uppercase;}/* Component Styles - "Lab Equipment" Feel */.card {background: var(--color-bg-surface);border: 1px solid var(--color-border);border-radius: 4px;/* Sharper corners */padding: var(--space-lg);margin-bottom: var(--space-lg);box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);position: relative;overflow: hidden;}/* Technical Corner Markers on Cards */.card::after {content: '';position: absolute;top: 0;right: 0;width: 20px;height: 20px;border-top: 2px solid var(--color-border);border-right: 2px solid var(--color-border);opacity: 0.5;}/* Horizontal Gallery Strip */.gallery-container {width: 100%;max-width: 100%;overflow-x: auto;white-space: nowrap;padding: var(--space-md) 0;display: flex;gap: var(--space-md);scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;/* Customize scrollbar for gallery */scrollbar-width: thin;scrollbar-color: var(--color-primary) var(--color-bg-base);}.gallery-container::-webkit-scrollbar {height: 8px;}.gallery-container::-webkit-scrollbar-track {background: var(--color-bg-base);border-radius: 4px;}.gallery-container::-webkit-scrollbar-thumb {background: var(--color-primary);border-radius: 4px;}.gallery-item {display: inline-block;height: 300px;/* Fixed height for uniformity */flex: 0 0 auto;scroll-snap-align: center;border: 1px solid var(--color-border);border-radius: 2px;overflow: hidden;position: relative;transition: transform 0.2s ease, border-color 0.2s ease;background: var(--color-bg-surface);}@media (max-width: 768px) {.gallery-item {height: 200px;}}.gallery-item:hover {border-color: var(--color-primary);transform: scale(1.02);z-index: 10;}.gallery-item img {height: 100%;width: auto;display: block;object-fit: cover;}.gallery-caption {position: absolute;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, 0.8);color: #fff;padding: var(--space-xs) var(--space-sm);font-size: 0.8rem;font-family: var(--font-mono);opacity: 0;transition: opacity 0.2s ease;}.gallery-item:hover .gallery-caption {opacity: 1;}/* Interactive Master-Detail Gallery */.interactive-gallery {display: flex;flex-direction: column;gap: var(--space-md);margin-top: var(--space-lg);border: 1px solid var(--color-border);padding: var(--space-md);background: rgba(0, 0, 0, 0.2);}.gallery-main-stage {width: 100%;height: 450px;background: #000;border: 1px solid var(--color-border);display: flex;align-items: center;justify-content: center;overflow: hidden;position: relative;}.gallery-main-image {max-width: 100%;max-height: 100%;object-fit: contain;opacity: 1;transition: opacity 0.3s ease-in-out;}.gallery-main-image.fade-out {opacity: 0;}.gallery-thumbnails-track {display: flex;gap: var(--space-sm);overflow-x: auto;padding: var(--space-xs) 0;scrollbar-width: thin;scrollbar-color: var(--color-primary) var(--color-bg-base);}.gallery-thumbnails-track::-webkit-scrollbar {height: 6px;}.gallery-thumbnails-track::-webkit-scrollbar-thumb {background: var(--color-primary);}.gallery-thumbnail-item {height: 80px;flex: 0 0 auto;border: 2px solid transparent;cursor: pointer;opacity: 0.6;transition: all 0.2s ease;}.gallery-thumbnail-item:hover {opacity: 1;border-color: var(--color-text-muted);}.gallery-thumbnail-item.active {opacity: 1;border-color: var(--color-primary);box-shadow: 0 0 8px rgba(0, 255, 157, 0.3);}.project-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: var(--space-md);}/* Instructional / Manual Styles */.instruction-step {display: flex;gap: var(--space-md);margin-bottom: var(--space-md);padding: var(--space-md);background: rgba(255, 255, 255, 0.02);border-left: 2px solid var(--color-border);transition: all 0.2s ease;}.instruction-step:hover {border-left-color: var(--color-primary);background: rgba(255, 255, 255, 0.04);}.step-number {font-family: var(--font-mono);font-size: 1.5rem;font-weight: bold;color: var(--color-primary);opacity: 0.8;line-height: 1;}.technical-list {list-style: none;counter-reset: tech-counter;margin-top: var(--space-md);}.technical-list li {position: relative;padding-left: var(--space-xl);margin-bottom: var(--space-md);padding-bottom: var(--space-md);border-bottom: 1px solid rgba(255, 255, 255, 0.05);}.technical-list li:last-child {border-bottom: none;}.technical-list li::before {counter-increment: tech-counter;content: counter(tech-counter, decimal-leading-zero) ".";position: absolute;left: 0;top: 0;font-family: var(--font-mono);color: var(--color-primary);font-size: 0.9em;opacity: 0.7;}.note-box {background: rgba(0, 255, 157, 0.05);border-left: 3px solid var(--color-primary);padding: var(--space-md);margin: var(--space-md) 0;font-size: 0.95em;color: var(--color-text-main);}.note-box strong {display: block;margin-bottom: var(--space-xs);color: var(--color-primary);font-family: var(--font-mono);text-transform: uppercase;font-size: 0.8em;letter-spacing: 1px;}/* Warning Box - Caution Tape Style */.warning-box {background: repeating-linear-gradient(45deg,rgba(255, 183, 0, 0.05),rgba(255, 183, 0, 0.05) 10px,rgba(0, 0, 0, 0) 10px,rgba(0, 0, 0, 0) 20px) !important;border: 1px solid var(--color-warning) !important;color: var(--color-warning) !important;font-family: var(--font-mono);padding: var(--space-md);margin: var(--space-md) 0;border-radius: 4px;}/* Mobile Responsive */@media (max-width: 768px) {.app-container {flex-direction: column;}.sidebar {width: 100%;height: auto;position: relative;padding: var(--space-md);}.main-content {margin-left: 0;padding: var(--space-md);}}/* Project Cards on Home Page */.project-card-compact {display: flex;flex-direction: column;padding: 0;text-decoration: none;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);background: var(--color-bg-surface);height: 100%;}.project-card-compact:hover {transform: translateY(-5px);border-color: var(--color-primary);box-shadow: 0 10px 30px rgba(0, 255, 157, 0.1);}.project-image-preview {width: 100%;height: 180px;overflow: hidden;border-bottom: 1px solid var(--color-border);}.project-image-preview img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s ease;}.project-card-compact:hover .project-image-preview img {transform: scale(1.1);}.project-info {padding: var(--space-md);flex-grow: 1;display: flex;flex-direction: column;}.project-info h3 {font-size: 1.1rem;margin-bottom: var(--space-xs);color: #fff;}.project-info p {font-size: 0.9rem;color: var(--color-text-muted);margin-bottom: var(--space-md);flex-grow: 1;}.view-project {font-family: var(--font-mono);font-size: 0.8rem;color: var(--color-primary);text-transform: uppercase;letter-spacing: 1px;display: flex;align-items: center;gap: 5px;}.project-card-compact:hover .view-project {text-decoration: underline;}/* Optimization for Large Project Images */.image-full img {width: auto !important;/* Override inline 100% to maintain aspect ratio */max-width: 100%;/* Ensure it doesn't overflow container */max-height: 600px;/* Restrict excessive height */display: block;margin: 0 auto;/* Center alignment */object-fit: contain;/* Ensure image is fully visible */}@media (max-width: 768px) {.image-full img {max-height: 400px;}}/* Global Content Image Fixes for Best Practices - Excluding Galleries */.project-post img:not(.gallery-main-image):not(.gallery-thumbnail-item):not(.gallery-item img):not(.project-image-preview img),.legacy-content img:not(.gallery-main-image):not(.gallery-thumbnail-item):not(.gallery-item img):not(.project-image-preview img),.wsite-image img:not(.gallery-main-image):not(.gallery-thumbnail-item):not(.gallery-item img):not(.project-image-preview img) {max-width: 800px !important;/* Cap width for better readability */width: auto !important;height: auto !important;display: block;margin: 1rem auto;border-radius: 4px;}/* Code Snippet Styles & Syntax Highlighting */pre {background: var(--color-bg-surface) !important;border: 1px solid var(--color-border);border-radius: 6px;padding: 1.5rem;margin: 1.5rem 0;overflow-x: auto;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);position: relative;}code {font-family: var(--font-mono);font-size: 0.9rem;line-height: 1.5;color: var(--color-text-main);background: transparent !important;}/* Syntax Colors - Integrated with highlight.js */.hljs-comment,.hljs-quote {color: var(--color-text-muted);font-style: italic;}.hljs-keyword,.hljs-selector-tag,.hljs-addition {color: var(--color-primary);}.hljs-number,.hljs-string,.hljs-meta,.hljs-literal,.hljs-doctag,.hljs-regexp {color: #79c0ff;}.hljs-title,.hljs-section,.hljs-name,.hljs-selector-id,.hljs-selector-class {color: #d2a8ff;}.hljs-attribute,.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-class .hljs-title,.hljs-type {color: #ffa657;}.hljs-symbol,.hljs-bullet,.hljs-subst,.hljs-meta,.hljs-link {color: #a5d6ff;}.hljs-built_in,.hljs-deletion {color: var(--color-accent);}.hljs-formula {background-color: #eee;font-style: italic;}.hljs-emphasis {font-style: italic;}.hljs-strong {font-weight: bold;}/* Legacy Content Lists */.legacy-content ul,.legacy-content ol {margin-top: var(--space-sm);margin-bottom: var(--space-sm);padding-left: var(--space-lg);/* 32px standard padding */margin-left: var(--space-md);/* Additional indent from text */list-style-position: outside;}.legacy-content ul {list-style-type: disc;}.legacy-content ol {list-style-type: decimal;}.legacy-content li {margin-bottom: var(--space-xs);color: var(--color-text-main);}/* =========================================Utilities & Common Components========================================= *//* Typography Utilities */.text-center {text-align: center;}.text-left {text-align: left;}.text-right {text-align: right;}.text-muted {color: var(--color-text-muted);}.text-sm {font-size: 0.9em;}/* Spacing Utilities */.mt-sm {margin-top: 0.5rem;}.mt-md {margin-top: 1rem;}.mt-lg {margin-top: 1.5rem;}.mb-sm {margin-bottom: 0.5rem;}.mb-md {margin-bottom: 1rem;}.mb-lg {margin-bottom: 1.5rem;}.my-sm {margin-top: 0.5rem;margin-bottom: 0.5rem;}.my-md {margin-top: 1rem;margin-bottom: 1rem;}.my-lg {margin-top: 1.5rem;margin-bottom: 1.5rem;}/* Font Size Utilities */.text-sm {font-size: 0.9em;}.text-lg {font-size: 1.25em;}.text-xl {font-size: 1.5em;}/* Image Utilities */.img-full {width: 100%;border-radius: 4px;display: block;}/* Component: Tech Table */.tech-table {width: 100%;border-collapse: collapse;margin: var(--space-md) 0;font-family: var(--font-mono);font-size: 0.9em;border: 1px solid var(--color-border);}.tech-table th,.tech-table td {text-align: left;padding: var(--space-sm) var(--space-md);border-bottom: 1px solid var(--color-border);}.tech-table th {background-color: var(--color-bg-surface);color: var(--color-primary);font-weight: 600;border-bottom: 2px solid var(--color-border-active);}.tech-table tr:hover {background-color: rgba(255, 255, 255, 0.02);}/* Component: Video Container (Responsive) */.video-container {position: relative;padding-bottom: 56.25%;/* 16:9 Aspect Ratio */height: 0;overflow: hidden;border-radius: 4px;margin: 2rem 0;border: 1px solid var(--color-border);background: #000;}.video-container iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0;}/* Component: Download Block */.download-block {margin: 10px 0;padding: 10px;background: rgba(255, 255, 255, 0.05);border-radius: 4px;border: 1px solid var(--color-border);}.download-block a {display: flex;align-items: center;gap: 10px;font-weight: bold;color: var(--color-primary);text-decoration: none;}.download-block a:hover {text-decoration: underline;background: rgba(255, 255, 255, 0.05);}.download-block img {opacity: 0.8;width: 32px;/* Standard icon size */height: auto;}/* Component: Profile Header (About Page) */.profile-card {display: grid;grid-template-columns: 1fr 3fr;gap: 40px;align-items: start;margin-bottom: var(--space-xl);}.profile-header h2 {color: var(--color-primary);font-weight: 300;font-size: 2rem;border-bottom: none;margin-bottom: 0;}@media (max-width: 768px) {.profile-card {grid-template-columns: 1fr !important;gap: 20px !important;}}.text-primary-dim {color: var(--color-primary);opacity: 0.5;}.projects-header {margin-bottom: var(--space-lg);display: flex;align-items: center;gap: 10px;}/* Technical Sharing Dock Styles */.share-dock {margin-top: var(--space-xl);padding: var(--space-lg);background: rgba(0, 255, 157, 0.03);border: 1px solid var(--color-border);border-radius: 4px;display: flex;flex-direction: column;gap: var(--space-md);}.share-dock-header {font-family: var(--font-mono);font-size: 0.8rem;color: var(--color-primary);text-transform: uppercase;letter-spacing: 2px;display: flex;align-items: center;gap: 10px;}.share-buttons {display: flex;gap: var(--space-md);flex-wrap: wrap;}.btn-share {background: transparent;border: 1px solid var(--color-border);color: var(--color-text-muted);padding: var(--space-sm) var(--space-md);font-family: var(--font-mono);font-size: 0.8rem;cursor: pointer;transition: all 0.2s ease;display: flex;align-items: center;gap: 8px;border-radius: 2px;text-decoration: none !important;}.btn-share:hover {border-color: var(--color-primary);color: #fff;background: var(--color-primary-dim);box-shadow: 0 0 10px var(--color-primary-dim);}.btn-share.btn-primary {border-color: var(--color-primary);color: var(--color-primary);}.share-success-msg {font-size: 0.7rem;color: var(--color-primary);font-style: italic;margin-left: 10px;opacity: 0;transition: opacity 0.3s ease;}.share-success-msg.visible {opacity: 1;}@media (max-width: 480px) {h1 {font-size: 1.5rem;}}