:root {
    /* 初始 highlight，JS 会随机改写 */
    --highlight: hsl(301, 100%, 50%);
    --leftColor: blue;
    --rightColor: green;
}

/* 基本重置和布局 */
body {
    display: flex;
    flex-direction: row;
    min-height: 100svh; /* 适配 iOS 动态地址栏 */
    margin: 0;
}

/* 让鼠标链的 Canvas 占满整个屏幕并穿透点击 */
canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: auto;
    pointer-events: none;
    z-index: 9999;
}

/* 导航栏区域 */
.navi {
    width: 77vw;
    height: 8vh;
    margin-top: -1vh;
    margin-left: 0vw;
    text-align: right;
    z-index: 10;
    position: fixed;
}
.navi :hover {
  color: var(--chain-color);
}
.top {
  width: 77vw;
  height: 80vh;
  margin-bottom: 0vh;
  margin-top: 70vh;
  margin-left: 0vw;
  text-align: right;
  font-size: 3rem;
  z-index: 10;
  position: fixed;
}
.top :hover {
  color: var(--chain-color);
}

/* 左右两栏基础设置 
.left, .right {
    height: 100vh;
}*/


/* 左栏：占 20% 宽度，白色背景 */
.left {
    width: 15vw;
    background: white;
    padding: 20px;
}

/* 右栏：占 80% 宽度，使用 highlight 作为默认背景色 */
.right {
    width: 85vw;
    background: var(--highlight);
    color: white;
    padding: 20px;
    transition: background 0.3s;
}







/*字体设定*/

.category-title {
    font-size: 1.5rem;
    font-family:Arial, Helvetica, sans-serif
}
.work-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
}
.right .navi {
    font-family: Arial, Helvetica, sans-serif;
}
span {
    font-size: 1.2rem;
    font-family: Arial, Helvetica, sans-serif;
}
a {
    color: var(--navi--color);
}
h2 {
  text-align: center;
  font-family:Arial, Helvetica, sans-serif
}





/* 关键词：鼠标可交互 */
/* 新增样式 */
.dynamic-content {
    position: sticky;
    width: 65vw;
    top: 2rem;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  #dynamic-content img {
    width: 100%;
    /*height: 50vh;*/
    object-fit: cover;
    margin-bottom: 0.5rem;
    opacity: 1;
  }
  
  #dynamic-content p {
    font-size: 1.1rem;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    padding: 1rem;
    background: rgba(0,0,0,0);
    border-radius: 0px;
    max-height: 200px;
    overflow-y: auto;
  }
  /* blur和点击效果 */
  .work-item {
    cursor: pointer;
    transition: filter 0.3s, opacity 0.3s;
    border: solid 2px var(--rightColor);
  }
  .blur {
    filter: blur(4px);
    opacity: 0.95;
    /*pointer-events: none;*/
  }
  /* 关键词悬停效果 */
  .kw {
    cursor: crosshair;
    position: relative;
    transition: color 0.3s;
  }
  
  .kw:hover {
    color: var(--chain-color);
  }
  .default-content {
    width: 500px;
    font-size: 30vh;
    line-height: 1.25;
    color: #000;
    cursor: pointer;
    text-align: justify;
    background: linear-gradient(90deg, var(--leftColor), var(--rightColor));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: background-size 0.9s linear;
}
.default-content:hover {
    background-size: 0 100%;
  }

  /* 移动端优化 */
  @media (max-width: 768px) {

    
    .info-card {
      top: 2rem;
    }
  }