:root{
    --bg: #0a0e12;
    --bg-panel: #10151b;
    --bg-panel-raised: #161d25;
    --border: #232c35;
    --text-primary: #e8eef3;
    --text-muted: #8a97a3;
    --text-dim: #55626d;
    --accent-teal: #4fd1c5;
    --accent-amber: #f5a623;
    --nav-bg: rgba(10,14,18,0.85);
    --shadow-color: rgba(0,0,0,0.65);
    --selection-text: #062522;
    --mono: 'JetBrains Mono', monospace;
    --sans: 'IBM Plex Sans', sans-serif;
  }

  :root[data-theme="light"]{
    --bg: #f5f7f9;
    --bg-panel: #ffffff;
    --bg-panel-raised: #edf1f4;
    --border: #d7dee4;
    --text-primary: #12181f;
    --text-muted: #4c5a68;
    --text-dim: #7c8794;
    --accent-teal: #0e8f83;
    --accent-amber: #b4590c;
    --nav-bg: rgba(245,247,249,0.85);
    --shadow-color: rgba(15,23,31,0.14);
    --selection-text: #f2fbf9;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--sans);
    line-height: 1.6;
    transition: background-color .25s ease, color .25s ease;
  }
  ::selection{ background: var(--accent-teal); color: var(--selection-text); }

  a{ color: var(--accent-teal); text-decoration: none; }
  a:hover{ text-decoration: underline; }

  :focus-visible{
    outline: 2px solid var(--accent-teal);
    outline-offset: 3px;
  }

  .wrap{
    max-width: 880px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ---------- NAV ---------- */
  nav{
    position: sticky; top:0; z-index: 50;
    background: var(--nav-bg);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
  }
  nav .wrap{
    display:flex; align-items:center; justify-content:space-between;
    height: 56px;
  }
  .nav-left{ display:flex; align-items:center; gap: 14px; }
  .nav-logo{
    font-family: var(--mono); font-size: 14px; color: var(--text-primary);
  }
  .nav-logo span{ color: var(--accent-teal); }
  .nav-clock{
    font-family: var(--mono); font-size: 12px; color: var(--text-dim);
    border-left: 1px solid var(--border); padding-left: 14px;
  }
  .nav-clock .dot{
    display:inline-block; width:6px; height:6px; border-radius:50%;
    background: var(--accent-teal); margin-right:6px;
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }
  @media (prefers-reduced-motion: reduce){ .nav-clock .dot{ animation:none; } }
  .nav-links{ display:flex; gap: 22px; list-style:none; margin:0; padding:0; }
  .nav-links a{
    color: var(--text-muted); font-family: var(--mono); font-size: 13px;
  }
  .nav-links a:hover{ color: var(--accent-teal); text-decoration:none; }
  @media (max-width: 700px){
    .nav-clock{ display:none; }
  }
  .nav-right{ display:flex; align-items:center; gap: 16px; }
  .nav-hamburger{
    display:none; align-items:center; gap:6px;
    font-family: var(--mono); font-size: 12px; color: var(--text-dim);
    background: var(--bg-panel-raised); border: 1px solid var(--border); border-radius: 6px;
    padding: 6px 10px; cursor:pointer;
    transition: border-color .15s ease, color .15s ease;
  }
  .nav-hamburger:hover{ border-color: var(--accent-teal); color: var(--accent-teal); }
  .nav-search-btn{
    font-family: var(--mono); font-size: 11.5px; color: var(--text-dim);
    background: var(--bg-panel-raised); border: 1px solid var(--border); border-radius: 6px;
    padding: 5px 10px; display:flex; align-items:center; gap:7px; cursor:pointer;
    transition: border-color .15s ease, color .15s ease;
  }
  .nav-search-btn:hover{ border-color: var(--accent-teal); color: var(--accent-teal); }
  .nav-search-btn kbd{
    font-family: var(--mono); font-size: 10px; color: var(--text-dim);
    background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
  }
  @media (max-width: 600px){
    .nav-search-btn kbd{ display:none; }
  }

  @media (max-width: 640px){
    .nav-hamburger{ display:flex; }
    .nav-links{
      position: absolute; top: 56px; left: 0; right: 0;
      flex-direction: column; align-items: stretch; gap: 0;
      background: var(--bg-panel); border-bottom: 1px solid var(--border);
      max-height: 0; overflow: hidden;
      padding: 0 24px;
      transition: max-height .25s ease, padding .25s ease;
    }
    .nav-links.open{ max-height: 320px; padding: 8px 24px 14px; }
    .nav-links li{ width: 100%; }
    .nav-links a{
      display:block; width: 100%; padding: 11px 0;
      border-bottom: 1px solid var(--border); font-size: 13px;
    }
    .nav-links li:last-child a{ border-bottom: none; }
  }
  @media (prefers-reduced-motion: reduce){
    .nav-links{ transition: none; }
  }

  /* ---------- COMMAND PALETTE ---------- */
  .cmdk-overlay{
    position: fixed; inset: 0; z-index: 200;
    background: rgba(6,9,12,0.6); backdrop-filter: blur(3px);
    display:flex; align-items:flex-start; justify-content:center;
    padding-top: 12vh;
    opacity: 0; transition: opacity .15s ease;
  }
  .cmdk-overlay[hidden]{ display:none; }
  .cmdk-overlay.open{ opacity: 1; }
  .cmdk-modal{
    width: min(560px, 90vw);
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 30px 80px -20px var(--shadow-color);
    overflow: hidden;
    transform: translateY(-8px);
    transition: transform .15s ease;
  }
  .cmdk-overlay.open .cmdk-modal{ transform: translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .cmdk-overlay, .cmdk-modal{ transition: none; }
  }
  .cmdk-inputrow{
    display:flex; align-items:center; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid var(--border);
  }
  .cmdk-inputrow .prompt{ color: var(--accent-teal); font-family: var(--mono); font-size: 16px; }
  .cmdk-input{
    flex:1; background: none; border:none; outline:none;
    color: var(--text-primary); font-family: var(--mono); font-size: 15px;
    caret-color: var(--accent-teal);
  }
  .cmdk-list{ list-style:none; margin:0; padding: 6px; max-height: 320px; overflow-y:auto; }
  .cmdk-item{
    display:flex; justify-content:space-between; align-items:center; gap: 10px;
    padding: 9px 10px; border-radius: 6px; cursor:pointer;
    font-family: var(--mono); font-size: 13.5px; color: var(--text-muted);
  }
  .cmdk-item .cmdk-label{ color: var(--text-primary); }
  .cmdk-item .cmdk-hint{ color: var(--text-dim); font-size: 11.5px; white-space:nowrap; }
  .cmdk-item.active{ background: var(--bg-panel-raised); }
  .cmdk-item.active .cmdk-label{ color: var(--accent-teal); }
  .cmdk-empty{ padding: 16px 10px; color: var(--text-dim); font-family: var(--mono); font-size: 13px; }
  .cmdk-footer{
    display:flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--border);
    font-family: var(--mono); font-size: 10.5px; color: var(--text-dim);
  }
  .cmdk-footer kbd{
    background: var(--bg-panel-raised); border: 1px solid var(--border); border-radius: 4px;
    padding: 0 5px; margin-right: 2px;
  }

  /* ---------- SCROLL REVEAL ---------- */
  .reveal{
    opacity: 0; transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .reveal.in-view{ opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
  }

  /* ---------- TERMINAL WINDOW CHROME ---------- */
  .term{
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 60px -20px var(--shadow-color);
  }
  .term-bar{
    display:flex; align-items:center; gap:8px;
    padding: 10px 14px;
    background: var(--bg-panel-raised);
    border-bottom: 1px solid var(--border);
    font-family: var(--mono); font-size: 12px; color: var(--text-dim);
  }
  .term-dot{ width:10px; height:10px; border-radius:50%; background:#3a4550; transition: background .15s ease; }
  .term-bar:hover .term-dot:nth-child(1){ background:#ff5f57; }
  .term-bar:hover .term-dot:nth-child(2){ background:#febc2e; }
  .term-bar:hover .term-dot:nth-child(3){ background:#28c840; }
  .term-title{ margin-left: 6px; }
  .term-body{
    padding: 20px 22px;
    font-family: var(--mono);
    font-size: 13.5px;
    color: var(--text-muted);
    white-space: pre-wrap;
  }

  /* ---------- HERO ---------- */
  header.hero{
    padding: 72px 0 44px;
    position: relative;
    overflow: hidden;
  }
  .hero-canvas{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
    opacity: 0.7;
    pointer-events: none;
  }
  .hero-content{ position: relative; z-index: 1; }
  .hero-eyebrow{
    font-family: var(--mono); font-size: 12.5px; color: var(--text-dim);
    margin: 0; letter-spacing: 0.02em;
  }
  .hero-eyebrow::before{ content: "$ "; color: var(--accent-teal); }

  .hero-name{
    font-family: var(--mono);
    font-size: clamp(32px, 6vw, 52px);
    font-weight: 700;
    margin: 14px 0 4px;
    letter-spacing: -0.02em;
  }
  .hero-role{
    font-family: var(--mono);
    color: var(--accent-teal);
    font-size: clamp(14px, 2vw, 17px);
    margin: 0 0 18px;
  }
  .hero-role::before{ content: "> "; color: var(--text-dim); }
  .hero-desc{
    max-width: 560px;
    color: var(--text-muted);
    font-size: 16px;
  }
  .cursor{
    display:inline-block; width:9px; height:1.1em; background:var(--accent-teal);
    vertical-align: text-bottom; animation: blink 1s step-end infinite;
  }
  @media (prefers-reduced-motion: reduce){
    .cursor{ animation: none; }
  }
  @keyframes blink{ 50%{ opacity:0; } }

  .uptime-row{
    display:flex; gap: 28px; flex-wrap:wrap;
    margin-top: 30px;
    font-family: var(--mono);
  }
  .uptime-stat .num{ font-size: 22px; color: var(--text-primary); font-weight:700; }
  .uptime-stat .label{ font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }


  /* ---------- SECTION GENERIC ---------- */
  section{ padding: 56px 0; border-top: 1px solid var(--border); }
  .eyebrow{
    font-family: var(--mono); font-size: 12px; color: var(--accent-amber);
    text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 10px;
  }
  .eyebrow::before{ content: "# "; color: var(--text-dim); }
  h2.section-title{
    font-family: var(--mono);
    font-size: clamp(22px, 3.4vw, 30px);
    margin: 0 0 26px;
    font-weight: 700;
  }

  /* ---------- ABOUT ---------- */
  .about-body{ max-width: 620px; color: var(--text-muted); font-size: 16px; }
  .about-body strong{ color: var(--text-primary); font-weight: 600; }

  /* ---------- EXPERIENCE TIMELINE ---------- */
  .timeline{ position:relative; padding-left: 34px; }
  .timeline::before{
    content:""; position:absolute; left:9px; top:6px; bottom:6px; width:1px;
    background: var(--border);
  }
  .tl-item{ position:relative; margin-bottom: 34px; }
  .tl-item:last-child{ margin-bottom:0; }
  .tl-marker{
    position:absolute; left:-34px; top:2px;
    width: 20px; height:20px; border-radius:50%;
    background: var(--bg-panel); border: 1px solid var(--accent-teal);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--mono); font-size: 10px; color: var(--accent-teal);
  }
  .tl-item.current .tl-marker{
    background: var(--accent-teal); color: #062522;
    box-shadow: 0 0 0 4px rgba(79,209,197,0.15);
    animation: markerPulse 2.4s ease-in-out infinite;
  }
  @keyframes markerPulse{
    0%,100%{ box-shadow: 0 0 0 4px rgba(79,209,197,0.15); }
    50%{ box-shadow: 0 0 0 7px rgba(79,209,197,0.06); }
  }
  @media (prefers-reduced-motion: reduce){ .tl-item.current .tl-marker{ animation:none; } }
  .tl-meta{
    font-family: var(--mono); font-size: 12px; color: var(--text-dim);
    display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 4px;
  }
  .tl-status{
    font-size: 11px; padding: 1px 8px; border-radius: 20px;
    border: 1px solid var(--accent-teal); color: var(--accent-teal);
  }
  .tl-item:not(.current) .tl-status{ border-color: var(--text-dim); color: var(--text-dim); }
  .tl-role{ font-size: 18px; font-weight: 700; margin: 2px 0; }
  .tl-company{ color: var(--accent-teal); font-family: var(--mono); font-size: 14px; }
  .tl-desc{ color: var(--text-muted); margin-top: 8px; font-size: 15px; max-width: 560px; }
  .tl-desc ul{ margin: 8px 0 0; padding-left: 18px; }
  .tl-desc li{ margin-bottom: 4px; }
  .tl-stack{
    display:flex; gap:6px; flex-wrap:wrap; margin-top: 10px;
  }
  .tl-stack span{
    font-family: var(--mono); font-size: 11px; color: var(--text-muted);
    border: 1px solid var(--border); border-radius: 20px; padding: 2px 10px;
    transition: border-color .15s ease, color .15s ease;
  }
  .tl-stack span:hover{ border-color: var(--accent-teal); color: var(--accent-teal); }

  /* ---------- LINUX / HOMELAB (neofetch carousel) ---------- */
  .neofetch-carousel{ position: relative; }
  .neofetch-carousel:focus-visible{ outline: 2px solid var(--accent-teal); outline-offset: 6px; border-radius: 10px; }
  .neofetch-viewport{ overflow: hidden; border-radius: 8px; transition: height .3s ease; }
  .neofetch-track{
    display:flex;
    transition: transform .35s ease;
  }
  @media (prefers-reduced-motion: reduce){
    .neofetch-track{ transition: none; }
  }
  .neofetch-slide{
    flex: 0 0 100%;
    min-width: 0;
  }
  .neofetch-slide .term{ box-shadow:none; border-radius:0; }

  .carousel-btn{
    position:absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height:36px; border-radius:50%;
    background: var(--bg-panel-raised); border: 1px solid var(--border);
    color: var(--text-primary); font-family: var(--mono); font-size: 16px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; z-index: 5; padding:0;
  }
  .carousel-btn:hover{ border-color: var(--accent-teal); color: var(--accent-teal); }
  .carousel-btn.prev{ left: -16px; }
  .carousel-btn.next{ right: -16px; }
  @media (max-width: 640px){
    .carousel-btn.prev{ left: 6px; }
    .carousel-btn.next{ right: 6px; }
    .carousel-btn{ background: rgba(16,21,27,0.9); }
  }

  .carousel-meta{
    display:flex; align-items:center; justify-content:center; gap: 14px;
    margin-top: 16px;
  }
  .carousel-label{
    font-family: var(--mono); font-size: 12px; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.06em;
    min-width: 140px; text-align:center;
  }
  .carousel-dots{ display:flex; gap: 8px; }
  .carousel-dot{
    width:8px; height:8px; border-radius:50%; background: var(--border);
    border:none; cursor:pointer; padding:0;
  }
  .carousel-dot.active{ background: var(--accent-teal); }
  .carousel-hint{
    text-align:center; font-family: var(--mono); font-size: 10.5px;
    color: var(--text-dim); margin-top: 8px;
  }

  .neofetch{ display:flex; justify-content:center; padding: 4px 0; }
  .neofetch-ascii{
    font-family: var(--mono); font-size: 11px; line-height:1.25;
    white-space: pre; opacity: 0.95;
  }
  @media (prefers-reduced-motion: reduce){
    .neofetch-viewport{ transition: none; }
  }
  .homelab-note{
    margin-top: 22px; padding: 14px 16px; border-left: 2px solid var(--accent-amber);
    background: var(--bg-panel); font-size: 14.5px; color: var(--text-muted);
  }
  .homelab-note strong{ color: var(--text-primary); }
  .homelab-note a{ color: var(--accent-teal); }
  .homelab-note code{
    background: var(--bg-panel-raised); border: 1px solid var(--border); border-radius: 4px;
    padding: 1px 6px; font-family: var(--mono); font-size: 0.9em; color: var(--accent-teal);
  }

  /* ---------- PROJECTS ---------- */
  .projects-grid{
    display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
    gap: 16px;
  }
  .project-card{
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px;
    padding: 20px; transition: border-color .15s ease, transform .15s ease;
  }
  .project-card:hover{ border-color: var(--accent-teal); transform: translateY(-2px); }
  .project-tag{
    font-family: var(--mono); font-size: 10px; color: var(--bg);
    background: var(--accent-amber); display:inline-block;
    padding: 2px 8px; border-radius: 20px; margin-bottom: 10px;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .project-tag.live{ background: var(--accent-teal); }
  .project-card h3{ margin: 0 0 8px; font-size: 16px; }
  .project-card p{ margin:0; color: var(--text-muted); font-size: 14px; }
  .project-card a.visit{ display:inline-block; margin-top:10px; font-family: var(--mono); font-size: 12.5px; }

  /* ---------- EDUCATION ---------- */
  .edu-item{ margin-bottom: 20px; }
  .edu-item:last-child{ margin-bottom:0; }
  .edu-school{ font-weight:700; font-size:16px; }
  .edu-meta{ font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
  .edu-desc{ color: var(--text-muted); font-size: 14.5px; margin-top:4px; }

  /* ---------- INTERACTIVE TERMINAL ---------- */
  .shell-term .term-body{ padding: 16px 18px; }
  .shell-output{ max-height: 260px; overflow-y: auto; margin-bottom: 6px; }
  .shell-output::-webkit-scrollbar{ width: 6px; }
  .shell-output::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 4px; }
  .shell-line{ margin: 0 0 4px; }
  .shell-line.cmd{ color: var(--text-primary); }
  .shell-line.cmd::before{ content:"visitor@skinderviken:~$ "; color: var(--accent-teal); }
  .shell-line.out{ color: var(--text-muted); white-space: pre-wrap; }
  .shell-line.err{ color: var(--accent-amber); }
  .shell-inputrow{ display:flex; align-items:center; gap: 8px; }
  .shell-prompt{ color: var(--accent-teal); font-family: var(--mono); font-size: 13.5px; white-space:nowrap; }
  .shell-input{
    flex: 1; background: transparent; border: none; outline: none;
    color: var(--text-primary); font-family: var(--mono); font-size: 13.5px;
    caret-color: var(--accent-teal);
  }
  .shell-help-hint{
    margin-top: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--text-dim);
  }
  .shell-help-hint code{
    background: var(--bg-panel-raised); border:1px solid var(--border); border-radius:4px;
    padding: 1px 6px; color: var(--accent-teal);
  }

  /* ---------- CONTACT ---------- */
  .contact-grid{ display:flex; gap: 14px; flex-wrap:wrap; }
  .contact-link{
    font-family: var(--mono); font-size: 14px;
    border: 1px solid var(--border); border-radius: 6px;
    padding: 10px 16px; color: var(--text-primary);
    display:flex; align-items:center; gap:8px;
    background: none; cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
  }
  .contact-link:hover{ border-color: var(--accent-teal); text-decoration:none; color: var(--accent-teal); }
  .contact-link .dot{ width:6px; height:6px; border-radius:50%; background: var(--accent-teal); }
  .copied-toast{
    font-family: var(--mono); font-size: 12px; color: var(--accent-teal);
    margin-left: 4px; opacity: 0; transition: opacity .2s ease;
  }
  .copied-toast.show{ opacity: 1; }

  footer{
    padding: 30px 0 50px; text-align:center;
    font-family: var(--mono); font-size: 12px; color: var(--text-dim);
  }