:root{
      --bg: #070a12;
      --bg2:#0b1020;
      --text:#eef2ff;
      --muted: rgba(238,242,255,.72);
      --muted2: rgba(238,242,255,.56);
      --line: rgba(238,242,255,.12);

      --panel: rgba(255,255,255,.06);
      --panel2: rgba(255,255,255,.09);

      --a1:#7c5cff;
      --a2:#2dd4bf;
      --a3:#60a5fa;

      --shadow: 0 22px 60px rgba(0,0,0,.45);
      --radius: 16px;
      --radius2: 24px;

      --max: 1160px;

      --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }

    [data-theme="light"]{
      --bg:#f7f8ff;
      --bg2:#ffffff;
      --text:#0b1020;
      --muted: rgba(11,16,32,.72);
      --muted2: rgba(11,16,32,.56);
      --line: rgba(11,16,32,.12);
      --panel: rgba(11,16,32,.05);
      --panel2: rgba(11,16,32,.08);
      --shadow: 0 18px 50px rgba(0,0,0,.12);
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(900px 760px at 85% 20%, rgba(45,212,191,.16), transparent 55%),
        radial-gradient(900px 900px at 55% 95%, rgba(96,165,250,.10), transparent 60%),
        radial-gradient(900px 900px at 85% 80%, rgba(96,165,250,.16), transparent 60%),
        linear-gradient(180deg, var(--bg), var(--bg2));
      overflow-x:hidden;
      position: relative;
    }

    /* clean, editorial texture (subtle) */
    body:before{
      content:"";
      position:fixed; inset:0;
      pointer-events:none;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
      mix-blend-mode:overlay;
      opacity:.22;
      z-index: 1;
    }
    .glowLayer{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:0;
      overflow:hidden;
    }
    .glowLayer:before{
      content:"";
      position:absolute;
      width: min(900px, 85vw);
      height: min(900px, 85vw);
      background: radial-gradient(circle at center, rgba(124,92,255,.14), transparent 60%);
      filter: blur(30px);
      opacity: .85;
      animation: glowPath 44s ease-in-out infinite;
      will-change: transform;
    }
    header, main, footer{
      position: relative;
      z-index: 2;
    }

    @keyframes glowPath{
      0%{ transform: translate(var(--gx1, 6vw), var(--gy1, 8vh)); }
      25%{ transform: translate(var(--gx2, 70vw), var(--gy2, 18vh)); }
      50%{ transform: translate(var(--gx3, 30vw), var(--gy3, 110vh)); }
      75%{ transform: translate(var(--gx4, 55vw), var(--gy4, 170vh)); }
      100%{ transform: translate(var(--gx1, 6vw), var(--gy1, 8vh)); }
    }

    a{ color:inherit; text-decoration:none; }
    a:hover{ text-decoration:underline; text-underline-offset:4px; }

    .wrap{ max-width: var(--max); margin:0 auto; padding:0 22px; }

    .skip{
      position:absolute; left:-9999px; top:auto;
      width:1px; height:1px; overflow:hidden;
    }
    .skip:focus{
      left:22px; top:14px;
      width:auto; height:auto;
      padding:10px 12px;
      border-radius: 12px;
      background: var(--panel2);
      border: 1px solid var(--line);
      z-index:9999;
    }

    /* NAV — editorial style */
    header{
      position:sticky; top:0; z-index:60;
      border-bottom:1px solid var(--line);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      background: linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.10));
    }
    [data-theme="light"] header{
      background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
    }

    .navRow{
      height:78px;
      display:flex; align-items:center; justify-content:space-between;
      gap: 14px;
    }

    .brand{
      display:flex; align-items:center; gap:12px;
      min-width: 320px;
    }
    .sig{
      width: 40px; height: 40px;
      border-radius: 14px;
      border:1px solid var(--line);
      background:
        radial-gradient(circle at 20% 25%, rgba(124,92,255,.65), transparent 58%),
        radial-gradient(circle at 80% 20%, rgba(96,165,250,.55), transparent 58%),
        radial-gradient(circle at 70% 75%, rgba(45,212,191,.45), transparent 60%),
        rgba(255,255,255,.06);
      box-shadow: 0 14px 30px rgba(0,0,0,.22);
      background-size: 180% 180%;
      animation: sigGlow 8s ease-in-out infinite;
    }
    @keyframes sigGlow{
      0%{ background-position: 0% 0%, 100% 10%, 50% 100%, 0 0; }
      33%{ background-position: 100% 0%, 0% 100%, 20% 0%, 0 0; }
      66%{ background-position: 20% 100%, 100% 0%, 0% 20%, 0 0; }
      100%{ background-position: 0% 0%, 100% 10%, 50% 100%, 0 0; }
    }
    .brandTitle{
      font-weight: 950;
      letter-spacing: -0.03em;
      line-height:1.0;
    }
    .brandMeta{
      margin-top: 4px;
      color: var(--muted2);
      font-weight: 750;
      font-size: 12.5px;
    }

    nav.links{
      display:flex; align-items:center; gap: 10px;
      color: var(--muted);
      font-weight: 850;
      font-size: 13px;
    }
    nav.links a{
      padding: 10px 10px;
      border-radius: 12px;
      border:1px solid transparent;
      transition: .16s ease;
    }
    nav.links a:hover{
      background: var(--panel);
      border-color: var(--line);
      text-decoration:none;
      transform: translateY(-1px);
    }

    .navRight{
      display:flex; align-items:center; gap:10px;
    }

    .btn{
      display:inline-flex; align-items:center; gap:10px;
      padding: 11px 14px;
      border-radius: 14px;
      border:1px solid var(--line);
      background: var(--panel);
      color: var(--text);
      font-weight: 900;
      font-size: 13px;
      cursor:pointer;
      user-select:none;
      transition: .16s ease;
      box-shadow: 0 12px 28px rgba(0,0,0,.14);
    }
    .btn:hover{ transform: translateY(-1px); background: var(--panel2); text-decoration:none; }
    .btn.primary{
      border-color: rgba(124,92,255,.50);
      background: linear-gradient(135deg, rgba(124,92,255,.28), rgba(45,212,191,.18));
    }
    .btn.ghost{ background: transparent; box-shadow:none; }

    .icon{ width:18px; height:18px; display:inline-block; }

    .burger{ display:none; }
    .drawer{
      display:none;
      border-top:1px solid var(--line);
    }
    .drawerInner{
      padding: 10px 0 16px;
      display:flex; flex-wrap:wrap; gap:10px;
    }
    .drawerInner a{
      padding: 10px 12px;
      border:1px solid var(--line);
      border-radius: 14px;
      background: var(--panel);
      color: var(--muted);
      font-weight: 900;
    }

    /* HERO — editorial layout */
    main{ padding-bottom: 44px; }
    section{
      padding: 42px 0;
      scroll-margin-top: 46px;
    }
    .heroSection{
      min-height: calc(100vh - 78px);
      display:flex;
      align-items:flex-start;
      padding: 24px 0;
    }

    .heroGrid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 18px;
      align-items:stretch;
    }

    .card{
      border:1px solid var(--line);
      background: var(--panel);
      border-radius: var(--radius2);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .pad{ padding: 28px; }

    .label{
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted2);
      font-weight: 600;
      display:flex; align-items:center; gap:10px;
    }
    .labelDot{
      width:10px; height:10px; border-radius: 999px;
      background: linear-gradient(135deg, var(--a1), var(--a2), var(--a3));
      box-shadow: 0 0 0 4px rgba(124,92,255,.14);
    }

    .heroTitle{
      margin: 2px 0 10px;
      font-size: clamp(38px, 5.2vw, 64px);
      letter-spacing: -0.06em;
      line-height: 1.02;
      font-weight: 950;
    }
    .heroKicker{
      margin: 10px 0 2px;
      font-size: 13px;
      font-weight: 850;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted2);
      font-family: var(--mono);
    }
    .grad{
      background: linear-gradient(90deg, var(--a1), var(--a2), var(--a3));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      background-size: 200% 100%;
      animation: gradShift 10s ease-in-out infinite;
    }
    @keyframes gradShift{
      0%{ background-position: 0% 50%; }
      50%{ background-position: 100% 50%; }
      100%{ background-position: 0% 50%; }
    }
    .heroSub{
      margin: 0;
      color: var(--muted);
      font-weight: 600;
      line-height: 1.72;
      max-width: none;
      font-size: 15.5px;
    }
    .heroCard .pad{
      padding: 48px 44px;
    }
    .heroStack{
      display:flex;
      flex-direction:column;
      gap: 28px;
    }
    .heroDivider{
      height: 1px;
      background: var(--line);
      margin-top: -4px;
    }

    .heroActions{
      display:flex; flex-wrap:wrap; gap:10px;
      margin-top: 18px;
    }

    .sideStack{
      display:grid;
      gap: 12px;
      height:100%;
    }
    .miniCard{
      border:1px solid var(--line);
      background: rgba(255,255,255,.055);
      border-radius: var(--radius);
      padding: 16px;
      position:relative;
      overflow:hidden;
    }
    .miniCard h3{
      margin:0 0 6px;
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted2);
      font-weight: 700;
    }
    .miniCard p{
      margin:0;
      font-weight: 850;
      line-height: 1.45;
    }
    .miniCard p span{ color: var(--muted); font-weight: 750; }

    /* “Tiles” for research areas — no repetition */
    .tileGrid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 18px;
    }
    .tile{
      border:1px solid var(--line);
      background: rgba(255,255,255,.05);
      border-radius: 16px;
      padding: 18px 18px;
      transition: .16s ease;
      min-height: 104px;
    }
    .tile:hover{ transform: translateY(-2px); background: rgba(255,255,255,.075); }
    .tile .tTitle{
      display:flex; align-items:center; gap:10px;
      font-weight: 950;
      letter-spacing:-0.02em;
      margin:0 0 6px;
      font-size: 14px;
    }
    .tile .tDesc{
      margin:0;
      color: var(--muted);
      font-weight: 600;
      line-height: 1.55;
      font-size: 12.5px;
    }

    /* Section head */
    .sectionHead{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap: 18px;
      margin-bottom: 14px;
    }
    .sectionHead h2{
      margin:0;
      font-size: 22px;
      letter-spacing:-0.02em;
      font-weight: 950;
    }
    .sectionToggle{
      padding: 0;
      margin: 0;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      font-size: 22px;
      letter-spacing: -0.02em;
      font-weight: 950;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .sectionToggle:hover{
      text-decoration: none;
    }
    .sectionToggle:after{
      content:"";
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: linear-gradient(135deg, rgba(124,92,255,.14), rgba(45,212,191,.10));
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.06),
        0 10px 22px rgba(0,0,0,.18);
      background-image:
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor);
      background-size: 10px 2px, 2px 10px;
      background-position: center, center;
      background-repeat: no-repeat;
      opacity: .8;
    }
    .sectionToggle[aria-expanded="true"]:after{
      background-image: linear-gradient(currentColor, currentColor);
      background-size: 10px 2px;
    }
    .sectionHead p{
      margin:0;
      color: var(--muted2);
      font-weight: 650;
      max-width: 78ch;
      line-height: 1.5;
      font-size: 13.5px;
    }

    .grid2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }
    .cardCopy{
      margin: 12px 0 0;
      color: var(--muted);
      font-weight: 620;
      line-height: 1.75;
      font-size: 14.5px;
      letter-spacing: -0.01em;
    }
    .list{
      margin: 12px 0 0;
      padding: 0;
      color: var(--text);
      line-height: 1.8;
      font-weight: 620;
      font-size: 14.5px;
      letter-spacing: -0.01em;
      list-style: none;
      display: grid;
      gap: 6px;
    }
    .list li{
      position: relative;
      padding-left: 18px;
    }
    .list li:before{
      content:"";
      position:absolute;
      left:0;
      top: 0.6em;
      width:6px;
      height:6px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--a1), var(--a2));
      box-shadow: 0 0 0 3px rgba(124,92,255,.12);
    }

    .skillsList{
      margin: 12px 0 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .skillsList li{
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.06);
      font-weight: 700;
      font-size: 12.5px;
      color: var(--muted);
      letter-spacing: -0.01em;
    }

    .teachList{ gap: 10px; }
    .teachList li{
      display:grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      padding-left: 18px;
      align-items:center;
    }
    .teachList .course{
      color: var(--text);
      font-weight: 700;
      font-size: 14px;
    }
    .teachMeta{
      display:flex;
      flex-wrap:wrap;
      gap: 6px;
      justify-content:flex-end;
    }
    .teachList .year{
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted2);
      border: 1px solid var(--line);
      padding: 2px 6px;
      border-radius: 999px;
      background: rgba(255,255,255,.04);
    }
    .teachList .ects{
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted2);
      border: 1px solid var(--line);
      padding: 2px 6px;
      border-radius: 999px;
      background: rgba(255,255,255,.04);
    }
    @media (max-width: 760px){
      .teachList li{ grid-template-columns: 1fr; }
      .teachMeta{ justify-content:flex-start; }
    }

    .acadList{
      display:grid;
      gap: 14px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .acadItem{
      display:grid;
      gap: 6px;
      padding: 14px 16px;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.04);
    }
    .acadDates{
      font-family: var(--mono);
      font-size: 12.5px;
      color: var(--muted2);
      letter-spacing: .02em;
    }
    .acadTitle{
      font-weight: 850;
      letter-spacing: -0.01em;
      font-size: 16px;
      color: var(--text);
    }
    .acadRole{
      color: var(--muted);
      font-weight: 700;
      font-size: 14px;
    }
    .acadDetail{
      color: var(--muted);
      font-weight: 620;
      font-size: 14.5px;
      line-height: 1.7;
      margin: 0;
    }

    /* Publications — FIXED layout */
    .pubShell{ margin-top: 6px; }
    .pubTools{
      display:flex;
      gap: 10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      margin: 10px 0 12px;
    }
    .search{
      flex: 1 1 360px;
      display:flex; align-items:center; gap:10px;
      padding: 12px 12px;
      border-radius: 16px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.06);
    }
    .search input{
      width:100%;
      background:transparent;
      border:0; outline:none;
      color: var(--text);
      font-weight: 800;
      font-size: 14px;
    }
    .chips{
      display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;
    }
    .chip{
      border:1px solid var(--line);
      background: rgba(255,255,255,.06);
      border-radius: 999px;
      padding: 9px 12px;
      font-weight: 900;
      font-size: 12px;
      color: var(--muted);
      cursor:pointer;
      user-select:none;
      transition:.14s ease;
    }
    .chip:hover{ transform: translateY(-1px); }
    .chip.active{
      color: var(--text);
      border-color: rgba(124,92,255,.55);
      background: linear-gradient(135deg, rgba(124,92,255,.20), rgba(45,212,191,.12));
    }

    .pubHeaderRow{
      display:flex; flex-wrap:wrap; gap:10px;
      align-items:center; justify-content:space-between;
      margin: 8px 0 10px;
    }
    .counts{
      color: var(--muted2);
      font-weight: 900;
      font-size: 12px;
      letter-spacing:.02em;
      font-family: var(--mono);
    }
    .miniBtnRow{ display:flex; gap:10px; flex-wrap:wrap; }

    .pubList{ display:grid; gap: 12px; }

    .pub{
      border:1px solid var(--line);
      background: rgba(255,255,255,.055);
      border-radius: 18px;
      padding: 16px;
    }

    /* KEY: grid layout prevents “right buttons drop randomly” */
    .pubTop{
      display:grid;
      grid-template-columns: 1fr auto;
      gap: 14px;
      align-items:start;
    }
    .pubTitle{
      margin:0;
      font-weight: 950;
      letter-spacing:-0.01em;
      line-height:1.35;
      font-size: 15.5px;
    }
    .pub a:hover{
      text-decoration: none;
    }
    .pubMeta{
      margin: 7px 0 0;
      color: var(--muted);
      font-weight: 650;
      line-height: 1.55;
      font-size: 13px;
    }

    .pubRight{
      justify-self:end;
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      justify-content:flex-end;
      align-content:flex-start;
      max-width: 520px;
    }

    .badge{
      padding: 7px 10px;
      border-radius: 999px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.06);
      color: var(--muted);
      font-weight: 900;
      font-size: 12px;
      white-space:nowrap;
      font-family: var(--mono);
      letter-spacing: .02em;
    }
    .badge.action{
      cursor:pointer;
      color: var(--text);
      border-color: rgba(238,242,255,.20);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      letter-spacing: 0;
    }
    .badge.action:hover{ background: var(--panel2); }

    /* Consistent mobile behavior: actions go below */
    @media (max-width: 760px){
      .pubTop{ grid-template-columns: 1fr; }
      .pubRight{
        justify-self:start;
        justify-content:flex-start;
        margin-top: 10px;
        max-width: none;
      }
    }

    /* Reveal */
    .reveal{ opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
    .reveal.in{ opacity:1; transform: translateY(0); }

    footer{
      padding: 28px 0 46px;
      border-top:1px solid var(--line);
      color: var(--muted2);
      font-weight: 800;
      font-size: 13px;
    }
    .footerRow{
      display:flex; flex-wrap:wrap; gap: 12px;
      justify-content:space-between; align-items:center;
    }

    @media (max-width: 980px){
      nav.links{ display:none; }
      .burger{ display:inline-flex; }
      .drawer{ display:block; }
      .heroGrid{ grid-template-columns: 1fr; }
      .tileGrid{ grid-template-columns: 1fr 1fr; }
      .grid2{ grid-template-columns: 1fr; }
      .brand{ min-width: unset; }
    }
    @media (max-width: 520px){
      .tileGrid{ grid-template-columns: 1fr; }
    }