:root{--bg-primary:#1a1a1a;--bg-secondary:#242424;--bg-elevated:#2d2d2d;--text-primary:#e8e8e8;--text-secondary:#a0a0a0;--text-tertiary:#707070;--accent-green:#4ade80;--accent-blue:#60a5fa;--accent-purple:#c084fc;--accent-yellow:#fbbf24;--accent-red:#f87171;--border-subtle:#ffffff1a;--border-medium:#fff3;--font-mono:"JetBrains Mono", "Fira Code", "Consolas", "Monaco", monospace;--font-size-base:14px;--font-size-sm:12px;--font-size-lg:16px;--font-size-xl:20px;--font-size-2xl:24px;--line-height:1.6;--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-5:40px;--space-6:48px;--transition-fast:.15s ease;--transition-base:.25s ease}*{box-sizing:border-box;margin:0;padding:0}html{font-size:var(--font-size-base)}body{font-family:var(--font-mono);background-color:var(--bg-primary);color:var(--text-primary);line-height:var(--line-height);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{margin-bottom:var(--space-2);font-weight:500;line-height:1.3}h1{font-size:var(--font-size-2xl)}h2{font-size:var(--font-size-xl)}h3{font-size:var(--font-size-lg)}p{margin-bottom:var(--space-2)}a{color:var(--accent-green);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--accent-blue);text-decoration:underline}a:focus-visible{outline:2px solid var(--accent-green);outline-offset:2px}button,.btn{font-family:var(--font-mono);font-size:var(--font-size-base);padding:var(--space-1) var(--space-2);background-color:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-medium);cursor:pointer;transition:all var(--transition-fast)}button:hover,.btn:hover{background-color:var(--bg-elevated);border-color:var(--accent-green);color:var(--accent-green)}button:active,.btn:active{transform:translateY(1px)}button:focus-visible,.btn:focus-visible{outline:2px solid var(--accent-green);outline-offset:2px}ul,ol{margin-left:var(--space-3);margin-bottom:var(--space-2)}li{margin-bottom:var(--space-1)}#app{flex-direction:column;min-height:100vh;display:flex}main{width:100%;max-width:1200px;padding:var(--space-3);flex:1;margin:0 auto}.text-secondary{color:var(--text-secondary)}.text-accent{color:var(--accent-green)}.container{max-width:1200px;padding:0 var(--space-3);margin:0 auto}.site-header{background-color:var(--bg-secondary);border-bottom:2px solid var(--border-medium);z-index:100;position:sticky;top:0}.terminal-banner{background-color:var(--bg-primary);padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);border-bottom:1px solid var(--border-subtle);line-height:1.2}.banner-line{color:var(--accent-green);white-space:pre;letter-spacing:0}.main-nav{max-width:1200px;padding:var(--space-2) var(--space-3);align-items:center;gap:var(--space-3);margin:0 auto;display:flex}.terminal-prompt{font-size:var(--font-size-sm);color:var(--text-secondary);white-space:nowrap;flex-shrink:0;align-items:center;line-height:1;display:flex}.prompt-user{color:var(--accent-green);font-weight:500}.prompt-at{color:var(--text-secondary)}.prompt-host{color:var(--accent-blue);font-weight:500}.prompt-colon{color:var(--text-secondary)}.prompt-path{color:var(--accent-purple)}.prompt-symbol{color:var(--text-primary);margin-left:4px}.nav-list{gap:var(--space-2);flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none;display:flex}.nav-list li{margin-bottom:0}.nav-link{padding:4px var(--space-1);color:var(--text-primary);transition:all var(--transition-fast);background-color:#0000;border:1px solid #0000;align-items:center;line-height:1;text-decoration:none;display:inline-flex}.nav-link:hover{color:var(--accent-green);background-color:var(--bg-elevated);border-color:var(--accent-green)}.command-prefix{color:var(--accent-yellow);margin-right:2px}.command-name{color:var(--accent-green);font-weight:500}.site-footer{background-color:var(--bg-secondary);border-top:2px solid var(--border-medium);margin-top:auto}.footer-divider{color:var(--border-medium);padding:0 var(--space-3);margin-top:-1px;font-size:8px;line-height:1;overflow:hidden}.footer-content{max-width:1200px;padding:var(--space-2) var(--space-3);gap:var(--space-2);flex-direction:column;margin:0 auto;display:flex}.footer-info{font-size:var(--font-size-sm);color:var(--text-secondary)}.footer-prompt{color:var(--accent-green)}.footer-text{color:var(--text-secondary);margin-left:var(--space-1)}.footer-copyright{font-size:var(--font-size-sm);color:var(--text-secondary);margin:0}.footer-links{gap:var(--space-2);display:flex}.footer-links a{font-size:var(--font-size-sm);color:var(--accent-blue)}.footer-links a:hover{color:var(--accent-green)}.terminal-box{border:1px solid var(--border-medium);background-color:var(--bg-secondary);padding:var(--space-3);position:relative}.terminal-box:before{content:"┌─────────────────────────────────────────────────────────────────────┐";color:var(--border-medium);white-space:nowrap;font-size:10px;line-height:1;position:absolute;top:-1px;left:0;right:0;overflow:hidden}.terminal-box:after{content:"└─────────────────────────────────────────────────────────────────────┘";color:var(--border-medium);white-space:nowrap;font-size:10px;line-height:1;position:absolute;bottom:-1px;left:0;right:0;overflow:hidden}.home-page{padding:var(--space-5) 0;max-width:800px}.home-page h1{font-size:var(--font-size-2xl);margin-bottom:var(--space-3)}.home-page h1:before{content:"$ ./hello.shn";font-size:var(--font-size-sm);color:var(--accent-yellow);margin-bottom:var(--space-1);display:block}.home-page .intro{font-size:var(--font-size-xl);color:var(--accent-green);margin-bottom:var(--space-4)}.home-page .intro:before{content:"> ";color:var(--accent-yellow)}.home-page .expanded-content{margin:var(--space-3) 0;padding:var(--space-3);background-color:var(--bg-secondary);border:1px solid var(--border-medium);border-left:3px solid var(--accent-green)}.home-page .expanded-content>p{margin-bottom:var(--space-3);line-height:1.6}.home-page .skills-highlight{margin:var(--space-3) 0;padding:var(--space-2);background-color:var(--bg-elevated);border-left:2px solid var(--accent-blue)}.home-page .skills-highlight strong{color:var(--accent-blue)}.home-page .skills-highlight strong:before{content:"# ";color:var(--accent-yellow)}.home-page .skills-highlight ul{margin:var(--space-2) 0 0 0;padding:0;list-style:none}.home-page .skills-highlight li{margin-bottom:var(--space-1);padding-left:var(--space-2);position:relative}.home-page .skills-highlight li:before{content:"✓";color:var(--accent-green);position:absolute;left:0}.resume-page{padding:var(--space-3) 0}.resume-page h1:before{content:"$ cat ";color:var(--accent-yellow)}.resume-page section{margin-bottom:var(--space-5)}.resume-page h2:before{content:"## ";color:var(--accent-green);margin-right:var(--space-1)}.skills-list{gap:var(--space-2);margin:0;padding:0;list-style:none;display:grid}.skills-list li{margin:0}.skill-name{margin-bottom:var(--space-1);color:var(--accent-blue);display:block}.skill-name:before{content:"├─ ";color:var(--border-medium)}.skill-bar{background-color:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:0;height:8px;overflow:hidden}.skill-level{background:linear-gradient(90deg, var(--accent-green), var(--accent-blue));height:100%;transition:width var(--transition-base)}.job{margin-bottom:var(--space-4);padding:var(--space-3);background-color:var(--bg-secondary);border:1px solid var(--border-medium);position:relative}.job:before{content:"┌───────────────────────────────────────┐";color:var(--border-medium);font-size:8px;line-height:1;position:absolute;top:-1px;left:0}.job h3{color:var(--accent-green);margin-bottom:var(--space-1)}.job h3:before{content:"▸ ";color:var(--accent-yellow)}.job-dates{color:var(--text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--space-2)}.job-dates:before{content:"📅 ";margin-right:4px}.job-tasks{margin:var(--space-2) 0;padding-left:var(--space-3);list-style:none}.job-tasks li:before{content:"→ ";color:var(--accent-green);margin-right:var(--space-1);margin-left:calc(var(--space-3) * -1)}.job-skills{gap:var(--space-1);margin-top:var(--space-2);flex-wrap:wrap;display:flex}.tag{padding:4px var(--space-1);background-color:var(--bg-elevated);color:var(--accent-purple);font-size:var(--font-size-sm);border:1px solid var(--accent-purple);display:inline-block}.tag:before{content:"[";color:var(--border-medium)}.tag:after{content:"]";color:var(--border-medium)}.portfolio-page{padding:var(--space-3) 0}.portfolio-page h1:before{content:"$ ls -la ~/";color:var(--accent-yellow);margin-right:var(--space-1)}.filter-buttons{gap:var(--space-2);margin:var(--space-3) 0;flex-wrap:wrap;display:flex}.filter-buttons:before{content:"filter: ";color:var(--text-secondary);margin-right:var(--space-1);align-items:center;display:flex}.filter-btn{padding:var(--space-1) var(--space-2);background-color:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-medium);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-mono)}.filter-btn:before{content:"--";color:var(--accent-yellow);margin-right:4px}.filter-btn:hover{border-color:var(--accent-green);color:var(--accent-green);background-color:var(--bg-elevated)}.filter-btn.active{background-color:var(--bg-elevated);color:var(--accent-green);border-color:var(--accent-green)}.filter-btn.active:before{content:"✓ --"}.portfolio-grid{gap:var(--space-3);margin-top:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));display:grid}.portfolio-item{background-color:var(--bg-secondary);border:1px solid var(--border-medium);padding:var(--space-3);transition:all var(--transition-fast);position:relative}.portfolio-item:before{content:"┌─ " attr(data-type) " ─";color:var(--accent-blue);padding:0 var(--space-1);font-size:10px;line-height:1;position:absolute;top:-1px;left:0}.portfolio-item:hover{border-color:var(--accent-green);transform:translateY(-2px);box-shadow:0 4px 8px #4ade801a}.portfolio-image{object-fit:contain;width:100%;height:120px;margin-bottom:var(--space-2);background-color:var(--bg-elevated);padding:var(--space-2);border:1px solid var(--border-subtle)}.portfolio-emoji{text-align:center;margin-bottom:var(--space-2);font-size:48px}.portfolio-item h3{margin-bottom:var(--space-2);color:var(--accent-green)}.portfolio-item h3:before{content:"▸ ";color:var(--accent-yellow)}.portfolio-text{color:var(--text-secondary);margin-bottom:var(--space-2);line-height:1.5}.portfolio-type{padding:4px var(--space-1);background-color:var(--bg-elevated);color:var(--accent-blue);font-size:var(--font-size-sm);text-transform:capitalize;border:1px solid var(--accent-blue);display:inline-block}.portfolio-type:before{content:"[";color:var(--border-medium)}.portfolio-type:after{content:"]";color:var(--border-medium)}.contact-page{padding:var(--space-5) 0;max-width:600px}.contact-page h1:before{content:"$ cat ";color:var(--accent-yellow)}.contact-info{margin-top:var(--space-4)}.contact-list{margin:var(--space-3) 0;padding:0;list-style:none}.contact-list li{margin-bottom:var(--space-2);padding:var(--space-2);background-color:var(--bg-secondary);border:1px solid var(--border-medium);border-left:3px solid var(--accent-blue)}.contact-list li:before{content:"→ ";color:var(--accent-green);margin-right:var(--space-1)}.contact-list strong{min-width:100px;color:var(--accent-yellow);display:inline-block}.contact-list strong:after{content:":";color:var(--text-secondary);margin-left:4px}.not-found{padding:var(--space-6) 0;text-align:center}.not-found h1{color:var(--accent-red);font-size:var(--font-size-2xl);margin-bottom:var(--space-2)}@media (width<=768px){:root{--font-size-base:13px}main{padding:var(--space-2)}.terminal-banner{padding:var(--space-1) var(--space-2);font-size:10px}.banner-line{text-overflow:ellipsis;overflow:hidden}.main-nav{align-items:flex-start;gap:var(--space-2);flex-direction:column}.terminal-prompt{font-size:11px}.nav-list{gap:var(--space-1);width:100%}.footer-content{text-align:center;flex-direction:column}.portfolio-grid{grid-template-columns:1fr}.filter-buttons{flex-wrap:wrap}.filter-buttons:before{width:100%;margin-bottom:var(--space-1)}}@media (width<=320px){:root{--font-size-base:12px}.terminal-banner{font-size:8px}.nav-list{gap:var(--space-1)}.nav-link{padding:4px var(--space-1);font-size:var(--font-size-sm)}}