*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --bg:        #f0eeea;
      --fg:        #111111;
      --muted:     #555555;
      --line:      #aaaaaa;
      --divider:   #d5d3cf;
      --border:    #d5d3cf;
      --card-bg:   #e5e3df;
      --circle-bg: #cccccc;
    }
    [data-theme="dark"] {
      --bg:        #0e0e0e;
      --fg:        #e8e6e1;
      --muted:     #aaaaaa;
      --line:      #333333;
      --divider:   #222222;
      --border:    #222222;
      --card-bg:   #1a1a1a;
      --circle-bg: #2a2a2a;
    }

    html, body {
      width: 100%; height: 100%;
      background: var(--bg);
      font-family: "IBM Plex Mono", monospace;
      overflow: hidden;
      transition: background 0.4s ease;
    }

    .lang-toggle {
      position: fixed; top: 26px; right: 120px; z-index: 300;
      background: none; border: none; cursor: pointer;
      opacity: 0; animation: fadeIn 0.5s ease 2.2s forwards;
      font-family: "IBM Plex Mono", monospace;
      font-size: 12px; letter-spacing: 0.1em;
      color: var(--muted); transition: color 0.2s;
      padding: 0;
    }
    .lang-toggle:hover { color: var(--fg); }
    @media (max-width: 600px) {
      .lang-toggle {
        top: 14px; right: 104px;
        height: 36px; display: flex; align-items: center;
        padding: 0 12px;
        animation: none; opacity: 1;
        color: var(--fg);
      }
      .theme-toggle {
        top: 14px; right: 10px;
        height: 36px;
        padding: 0 8px;
        animation: none; opacity: 1;
      }
    }
    .theme-toggle {
      position: fixed; top: 22px; right: 28px; z-index: 300;
      background: none; border: none; cursor: pointer;
      display: flex; align-items: center; gap: 7px;
      opacity: 0; animation: fadeIn 0.5s ease 2.2s forwards;
    }
    .toggle-track {
      width: 32px; height: 18px; border-radius: 9px;
      border: 1px solid var(--line); background: transparent;
      position: relative; transition: border-color 0.4s;
    }
    .toggle-dot {
      position: absolute; top: 3px; left: 3px;
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--fg);
      transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), background 0.4s;
    }
    [data-theme="dark"] .toggle-dot { transform: translateX(14px); }
    .toggle-label { font-size: 12px; letter-spacing: 0.1em; color: var(--muted); font-family: "IBM Plex Mono", monospace; transition: color 0.4s; }

    nav.desktop-nav {
      position: fixed; top: 60px; left: 80px;
      font-size: 11px; letter-spacing: 0.03em; color: var(--fg);
      z-index: 10; transition: color 0.4s;
    }
    nav.desktop-nav strong { font-weight: 700; }
    nav.desktop-nav em { font-style: normal; color: var(--muted); }

    .hero { position: fixed; top: 220px; left: 250px; z-index: 10; }
    .hero h1 { font-size: 48px; font-weight: 300; line-height: 1.2; color: var(--fg); transition: color 0.4s; }

    .circle {
      position: fixed;
      left: calc(3.5vw + 50px);
      top: calc(69vh - 200px);
      width: 150px; height: 150px;
      border-radius: 50%;
      overflow: hidden;
      z-index: 10;
      opacity: 0;
      animation: fadeIn 0.5s ease 1.9s forwards;
    }
    .circle img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 60%;
      display: block;
    }

    .label {
      position: fixed; font-size: 13px; font-weight: 300;
      letter-spacing: 0.1em; color: var(--fg); z-index: 10; opacity: 0;
      text-decoration: none; cursor: pointer;
      padding-bottom: 2px; border-bottom: 1px solid transparent;
      transition: letter-spacing 0.4s ease, border-color 0.3s ease, color 0.4s;
    }
    .label::before { content: "_ "; color: var(--muted); }
    .label:hover { letter-spacing: 0.22em; border-bottom-color: var(--fg); }
    .label-projects { top: 37%; left: 64%; animation: fadeIn 0.4s ease 2.0s forwards; }
    .label-about    { top: 50%; left: 53%; animation: fadeIn 0.4s ease 2.1s forwards; }
    .label-contact  { top: 65%; left: 40%; animation: fadeIn 0.4s ease 2.2s forwards; }
    .label-cv       { top: 79%; left: 27%; animation: fadeIn 0.4s ease 2.3s forwards; }

    @keyframes fadeIn { to { opacity: 1; } }

    svg.lines {
      position: fixed; inset: 0; width: 100%; height: 100%;
      pointer-events: none; z-index: 5;
    }
    .draw-path {
      fill: none; stroke: var(--line); stroke-width: 0.9;
      stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.4s;
    }
    .draw-path-thin {
      fill: none; stroke: var(--line); stroke-width: 0.45;
      stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.4s;
      opacity: 0.55;
    }
    #path1 { stroke-dasharray: 2200; stroke-dashoffset: 2200; animation: draw 1.8s cubic-bezier(0.4,0,0.2,1) 0.05s forwards, line-breathe 7s ease-in-out 2.5s infinite; }
    #path2 { stroke-dasharray: 2200; stroke-dashoffset: 2200; animation: draw 1.8s cubic-bezier(0.4,0,0.2,1) 0.25s forwards, line-breathe 7s ease-in-out 3.1s infinite; }
    #path3 { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: draw 1.6s cubic-bezier(0.4,0,0.2,1) 0.4s  forwards, line-breathe-thin 9s ease-in-out 2.7s infinite; }
    #path4 { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw 1.4s cubic-bezier(0.4,0,0.2,1) 0.55s forwards, line-breathe-thin 6s ease-in-out 3.3s infinite; }
    #path5 { stroke-dasharray: 900;  stroke-dashoffset: 900;  animation: draw 1.2s cubic-bezier(0.4,0,0.2,1) 0.65s forwards, line-breathe-thin 8s ease-in-out 2.4s infinite; }
    @keyframes draw { to { stroke-dashoffset: 0; } }
    @keyframes line-breathe {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0.28; }
    }
    @keyframes line-breathe-thin {
      0%, 100% { opacity: 0.55; }
      50%       { opacity: 0.1; }
    }

    /* ── LINE FLOW ── */
    .flow-path {
      fill: none; stroke: var(--fg); stroke-linecap: round;
      pointer-events: none;
      filter: drop-shadow(0 0 3px var(--fg));
      transition: stroke 0.4s, filter 0.4s;
    }
    .flow-path-thin {
      fill: none; stroke: var(--fg); stroke-linecap: round;
      pointer-events: none;
      filter: drop-shadow(0 0 2px var(--fg));
      transition: stroke 0.4s, filter 0.4s;
    }
    #fp1 { stroke-width: 1.6; stroke-dasharray: 100 2300; animation: flow1 5.5s ease-in-out 2.3s infinite backwards; }
    #fp2 { stroke-width: 1.6; stroke-dasharray: 100 2300; animation: flow2 7.0s ease-in-out 4.8s infinite backwards; }
    #fp3 { stroke-width: 0.7; stroke-dasharray:  70 1670; animation: flow3 5.0s ease-in-out 3.2s infinite backwards; }
    #fp4 { stroke-width: 0.7; stroke-dasharray:  70 1270; animation: flow4 4.5s ease-in-out 6.0s infinite backwards; }
    #fp5 { stroke-width: 0.7; stroke-dasharray:  55  955; animation: flow5 4.0s ease-in-out 3.7s infinite backwards; }
    @keyframes flow1 {
      0%  { stroke-dashoffset:  100; opacity: 0; }
      4%  { opacity: 1; }
      28% { opacity: 1; }
      32% { stroke-dashoffset: -2200; opacity: 0; }
      100%{ stroke-dashoffset: -2200; opacity: 0; }
    }
    @keyframes flow2 {
      0%  { stroke-dashoffset:  100; opacity: 0; }
      4%  { opacity: 1; }
      24% { opacity: 1; }
      28% { stroke-dashoffset: -2200; opacity: 0; }
      100%{ stroke-dashoffset: -2200; opacity: 0; }
    }
    @keyframes flow3 {
      0%  { stroke-dashoffset:  70; opacity: 0; }
      5%  { opacity: 0.65; }
      28% { opacity: 0.65; }
      33% { stroke-dashoffset: -1600; opacity: 0; }
      100%{ stroke-dashoffset: -1600; opacity: 0; }
    }
    @keyframes flow4 {
      0%  { stroke-dashoffset:  70; opacity: 0; }
      5%  { opacity: 0.65; }
      28% { opacity: 0.65; }
      33% { stroke-dashoffset: -1200; opacity: 0; }
      100%{ stroke-dashoffset: -1200; opacity: 0; }
    }
    @keyframes flow5 {
      0%  { stroke-dashoffset:  55; opacity: 0; }
      5%  { opacity: 0.65; }
      28% { opacity: 0.65; }
      33% { stroke-dashoffset: -900; opacity: 0; }
      100%{ stroke-dashoffset: -900; opacity: 0; }
    }

    .contact-panel {
      position: fixed; bottom: 0; right: 0; width: 480px;
      background: var(--bg); border-top: 1px solid var(--border); border-left: 1px solid var(--border);
      z-index: 200; padding: 52px 44px 44px; transform: translateY(100%);
      transition: transform 0.5s cubic-bezier(0.4,0,0.2,1), background 0.4s, border-color 0.4s;
    }
    .contact-panel.open { transform: translateY(0); }
    .contact-close {
      position: absolute; top: 18px; right: 24px; background: none; border: none;
      font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 0.1em;
      color: var(--muted); cursor: pointer; transition: color 0.2s;
    }
    .contact-close:hover { color: var(--fg); }
    .contact-panel h2 { font-size: 36px; font-weight: 300; line-height: 1.1; color: var(--fg); margin-bottom: 36px; transition: color 0.4s; }
    .contact-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 16px; margin-bottom: 2px; background: var(--card-bg);
      text-decoration: none; color: var(--fg);
      transition: padding-left 0.25s ease, background 0.4s, color 0.4s;
    }
    .contact-row:hover { padding-left: 24px; }
    .contact-row-label { font-size: 9px; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 4px; }
    .contact-row-value { font-size: 14px; font-weight: 400; }
    .contact-row-arrow { font-size: 16px; color: var(--fg); }
    .contact-note { margin-top: 28px; font-size: 9px; letter-spacing: 0.08em; color: var(--muted); line-height: 1.8; }

    .mobile-layout { display: none; }

    @media (max-width: 600px) {
      nav.desktop-nav, .hero, .circle, .label, svg.lines { display: none !important; }
      .lang-toggle {
        top: 9px; right: 104px;
        height: 36px; display: flex; align-items: center;
        padding: 0 12px;
        animation: none; opacity: 1;
        color: var(--fg);
      }
      .theme-toggle {
        top: 9px; right: 10px;
        height: 36px; padding: 0 8px;
        animation: none; opacity: 1;
      }
      .mobile-layout {
        display: flex; flex-direction: column; height: 100vh;
        padding: 20px 24px 36px; background: var(--bg); transition: background 0.4s;
        position: relative;
      }
      .m-nav {
        display: flex; align-items: center; font-size: 10px; letter-spacing: 0.04em;
        color: var(--fg); opacity: 0; animation: fadeIn 0.5s ease 0.1s forwards;
        transition: color 0.4s; padding-right: 80px;
      }
      .m-nav strong { font-weight: 700; }
      .m-nav em { font-style: normal; color: var(--muted); }
      .m-hero { margin-top: 32px; opacity: 0; animation: slideUp 0.7s cubic-bezier(0.4,0,0.2,1) 0.3s forwards; }
      .m-hero h1 { font-size: clamp(34px, 10vw, 50px); font-weight: 300; line-height: 1.15; color: var(--fg); transition: color 0.4s; }
      .m-photo {
        margin-top: 28px; width: 80px; height: 80px; border-radius: 50%;
        overflow: hidden; opacity: 0; animation: fadeIn 0.5s ease 0.8s forwards; flex-shrink: 0;
      }
      .m-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 100%; }
      .m-links { margin-top: auto; display: flex; flex-direction: column; }
      .m-link {
        display: flex; align-items: center; justify-content: space-between;
        padding: 20px 0; border-top: 1px solid var(--divider);
        text-decoration: none; color: var(--fg); font-size: 14px; font-weight: 300;
        letter-spacing: 0.1em; opacity: 0; transform: translateY(10px);
        transition: padding-left 0.25s ease, color 0.2s ease, border-color 0.4s;
        -webkit-tap-highlight-color: transparent;
      }
      .m-link:last-child { border-bottom: 1px solid var(--divider); }
      .m-link:nth-child(1) { animation: slideUp 0.5s ease 1.0s forwards; }
      .m-link:nth-child(2) { animation: slideUp 0.5s ease 1.15s forwards; }
      .m-link:nth-child(3) { animation: slideUp 0.5s ease 1.3s forwards; }
      .m-link:active { padding-left: 10px; color: var(--muted); }
      .m-link-left { display: flex; align-items: center; }
      .m-link-num { font-size: 9px; color: var(--muted); margin-right: 12px; letter-spacing: 0.05em; }
      .m-link-label { font-weight: 400; letter-spacing: 0.12em; }
      .contact-panel { width: 100%; height: 65vh; border-left: none; padding: 36px 24px 32px; overflow-y: auto; }
      .contact-panel h2 { font-size: 28px; margin-bottom: 24px; }
      .m-link:nth-child(4) { animation: slideUp 0.5s ease 1.45s forwards; }
      .m-lines-mobile { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
      .m-ml-path { fill: none; stroke: var(--line); stroke-width: 0.9; stroke-linecap: round; transition: stroke 0.4s; }
      .m-ml-thin { fill: none; stroke: var(--line); stroke-width: 0.45; stroke-linecap: round; opacity: 0.45; transition: stroke 0.4s; }
      .m-ml1 { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 1.8s cubic-bezier(0.4,0,0.2,1) 0.4s forwards; }
      .m-ml2 { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw 1.6s cubic-bezier(0.4,0,0.2,1) 0.55s forwards; }
      .m-ml3 { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 1.4s cubic-bezier(0.4,0,0.2,1) 0.65s forwards; }
      @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
      /* ── MOBILE LINE FLOW ── */
      .m-flow-path {
        fill: none; stroke: var(--fg); stroke-linecap: round;
        pointer-events: none;
        filter: drop-shadow(0 0 3px var(--fg));
        transition: stroke 0.4s, filter 0.4s;
      }
      .m-flow-path-thin {
        fill: none; stroke: var(--fg); stroke-linecap: round;
        pointer-events: none;
        filter: drop-shadow(0 0 2px var(--fg));
        transition: stroke 0.4s, filter 0.4s;
      }
      #mfp1 { stroke-width: 1.6; stroke-dasharray: 80 1400; animation: mflow1 4.5s ease-in-out 2.3s infinite backwards; }
      #mfp2 { stroke-width: 0.7; stroke-dasharray: 60 1200; animation: mflow2 5.0s ease-in-out 3.8s infinite backwards; }
      #mfp3 { stroke-width: 0.7; stroke-dasharray: 55 1000; animation: mflow3 4.0s ease-in-out 3.0s infinite backwards; }
      @keyframes mflow1 {
        0%  { stroke-dashoffset:  80; opacity: 0; }
        4%  { opacity: 1; }
        28% { opacity: 1; }
        32% { stroke-dashoffset: -1400; opacity: 0; }
        100%{ stroke-dashoffset: -1400; opacity: 0; }
      }
      @keyframes mflow2 {
        0%  { stroke-dashoffset:  60; opacity: 0; }
        5%  { opacity: 0.65; }
        28% { opacity: 0.65; }
        33% { stroke-dashoffset: -1200; opacity: 0; }
        100%{ stroke-dashoffset: -1200; opacity: 0; }
      }
      @keyframes mflow3 {
        0%  { stroke-dashoffset:  55; opacity: 0; }
        5%  { opacity: 0.65; }
        28% { opacity: 0.65; }
        33% { stroke-dashoffset: -1000; opacity: 0; }
        100%{ stroke-dashoffset: -1000; opacity: 0; }
      }
    }
    .noise-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px 200px; }
    /* ── COPY EMAIL ── */
    .contact-copy {
      background: none; border: 1px solid var(--border);
      color: var(--muted); font-family: "IBM Plex Mono", monospace;
      font-size: 9px; letter-spacing: 0.1em; padding: 9px 14px;
      cursor: pointer; margin-top: 4px; width: 100%; text-align: left;
      transition: border-color 0.2s, color 0.2s, background 0.4s;
    }
    .contact-copy:hover { border-color: var(--fg); color: var(--fg); }
    .contact-copy.copied { color: var(--fg); }
    /* ── TEXT SELECTION ── */
    ::selection { background: #111; color: #f0eeea; }
    [data-theme="dark"] ::selection { background: #e8e6e1; color: #0e0e0e; }