html[data-theme="default"] {
      --bg:           #F3F1EF;
      --bg2:          #EDEAE6;
      --text:         #3a506b;
      --text-muted:   rgba(58,80,107,0.55);
      --text-dim:     rgba(58,80,107,0.35);
      --accent:       #1c2541;
      --teal:         #3a9e9c;
      --teal-glow:    rgba(58,158,156,0.0);
      --grid-opacity: 0;
      --glow-opacity: 0;
      --bar-bg:       rgba(243,241,239,0.88);
      --bar-border:   rgba(58,80,107,0.12);
      --desc-h1:      #1c2541;
      --desc-p:       rgba(58,80,107,0.7);
      --bubble-fill:  #5bc0be;
      --bubble-dark:  #3a506b;
      --overlay-bg:   rgba(243,241,239,0.88);
    }

    html[data-theme="engineer"] {
      --bg:           #0d1117;
      --bg2:          #161c28;
      --text:         #e6edf3;
      --text-muted:   rgba(230,237,243,0.55);
      --text-dim:     rgba(230,237,243,0.28);
      --accent:       #ffffff;
      --teal:         #5bc0be;
      --teal-glow:    rgba(91,192,190,0.08);
      --grid-opacity: 1;
      --glow-opacity: 1;
      --bar-bg:       rgba(13,17,23,0.9);
      --bar-border:   rgba(91,192,190,0.15);
      --desc-h1:      #e6edf3;
      --desc-p:       rgba(230,237,243,0.65);
      --bubble-fill:  #1e2738;
      --bubble-dark:  #5bc0be;
      --overlay-bg:   rgba(13,17,23,0.94);
    }

    html[data-theme="nomad"] {
      --bg:           #F3F1EF;
      --bg2:          #EDEAE6;
      --text:         #1c2541;
      --text-muted:   rgba(28,37,65,0.6);
      --text-dim:     rgba(28,37,65,0.35);
      --accent:       #1c2541;
      --teal:         #3a9e9c;
      --teal-glow:    rgba(58,158,156,0.0);
      --grid-opacity: 0;
      --glow-opacity: 0;
      --bar-bg:       rgba(243,241,239,0.88);
      --bar-border:   rgba(58,80,107,0.12);
      --desc-h1:      #1c2541;
      --desc-p:       rgba(28,37,65,0.65);
      --bubble-fill:  #5bc0be;
      --bubble-dark:  #3a506b;
      --overlay-bg:   rgba(243,241,239,0.88);
    }

    /* ═══════════════════════════════════════════
       BASE RESET + FONT
    ═══════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* All color changes transition smoothly */
    html {
      transition: background-color 0.6s ease;
      background-color: var(--bg);
    }

    body {
      font-family: "Cute Font", Roboto, sans-serif;
      font-size: 2vw;
      background-color: var(--bg);
      color: var(--text);
      min-height: 100vh;
      width: 100vw;
      overflow-x: hidden;
      transition: background-color 0.6s ease, color 0.6s ease;
    }

    /* ═══════════════════════════════════════════
       LAYOUT
    ═══════════════════════════════════════════ */
    main {
      width: 100vw;
      height: 100vh;
      min-height: 100vh;
      display: flex;
      background-color: var(--bg);
      transition: background-color 0.6s ease;
    }

    /* ═══════════════════════════════════════════
       ATMOSPHERE LAYERS — grid + glow
    ═══════════════════════════════════════════ */
    .atm-grid {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background-image:
        linear-gradient(rgba(91,192,190,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91,192,190,0.04) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
      opacity: var(--grid-opacity);
      transition: opacity 0.6s ease;
    }

    .atm-glow {
      position: fixed; top: 20%; right: -5%;
      width: 600px; height: 600px; z-index: 0; pointer-events: none;
      background: radial-gradient(circle, var(--teal-glow) 0%, transparent 70%);
      opacity: var(--glow-opacity);
      transition: opacity 0.6s ease;
    }

    /* ═══════════════════════════════════════════
       FACE — the full-viewport split
    ═══════════════════════════════════════════ */
    .face {
      position: relative;
      width: 100vw; height: 100vh;
      display: flex;
      background-color: var(--bg);
      transition: background-color 0.6s ease;
      overflow: hidden;
    }

    /* Avatar image — anchored to bottom, full figure visible */
    .face-avatar {
      position: absolute;
      left: 50%; bottom: 0;
      width: 78vmin;
      max-width: 820px;
      max-height: 92vh;
      object-fit: contain;
      object-position: top center;
      transform: translateX(-50%);
      z-index: 1;
      pointer-events: none;
      animation: float 5s ease-in-out infinite;
      filter: drop-shadow(0 20px 40px rgba(0,0,0,0.08));
      transition: filter 0.6s ease;
    }

    html[data-theme="engineer"] .face-avatar {
      filter: drop-shadow(0 20px 56px rgba(91,192,190,0.25));
    }

    @keyframes float {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50%       { transform: translateX(-50%) translateY(-14px); }
    }



    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 8px var(--teal); }
      50%       { box-shadow: 0 0 20px var(--teal); }
    }

    /* ── HALVES ── */
    .half {
      flex: 1; height: 100%;
      display: flex; align-items: center; justify-content: center;
      position: relative; z-index: 2;
      cursor: pointer;
      background-color: transparent;
    }

    /* Hover wash */
    .half::before {
      content: ''; position: absolute; inset: 0;
      opacity: 0; transition: opacity 0.5s ease;
    }
    .half-engineer::before {
      background: linear-gradient(to right, rgba(13,17,23,0.18), transparent);
    }
    .half-nomad::before {
      background: linear-gradient(to left, rgba(91,192,190,0.06), transparent);
    }
    .half:hover::before { opacity: 1; }

    /* Description — revealed on hover */
    .half-desc {
      text-align: center; max-width: 280px;
      opacity: 0; transform: translateY(8px);
      transition: opacity 0.4s ease, transform 0.4s ease;
      pointer-events: none;
    }
    .half:hover .half-desc {
      opacity: 1; transform: translateY(0);
    }

    .half-desc h1 {
      font-size: 2.8vw; letter-spacing: 2px;
      color: var(--desc-h1);
      margin-bottom: 10px;
      transition: color 0.6s ease;
    }
    .half-desc p {
      font-size: 1.3vw; line-height: 1.5;
      color: var(--desc-p);
      transition: color 0.6s ease;
    }

    /* ═══════════════════════════════════════════
       SOCIAL BAR — left edge
    ═══════════════════════════════════════════ */
    .social-bar {
      position: fixed; top: 50%; left: 0;
      transform: translateY(-50%);
      z-index: 400;
      display: flex; flex-direction: column;
      align-items: center; gap: 22px;
      padding: 18px 11px;
      background: var(--bar-bg);
      border-radius: 0 22px 22px 0;
      border: 1px solid var(--bar-border);
      border-left: none;
      box-shadow: 0 4px 24px rgba(0,0,0,0.08);
      transition: background 0.6s ease, border-color 0.6s ease;
    }

    .social-bar a {
      display: flex; align-items: center; justify-content: center;
      opacity: 0.7;
      transition: opacity 0.2s, transform 0.2s, filter 0.6s ease;
    }
    .social-bar a:hover { opacity: 1; transform: scale(1.15); }
    .social-bar svg { display: block; width: 34px; height: 34px; }

    html[data-theme="engineer"] .social-bar a { filter: brightness(1.5); }

    /* ═══════════════════════════════════════════
       TERMINAL PULL TAB — right edge
    ═══════════════════════════════════════════ */
    .term-trigger {
      position: fixed; top: 50%; right: 0;
      transform: translateY(-50%);
      z-index: 400;
      display: flex; flex-direction: column;
      align-items: center; gap: 14px;
      padding: 18px 11px;
      background: var(--bar-bg);
      border-radius: 22px 0 0 22px;
      border: 1px solid var(--bar-border);
      border-right: none;
      box-shadow: 0 4px 24px rgba(0,0,0,0.08);
      cursor: pointer;
      transition:
        background 0.6s ease,
        border-color 0.6s ease,
        transform 0.25s ease,
        box-shadow 0.2s ease;
    }

    .term-trigger:hover {
      transform: translateY(-50%) translateX(-4px);
      box-shadow: 0 6px 32px rgba(0,0,0,0.14);
    }

    .term-trigger svg {
      display: block; width: 34px; height: 34px;
    }

    .term-trigger-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--teal);
      box-shadow: 0 0 6px var(--teal);
      animation: pulse 2.4s ease-in-out infinite;
      transition: background 0.6s ease;
    }

    .term-trigger-label {
      font-family: "JetBrains Mono", monospace;
      font-size: 9px; letter-spacing: 3px;
      color: var(--text-muted);
      writing-mode: vertical-rl;
      transition: color 0.6s ease;
    }

    .term-trigger.away {
      opacity: 0; pointer-events: none;
      transform: translateY(-50%) translateX(20px);
    }

    /* ═══════════════════════════════════════════
       BUBBLE OVERLAY NAV
    ═══════════════════════════════════════════ */
    .nav-toggle { position: absolute; left: -9999px; }

    .overlay {
      position: fixed; inset: 0; z-index: 500;
      background: var(--overlay-bg);
      opacity: 0; pointer-events: none;
      transition: opacity 0.4s ease, background 0.6s ease;
    }
    .nav-toggle:checked ~ .overlay {
      opacity: 1; pointer-events: auto;
    }

    .bubbles { list-style: none; position: relative; width: 100%; height: 100%; }

    .bubbles li {
      position: absolute;
      width: 7vw; height: 7vw; min-width: 60px; min-height: 60px;
      border-radius: 50%;
      background: var(--bubble-fill);
      color: var(--accent);
      display: flex; align-items: center; justify-content: center;
      font-weight: bold; font-size: 2vw;
      opacity: 0; transform: scale(0.6);
      box-shadow: 0 2px 16px rgba(0,0,0,0.12);
      transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        background 0.6s ease,
        color 0.6s ease;
    }
    .nav-toggle:checked ~ .overlay .bubbles li {
      opacity: 1; transform: scale(1);
    }
    .bubbles li a {
      color: inherit; text-decoration: none;
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      font-family: "Cute Font", Roboto, sans-serif;
      font-size: inherit;
    }
    .bubbles li a:hover { transform: scale(1.1); display: flex; }
    .bubbles li.b-dark {
      background: var(--bubble-dark);
      color: var(--bg);
    }
    .bubbles li.home        { top: 15%; left: 30%; }
    .bubbles li.about       { top:  5%; left: 70%; }
    .bubbles li.nomad       { top: 45%; left: 85%; }
    .bubbles li.professional{ top: 75%; left: 65%; }
    .bubbles li.contact     { top: 70%; left: 20%; }

    /* up-arrow toggle button */
    .nav-btn {
      position: fixed; bottom: 32px; left: 50%;
      transform: translateX(-50%);
      width: 52px; height: 52px; z-index: 600;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      background: var(--bar-bg);
      border-radius: 50%;
      border: 1px solid var(--bar-border);
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      transition: background 0.6s ease, border-color 0.6s ease;
    }

    .icon-arrow {
      width: 26px; height: 26px; pointer-events: none;
      transition: opacity 0.3s;
    }
    .icon-arrow path { stroke: var(--teal); transition: stroke 0.6s ease; }

    .icon-close {
      display: none; width: 20px; height: 20px; pointer-events: none;
    }
    .icon-close path { stroke: var(--accent); transition: stroke 0.6s ease; }

    .nav-toggle:checked ~ .nav-btn .icon-arrow { display: none; }
    .nav-toggle:checked ~ .nav-btn .icon-close { display: block; }

    /* ═══════════════════════════════════════════
       TERMINAL DRAWER
    ═══════════════════════════════════════════ */
    .term-backdrop {
      position: fixed; inset: 0; z-index: 700;
      background: rgba(243,241,239,0.5);
      backdrop-filter: blur(3px);
      opacity: 0; pointer-events: none;
      transition: opacity 0.4s ease;
    }
    .term-backdrop.open { opacity: 1; pointer-events: auto; }

    .term-drawer {
      position: fixed; top: 0; right: 0;
      width: min(460px, 92vw); height: 100vh;
      z-index: 800;
      transform: translateX(102%);
      transition: transform 0.42s cubic-bezier(0.4,0,0.2,1);
      display: flex; flex-direction: column;
      background: #0d1117;
      box-shadow: -8px 0 48px rgba(0,0,0,0.2);
      font-family: "JetBrains Mono", monospace;
    }
    .term-drawer.open { transform: translateX(0); }

    .term-bar {
      background: #161b22; padding: 11px 18px;
      display: flex; align-items: center; gap: 8px;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      flex-shrink: 0;
    }
    .t-dot { width: 11px; height: 11px; border-radius: 50%; cursor: pointer; }
    .t-red    { background: #ff5f57; }
    .t-yellow { background: #febc2e; }
    .t-green  { background: #28c840; }
    .t-title  { font-size: 11px; color: rgba(255,255,255,0.25); letter-spacing: 1.5px; margin-left: 6px; }
    .t-clock  { margin-left: auto; font-size: 11px; color: rgba(91,192,190,0.5); }

    .term-body {
      flex: 1; overflow-y: auto; padding: 18px;
      display: flex; flex-direction: column; gap: 2px;
    }
    .term-body::-webkit-scrollbar { width: 3px; }
    .term-body::-webkit-scrollbar-thumb { background: rgba(91,192,190,0.2); border-radius: 2px; }

    .tl { font-size: 12px; line-height: 1.85; }
    .tl.out { padding-left: 14px; }
    .tl.gap { height: 8px; }
    .tl.pl  { display: flex; gap: 8px; }
    .ps  { color: #5bc0be; font-size: 11px; flex-shrink: 0; }
    .tc  { color: #e6edf3; }

    .ct    { color: #5bc0be; }
    .cd    { color: rgba(230,237,243,0.28); }
    .cm    { color: rgba(230,237,243,0.6); }
    .cw    { color: #e6edf3; font-weight: 600; }
    .cok   { color: #3fb950; }
    .cerr  { color: #f85149; }
    .camb  { color: #d29922; }
    .clnk  { color: #58a6ff; cursor: pointer; text-decoration: underline; }
    .clnk:hover { color: #79c0ff; }

    .chip-row { display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 0 8px 14px; }
    .chip {
      font-size: 11px; padding: 5px 14px; border-radius: 4px;
      cursor: pointer; font-family: "JetBrains Mono", monospace;
      letter-spacing: 0.5px; border: 1px solid rgba(91,192,190,0.25);
      background: rgba(91,192,190,0.07); color: #5bc0be;
      transition: background 0.15s, border-color 0.15s;
    }
    .chip:hover { background: rgba(91,192,190,0.18); border-color: #5bc0be; }
    .chip.s {
      background: rgba(255,255,255,0.03);
      border-color: rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.4);
    }
    .chip.s:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.7); }

    .hint-row { display: flex; flex-wrap: wrap; gap: 16px; padding: 4px 0 4px 14px; }
    .hint { font-size: 10px; color: rgba(255,255,255,0.18); }
    .hint span { color: rgba(91,192,190,0.45); }

    .pr { display: flex; align-items: center; gap: 10px; padding: 2px 0 2px 14px; }
    .pn { font-size: 11px; color: rgba(230,237,243,0.55); min-width: 155px; }
    .pb-row { display: flex; gap: 2px; }
    .pb { width: 13px; height: 7px; border-radius: 1px; background: rgba(91,192,190,0.1); }
    .pb.on { background: #5bc0be; }

    .term-foot {
      padding: 13px 18px; flex-shrink: 0;
      border-top: 1px solid rgba(255,255,255,0.05);
      display: flex; align-items: center; gap: 10px;
      background: #0d1117;
    }
    .t-ps { color: #5bc0be; font-size: 12px; flex-shrink: 0; }
    .t-in {
      flex: 1; background: transparent; border: none; outline: none;
      color: #e6edf3; font-family: "JetBrains Mono", monospace;
      font-size: 12px; caret-color: #5bc0be;
    }
    .t-in::placeholder { color: rgba(255,255,255,0.12); }
    .t-cur {
      width: 7px; height: 13px; border-radius: 1px;
      background: #5bc0be;
      animation: blink 1s step-end infinite;
    }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

    /* ═══════════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════════ */
    @media (max-width: 900px) {
      body { font-size: 3vw; }
      .face { flex-direction: column; }
      .half { width: 100vw; height: 50vh; flex: none; }
      .face-avatar { width: 88vmin; }
      .half-desc h1 { font-size: 5vw; }
      .half-desc p  { font-size: 2.5vw; }
      .bubbles li { width: 10vw; height: 10vw; font-size: 3vw; }
    }
    @media (max-width: 700px) {
      body { font-size: 4vw; }
      .face-avatar { width: 96vmin; }
      .social-bar  { gap: 16px; padding: 10px 7px; border-radius: 0 14px 14px 0; }
      .social-bar svg { width: 26px; height: 26px; }
      .term-trigger { gap: 10px; padding: 14px 8px; border-radius: 14px 0 0 14px; }
      .term-trigger svg { width: 26px; height: 26px; }
      .bubbles li { width: 60px; height: 60px; min-width: 60px; font-size: 1em; }
      .bubbles li.home        { top: 10%; left: 20%; }
      .bubbles li.about       { top:  5%; left: 65%; }
      .bubbles li.nomad       { top: 40%; left: 80%; }
      .bubbles li.professional{ top: 70%; left: 60%; }
      .bubbles li.contact     { top: 65%; left: 15%; }
      .half-desc h1 { font-size: 7vw; }
      .half-desc p  { font-size: 4vw; }
    }