:root{color-scheme:dark;--bg:#080b12;--text:#edf2fb;--muted:#8e9aae;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;min-width:320px;color:var(--text);background:radial-gradient(circle at 70% 15%,#121a2c 0,transparent 35%),var(--bg)}button,a{font:inherit}a{color:inherit}.ambient{position:fixed;width:28rem;height:28rem;border-radius:50%;filter:blur(120px);opacity:.1;pointer-events:none}.ambient-one{top:15%;left:-15rem;background:#46b5e8}.ambient-two{right:-15rem;bottom:5%;background:#a77bf3}.topbar{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;max-width:1180px;margin:auto;padding:28px 32px;border-bottom:1px solid #ffffff12}.back-link{display:inline-flex;gap:10px;align-items:center;text-decoration:none;color:#aab4c5;transition:.2s}.back-link:hover{color:white;transform:translateX(-3px)}.brand{color:#7f8ba0;font:600 10px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.16em}.brand i,.graph-heading i{display:inline-block;width:5px;height:5px;margin:0 8px 2px;border-radius:50%;background:#64d4a2;box-shadow:0 0 8px #64d4a2}main{position:relative;z-index:1;width:min(1040px,calc(100% - 48px));margin:auto;padding:90px 0 120px}.intro{max-width:720px;margin-bottom:74px}.eyebrow{margin:0 0 20px;color:#65738b;font:600 11px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.17em}h1{margin:0;font-size:clamp(3rem,8vw,6.7rem);line-height:.93;letter-spacing:-.065em;font-weight:620}h1 span{color:#7e8ca3}.lede{max-width:580px;margin:28px 0;color:#9aa6ba;font-size:clamp(1rem,2vw,1.22rem);line-height:1.75}.legend{display:flex;flex-wrap:wrap;gap:12px 22px;color:#7f8ba0;font:600 10px/1 ui-monospace,Consolas,monospace;letter-spacing:.08em}.legend span{display:flex;align-items:center;gap:7px}.legend i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}.legend .school{color:#f3b750}.legend .bachelor{color:#46b5e8}.legend .masters{color:#a77bf3}.legend .research{color:#64d4a2}.cv-graph{padding:1px;overflow:hidden;border:1px solid #ffffff13;border-radius:18px;background:linear-gradient(145deg,#ffffff09,transparent 45%),#111622bd;box-shadow:0 35px 90px #0000004d;backdrop-filter:blur(18px)}.graph-heading{display:flex;justify-content:space-between;padding:19px 24px;border-bottom:1px solid #ffffff12;color:#738097;font:600 10px/1 ui-monospace,Consolas,monospace;letter-spacing:.15em}.graph-heading small{font:inherit;letter-spacing:.04em}.timeline,.branches{margin:0;padding:0;list-style:none}.timeline{padding:22px 28px 30px}.period{--rail-x:156px;position:relative}.period:before{content:"";position:absolute;z-index:0;inset:0 auto 0 var(--rail-x);width:3px;background:var(--accent);opacity:.8;box-shadow:0 0 12px color-mix(in srgb,var(--accent) 45%,transparent)}.period:first-child:before{top:32px}.period.last:before{bottom:calc(100% - 33px)}.period-trigger{position:relative;z-index:2;display:grid;grid-template-columns:130px 52px 1fr 42px;align-items:center;width:100%;min-height:110px;padding:0;border:0;color:inherit;text-align:left;background:transparent;cursor:pointer}.year{color:#647188;font:600 10px/1.35 ui-monospace,Consolas,monospace;text-transform:uppercase;letter-spacing:.08em}.node{position:relative;justify-self:center;width:18px;height:18px;border:3px solid var(--bg);border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--accent),0 0 20px color-mix(in srgb,var(--accent) 55%,transparent);transition:transform .3s}.node i{position:absolute;inset:4px;border-radius:50%;background:white}.period-trigger:hover .node,.period-trigger:focus-visible .node{transform:scale(1.25)}.period-copy{display:grid;gap:6px;padding-left:18px}.period-copy strong{font-size:clamp(1rem,2.3vw,1.28rem);font-weight:580}.period-copy small{color:#77849a;font-size:.82rem}.toggle{justify-self:end;display:grid;place-items:center;width:30px;height:30px;border:1px solid #2d3749;border-radius:8px;color:#8190a7;font-size:19px;transition:.35s}.period-trigger:hover .toggle,.period.is-open .toggle{color:var(--accent);border-color:var(--accent)}.period.is-open .toggle{transform:rotate(45deg)}.branches{max-height:0;overflow:hidden;opacity:0;transition:max-height .65s cubic-bezier(.22,1,.36,1),opacity .3s}.period.is-open .branches{max-height:700px;opacity:1}.branches li{position:relative;display:grid;grid-template-columns:182px 1fr;min-height:100px;transform:translateY(-14px);opacity:0;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .35s;transition-delay:calc(var(--index)*90ms)}.period.is-open .branches li{transform:none;opacity:1}.branches li:before{content:"";position:absolute;top:25px;left:var(--rail-x);width:28px;height:2px;background:var(--accent)}.branch-node{position:absolute;z-index:2;top:20px;left:calc(var(--rail-x) - 5px);width:12px;height:12px;border:3px solid var(--bg);border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--accent)}.branches article{grid-column:2;margin:4px 36px 16px 18px;padding:17px 20px;border:1px solid #ffffff12;border-radius:11px;background:#06090f94;transition:.2s}.branches article:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}.branches small{display:block;margin-bottom:8px;color:var(--accent);font:600 9px/1 ui-monospace,Consolas,monospace;letter-spacing:.14em}.branches strong{font-size:.97rem;font-weight:580}.branches p{margin:7px 0 0;color:#77849a;font-size:.8rem;line-height:1.5}footer{display:flex;justify-content:space-between;max-width:1040px;margin:auto;padding:28px 0 38px;border-top:1px solid #ffffff0f;color:#556177;font:500 10px/1 ui-monospace,Consolas,monospace}
@media(max-width:680px){.topbar{padding:22px 20px}.brand{display:none}main{width:calc(100% - 24px);padding:60px 0 80px}.intro{margin-left:10px;margin-bottom:52px}.timeline{padding:16px 14px 24px}.period{--rail-x:24px}.period-trigger{grid-template-columns:48px 1fr 36px;min-height:100px}.year{display:none}.node{grid-column:1;grid-row:1}.period-copy{grid-column:2;padding-left:4px}.toggle{grid-column:3}.branches li{grid-template-columns:49px 1fr}.branches article{margin-right:0;margin-left:7px}.branches li:before{width:25px}footer{margin:0 20px}.graph-heading small{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* A compact introduction keeps the CV content close to the navigation. */
main { padding-top: 34px; }
.intro { margin-bottom: 52px; }

/* Git-style branch: one lane leaves the trunk and passes through each commit. */
.period.last::before { bottom: calc(100% - 57px); }

.period.last.is-open::before {
  bottom: calc(100% - 135px);
  transition: bottom .5s cubic-bezier(.22, 1, .36, 1);
}

.branches {
  position: relative;
  display: flex;
  gap: 24px;
  width: 100%;
  padding: 0 24px 0 calc(var(--rail-x) + 54px);
  overflow: hidden;
}

.branches::before {
  content: "";
  position: absolute;
  top: 23px;
  left: var(--rail-x);
  right: 36px;
  height: 3px;
  border-radius: 0 99px 99px 0;
  background: var(--accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 42%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .62s cubic-bezier(.22, 1, .36, 1);
}

.period.is-open .branches::before { transform: scaleX(1); }

.branches li {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  min-height: 176px;
  padding-top: 44px;
  transform: translateX(-28px);
}

.branches li::before {
  top: 23px;
  left: 50%;
  width: 2px;
  height: 24px;
}

.branch-node {
  top: 17px;
  left: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border-width: 3px;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent), 0 0 13px var(--accent);
}

.branches article {
  grid-column: auto;
  height: calc(100% - 12px);
  margin: 4px 0 8px;
  padding: 16px 17px;
}

.branches article:hover { transform: translateY(-4px); }

@media (max-width: 680px) {
  main { padding-top: 24px; }
  .intro { margin-bottom: 38px; }

  .branches {
    gap: 18px;
    padding-right: 20px;
    padding-left: calc(var(--rail-x) + 44px);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--accent) transparent;
  }

  .branches::before {
    right: auto;
    width: max(calc(100% - var(--rail-x) - 20px), calc(var(--branch-count) * 208px));
  }

  .branches li {
    flex: 0 0 190px;
    min-height: 190px;
  }

  .branches article { margin: 4px 0 10px; }
}