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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

body {
    position: relative;
    background: #000;
    cursor: none;
    transition: filter 0.5s ease;
}

body.grayscale {
    filter: grayscale(100%) invert(100%);
}

.container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* 波浪线背景 - 使用overlay混合模式 */
a-waves {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

a-waves svg {
    width: 100%;
    height: 100%;
}

a-waves svg path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.15); /* 白色半透明 */
    /* 移除固定stroke-width，由JS控制 */
    mix-blend-mode: overlay; /* 使用overlay混合模式 */
}

/* 底部矩形 */
.bottom-rectangle {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3vh;
    background-color: rgba(219, 219, 219, 0.7); /* 修改为半透明背景 */
    z-index: 7; /* 低于波浪线，高于背景 */
    backdrop-filter: blur(10px) saturate(180%); /* 添加毛玻璃效果 */
    -webkit-backdrop-filter: blur(10px) saturate(180%); /* Safari 支持 */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* 添加上边框增强视觉效果 */
}

/* 颜色切换按钮容器 */
.color-toggle-container {
    position: absolute;
    right: 1vw; /* 稍微调整，避免太靠边 */
    top: 0.001;
    height: 2.9vh;
    z-index: 7;
}

/* 颜色切换按钮样式 */
.color-toggle {
    display: block;
    width: auto;
    height: 100%;
    aspect-ratio: 4 / 1;
    color: rgba(193, 43, 252, 0.7); /* 修改为红色 */
    cursor: pointer;
}

.color-toggle-input {
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.color-toggle svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.color-toggle svg .line {
    transform: scaleX(0);
}

.color-toggle .color-toggle-input:not(:checked) + svg .ballTrace {
    animation: ballTrace_toggleMotionOff9371A 0.3s ease 0s 1 forwards,
               ballTrace_toggleMotionOff9371B 0.1s steps(2, end) calc(0.32s + var(--_appearOffset)) 1 forwards;
}

.color-toggle .color-toggle-input:not(:checked) + svg .ball {
    animation: ball_toggleMotionOn9371A 0.3s ease 0s 1 forwards,
               ball_toggleMotionOn9371B 0.4s cubic-bezier(0.165, 0.84, 0.45, 1.11) 0.3s 1 forwards;
}

.color-toggle .color-toggle-input:checked + svg circle {
    animation: ball_toggleMotionOff9371 0.9s linear 0s 1 forwards;
}

.color-toggle .color-toggle-input:checked + svg .line {
    animation: line_toggleMotionOff9371 0.32s cubic-bezier(0.075, 0.82, 0.165, 1) 0.47s 1 forwards;
}

@keyframes ball_toggleMotionOff9371 {
    0% {
        transform: translateX(0px);
    }
    6.66% {
        transform: translateX(calc(var(--_toCenterXOffset) * 0.45));
    }
    13.33% {
        transform: translateX(calc(var(--_toCenterXOffset) * 0.77));
    }
    20% {
        transform: translateX(calc(var(--_toCenterXOffset) * 0.9));
    }
    26.66% {
        transform: translateX(calc(var(--_toCenterXOffset) * 0.94));
    }
    33.33% {
        transform: translate(calc(var(--_toCenterXOffset) * 0.965 + 1px), 2px);
    }
    35% {
        transform: translate(calc(var(--_toCenterXOffset) * 0.988), 1px);
    }
    37% {
        transform: translate(calc(var(--_toCenterXOffset) * 0.991 + 1px), -1px);
    }
    39% {
        transform: translate(calc(var(--_toCenterXOffset) * 0.995 - 1px), -2px);
    }
    41% {
        transform: translate(calc(var(--_toCenterXOffset) * 0.999 + 1px), -1px);
    }
    43% {
        transform: translate(calc(var(--_toCenterXOffset) * 0.75), 1px);
    }
    45% {
        transform: translate(calc(var(--_toCenterXOffset) * 0.5), 0px);
    }
    100% {
        transform: translate(calc(var(--_toCenterXOffset) * 0.5), 0px);
    }
}

@keyframes line_toggleMotionOff9371 {
    0% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}

@keyframes ball_toggleMotionOn9371A {
    0% {
        transform: translate(calc(var(--_toCenterXOffset) * 0.5), 0px);
    }
    100% {
        transform: translate(calc(var(--_toCenterXOffset) - 5.67px), 0px);
    }
}

@keyframes ball_toggleMotionOn9371B {
    0% {
        transform: translate(calc(var(--_toCenterXOffset) - 5.67px), 0px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes ballTrace_toggleMotionOff9371A {
    0% {
        opacity: 1;
        transform: translate(calc(var(--_toCenterXOffset) * 0.5), 0px);
    }
    99.9% {
        opacity: 1;
        transform: translate(calc(var(--_toCenterXOffset) - 5.67px), 0px);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--_toCenterXOffset) - 5.67px), 0px);
    }
}

@keyframes ballTrace_toggleMotionOff9371B {
    0% {
        opacity: 0;
        transform: translate(0px, 0px);
    }
    100% {
        opacity: 1;
        transform: translate(0px, 0px);
    }
}

/* 标题文字 - PORTFOLIO上方 */
.title-text {
    position: absolute;
    left: 15vw;
    font-size: 16px;
    font-weight: 900;
    color: #d6d6d6a4;
    z-index: 10;
    pointer-events: none;
    mix-blend-mode: overlay; /* 使用overlay混合模式，与PORTFOLIO一样的效果 */
}

/* 椭圆1样式 - 使用overlay混合模式 */
a-ellipse.ellipse-1 {
    position: absolute;
    height: 229.54vh;
    left: -43.96vw;
    right: -66.30vw;
    bottom: -192.87vh;
    background: #4FE8FF;
    box-shadow: 0px -9.44vh 4px rgba(0, 0, 0, 0.25);
    filter: blur(0.65vw);
    border-radius: 50%;
    z-index: 2;
    opacity: 0.9;
    mix-blend-mode: overlay; /* 使用overlay混合模式 */
    pointer-events: none; /* 禁用点击事件 */
}

/* 椭圆2样式 */
a-ellipse.ellipse-2 {
    position: absolute;
    width: 130.0vw;
    left: -84.90vw;
    top: -93.33vh;
    bottom: 9.17vh;
    background: #fc6b6b;
    filter: blur(2.34vw);
    border-radius: 50%;
    z-index: 3;
    opacity: 0.9;
    mix-blend-mode: overlay; /* 使用overlay混合模式 */
    pointer-events: none; /* 禁用点击事件 */
}

/* 椭圆3样式 */
a-ellipse.ellipse-3 {
    position: absolute;
    width: 160.53vw;
    height: 199.26vh;
    right: -102.66vw;
    top: -120.28vh;
    background: #FCFF42;
    box-shadow: 0.625vw 11.57vh 4px rgba(0, 0, 0, 0.25);
    filter: blur(0.39vw);
    border-radius: 50%;
    z-index: 4;
    opacity: 0.9;
    mix-blend-mode: overlay; /* 使用overlay混合模式 */
    pointer-events: none; /* 禁用点击事件 */
}

/* PORTFOLIO文字样式 - 添加glitch效果 */
.portfolio-text {
    position: absolute;
    top: 30vh;
    left: 15vw;
    width: 80vw;
    font-size: 250px;
    font-weight: 900;
    color: #dbdbdb;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
    letter-spacing: -10px;
    z-index: 10;
    pointer-events: none;
    mix-blend-mode: overlay; /* 使用overlay混合模式，与椭圆形效果一致 */
    opacity: 0.9;
    line-height: 0.85;
    word-wrap: break-word; /* 允许文字换行 */
    height: auto; /* 高度随内容变化 */
    
    /* 添加glitch效果 */
    position: relative;
    animation: shift 1s ease-in-out infinite alternate;
}

/* glitch伪元素 */
.portfolio-text::before,
.portfolio-text::after {
    display: block;
    content: "PORTFOLIO";
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.8;
    width: 100%;
    height: 100%;
    background: transparent;
}

.portfolio-text::before {
    animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
    color: #ff2121; /* 使用红色，与标题颜色一致 */
    z-index: -1;
    mix-blend-mode: overlay;
}

.portfolio-text::after {
    animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
    color: #4FE8FF; /* 使用青色，与椭圆1颜色一致 */
    z-index: -2;
    mix-blend-mode: overlay;
}

/* glitch动画 */
@keyframes glitch {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-3px, 3px);
    }

    40% {
        transform: translate(-3px, -3px);
    }

    60% {
        transform: translate(3px, 3px);
    }

    80% {
        transform: translate(3px, -3px);
    }

    to {
        transform: translate(0);
    }
}

@keyframes shift {
    0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {
        transform: skewX(0deg);
    }

    41% {
        transform: skewX(10deg);
    }

    42% {
        transform: skewX(-10deg);
    }

    59% {
        transform: skewX(40deg) skewY(10deg);
    }

    60% {
        transform: skewX(-40deg) skewY(-10deg);
    }

    63% {
        transform: skewX(10deg) skewY(-5deg);
    }

    70% {
        transform: skewX(-50deg) skewY(-20deg);
    }

    71% {
        transform: skewX(10deg) skewY(-10deg);
    }
}

/* 矩形样式 */
.rectangle {
    position: absolute;
    top: calc(30vh + 250px * 0.85 + 35px); /* PORTFOLIO底部 + 35px */
    left: 15vw;
    width: 30px;
    height: 5px;
    background-color: #dbdbdb;
    z-index: 20; /* 在所有元素上面 */
    pointer-events: none;
}

/* 下方文字样式 */
.sub-text {
    position: absolute;
    top: calc(30vh + 250px * 0.85 + 35px + 5px + 15px); /* 矩形底部 + 15px间距 */
    left: 15vw;
    width: 20vw;
    font-size: 20px;
    font-weight: 600;
    color: #dbdbdb;
    z-index: 20; /* 在所有元素上面 */
    pointer-events: none;
    line-height: 1.5;
    height: auto; /* 高度随内容变化 */
}

/* 自定义光标 - 简化版本 */
.cursor {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    pointer-events: none;
    z-index: 9999; /* 确保在最上层 */
    mix-blend-mode: difference; /* 使用difference混合模式实现反向效果 */
    transform: translate(-50%, -50%);
}

/* 响应式调整 - 桌面端 */
@media (min-width: 1025px) {
    .portfolio-text {
        font-size: 250px;
        top: 30vh;
        left: 15vw;
        width: 80vw;
        letter-spacing: -10px;
        line-height: 0.85;
    }
    
    .portfolio-text::before,
    .portfolio-text::after {
        font-size: 250px;
        letter-spacing: -10px;
    }
    
    .title-text {
        left: 15vw;
        font-size: 16px;
    }
    
    .rectangle {
        top: calc(30vh + 250px * 0.85 + 35px);
        left: 15vw;
        width: 30px;
        height: 5px;
    }
    
    .sub-text {
        top: calc(30vh + 250px * 0.85 + 35px + 5px + 15px);
        left: 15vw;
        width: 20vw;
        font-size: 20px;
    }
    
    .cursor {
        width: 8px;
        height: 8px;
    }
}

/* 平板端 */
@media (max-width: 1024px) and (min-width: 768px) {
    .portfolio-text {
        font-size: 160px;
        top: 25vh;
        left: 10vw;
        width: 80vw;
        letter-spacing: -6px;
        line-height: 0.85;
    }
    
    .portfolio-text::before,
    .portfolio-text::after {
        font-size: 160px;
        letter-spacing: -6px;
    }
    
    .title-text {
        left: 10vw;
        font-size: 14px;
    }
    
    .rectangle {
        top: calc(25vh + 160px * 0.85 + 35px);
        left: 10vw;
        width: 30px;
        height: 5px;
    }
    
    .sub-text {
        top: calc(25vh + 160px * 0.85 + 35px + 5px + 15px);
        left: 10vw;
        width: 30vw;
        font-size: 18px;
    }
    
    .cursor {
        width: 8px;
        height: 8px;
    }
    
    /* 平板端颜色切换按钮 */
    .color-toggle {
        aspect-ratio: 3.5 / 1;
    }
}

/* 手机端 */
@media (max-width: 767px) {
    .portfolio-text {
        font-size: 80px;
        top: 20vh;
        left: 10vw;
        width: 80vw;
        letter-spacing: -3px;
        line-height: 0.85;
    }
    
    .portfolio-text::before,
    .portfolio-text::after {
        font-size: 80px;
        letter-spacing: -3px;
    }
    
    .title-text {
        left: 10vw;
        font-size: 12px;
    }
    
    /* 手机端减小glitch效果强度 */
    .portfolio-text::before,
    .portfolio-text::after {
        opacity: 0.5; /* 降低不透明度 */
    }
    
    .rectangle {
        top: calc(20vh + 80px * 0.85 + 35px);
        left: 10vw;
        width: 25px;
        height: 4px;
    }
    
    .sub-text {
        top: calc(20vh + 80px * 0.85 + 35px + 4px + 10px);
        left: 10vw;
        width: 60vw;
        font-size: 16px;
    }
    
    .cursor {
        display: none; /* 手机端隐藏自定义光标 */
    }
    
    /* 手机端颜色切换按钮 */
    .color-toggle {
        aspect-ratio: 3 / 1;
    }
}

/* 超大屏幕适配 */
@media (min-width: 1920px) {
    .portfolio-text {
        font-size: 280px;
        letter-spacing: -12px;
    }
    
    .portfolio-text::before,
    .portfolio-text::after {
        font-size: 280px;
        letter-spacing: -12px;
    }
    
    .rectangle {
        top: calc(30vh + 280px * 0.85 + 35px);
    }
    
    .sub-text {
        top: calc(30vh + 280px * 0.85 + 35px + 5px + 15px);
    }
}

/* 添加波纹效果样式 */
.ripple {
    position: fixed;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: overlay; /* 波纹也使用overlay混合模式 */
}

/* 在原有 CSS 中添加以下代码 */

/* 顶部矩形 */
.top-rectangle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40vh; /* 修改为40vh高度 */
   background: linear-gradient(to bottom right, rgba(213, 64, 239, 0.7), rgba(193, 43, 252, 0.7)); /* 与底部矩形相同的半透明背景 */
    z-index: 7; /* 与底部矩形相同的z-index，确保在相同层级 */
    backdrop-filter: blur(10px) saturate(180%); /* 相同的毛玻璃效果 */
    -webkit-backdrop-filter: blur(10px) saturate(180%); /* Safari 支持 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 添加下边框（与底部矩形的上边框对应） */
}

/* 确保其他元素不会被顶部矩形遮挡，调整z-index */
.portfolio-text,
.title-text,
.rectangle,
.sub-text {
    z-index: 20; /* 确保这些元素在顶部矩形之上 */
}

/* 调整波浪线背景的z-index，确保在顶部矩形之下 */
a-waves {
    z-index: 1;
}

/* 调整椭圆形的z-index，确保在顶部矩形之下 */
a-ellipse.ellipse-1 {
    z-index: 2;
}

a-ellipse.ellipse-2 {
    z-index: 3;
}

a-ellipse.ellipse-3 {
    z-index: 4;
}

/* 确保光标在最上层 */
.cursor {
    z-index: 9999;
}

/* ========== 修改后的加载动画样式（缩小一倍） ========== */
.loader {
  position: fixed;
  top: 32px; 
  left: 32px; 
  width: fit-content;
  font-weight: bold;
  font-family: monospace;
  white-space: pre;
  font-size: 15px; /* 缩小一倍：从30px改为15px */
  line-height: 1.2em;
  height: 1.2em;
  overflow: hidden;
  z-index: 9999; /* 确保在最上层 */
  color: #dbdbdb; /* 使用与页面其他文字相似的颜色 */
  mix-blend-mode: overlay; /* 与页面其他元素保持一致的混合模式 */
}

.loader:before {
  content: "SomeWorks...\A⌰SomeWorks...\A⌰⍜meWorks...\A⌰⍜⏃Works...\A⌰⍜⏃⎅orks...\A⌰⍜⏃⎅⟟rks...\A⌰⍜⏃⎅⟟⋏ks...\A⌰⍜⏃⎅⟟⋏☌...\A⌰⍜⏃⎅⟟⋏☌⟒..\A⌰⍜⏃⎅⟟⋏☌⟒⏁.\A⌰⍜⏃⎅⟟⋏☌⟒⏁⋔";
  white-space: pre;
  display: inline-block;
  animation: l39 1s infinite steps(11) alternate;
}

@keyframes l39 {
  100% {
    transform: translateY(-100%)
  }
}

/* 卡片样式 - From Uiverse.io by joe-watson-sbf */
.card {
  position: fixed;
  top: 32px;
  right: 32px;
  width: 105px;
  height: 102px;
  border-radius: 4px;
  background: transparent;
  display: flex;
  gap: 2px;
  padding: .2em;
  z-index: 9998;
  pointer-events: auto;
  flex-direction: column;
  mix-blend-mode: overlay
}

.card p {
  width: 100%;
  height: 33.33%;
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  border-radius: 5px;
  transition: all .5s;
  background: transparent;
  border: 1px solid #dbdbdb;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  backdrop-filter: none;
  mix-blend-mode: overlay
}

.card p:hover {
  flex: 2;
  background: transparent;
  border-color: rgba(219, 219, 219, 0.9);
  backdrop-filter: blur(2px);
  mix-blend-mode: overlay
}

.card p span {
  min-width: auto;
  padding: .3em;
  text-align: center;
  transform: rotate(-90deg);
  transition: all .5s;
  text-transform: uppercase;
  color: #dbdbdb;
  letter-spacing: .1em;
  font-weight: 300;
  font-size: 14px;
  white-space: nowrap;
  writing-mode: vertical-rl;
  display: block;
  mix-blend-mode: overlay
}

.card p:hover span {
  transform: rotate(0);
  writing-mode: horizontal-tb;
  color: #dbdbdb;
  mix-blend-mode: overlay
}

/* 响应式调整 */
@media (max-width: 767px) {
  .card {
    width: 90px;
    height: 82px;
    top: 24px;
    right: 24px;
    gap: 1.6px;
    padding: .15em;
  }
  
  .card p span {
    font-size: 11px;
    font-weight: 300;
  }
  
  .card p:hover span {
    font-weight: 350;
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .card {
    width: 95px;
    height: 92px;
  }
  
  .card p span {
    font-size: 12px;
    font-weight: 300;
  }
  
  .card p:hover span {
    font-weight: 400;
  }
}

/* ========== 修改后的底部矩形文字样式 ========== */
.bottom-rectangle-text {
  position: absolute;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px; /* 桌面端默认字体大小 */
  font-weight: 300;
  color: #dbdbdb;
  z-index: 7;
  pointer-events: none;
}

/* ========== 底部矩形文字响应式调整 ========== */

/* 平板端 */
@media (max-width: 1024px) and (min-width: 768px) {
  .bottom-rectangle-text {
    font-size: 13px; /* 平板端字体大小 */
  }
}

/* 手机端 */
@media (max-width: 767px) {
  .bottom-rectangle-text {
    font-size: 11px; /* 手机端字体大小 */
    left: 16px; /* 手机端减小左边距 */
    right: 16px; /* 添加右边距 */
    text-align: left; /* 确保左对齐 */
  }
}

/* 超大屏幕适配 */
@media (min-width: 1920px) {
  .bottom-rectangle-text {
    font-size: 16px; /* 超大屏幕字体大小 */
  }
}

/* 透明点击椭圆样式 */
.click-ellipse {
    position: absolute;
    opacity: 0;
    z-index: 6; /* 在原有椭圆之上，但低于其他元素 */
    cursor: pointer;
}

/* 椭圆1点击区域 */
.ellipse-1-click {
    height: 229.54vh;
    left: -43.96vw;
    right: -66.30vw;
    bottom: -192.87vh;
    border-radius: 50%;
}

/* 椭圆2点击区域 */
.ellipse-2-click {
    width: 130.0vw;
    left: -84.90vw;
    top: -93.33vh;
    bottom: 9.17vh;
    border-radius: 50%;
}

/* 椭圆3点击区域 */
.ellipse-3-click {
    width: 160.53vw;
    height: 199.26vh;
    right: -102.66vw;
    top: -120.28vh;
    border-radius: 50%;
}

/* 拖拽图片样式 */
.drag-image {
    position: fixed;
    width: 200px;
    height: 150px;
    transform: rotate(15deg);
    opacity: 0;
    pointer-events: none;
    z-index: 10000;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: opacity 0.2s ease;
    object-fit: cover;
    border: 2px solid rgba(219, 219, 219, 0.5);
}

.drag-image.visible {
    opacity: 0.9;
}

/* ========== 颜色切换反白效果 ========== */

/* 确保自定义光标在反白模式下保持不变 */
body.grayscale .cursor {
    filter: invert(100%) hue-rotate(180deg) !important;
    mix-blend-mode: difference !important;
}

/* 确保图片只变黑白不反白 */
body.grayscale img:not(.cursor) {
    filter: grayscale(100%) invert(0) !important;
}

/* 确保 SVG 元素也应用反白效果 */
body.grayscale svg {
    filter: invert(100%);
}

/* 确保颜色切换按钮本身也应用反白效果 */
body.grayscale .color-toggle svg {
    filter: invert(100%);
}

/* 确保颜色切换按钮中的圆形在反白模式下可见 */
body.grayscale .color-toggle svg circle {
    filter: invert(100%);
}

/* 确保卡片元素也应用反白效果 */
body.grayscale .card {
    filter: invert(100%);
}

body.grayscale .card p {
    filter: invert(100%);
}

body.grayscale .card p span {
    filter: invert(100%);
}

/* 确保加载动画也应用反白效果 */
body.grayscale .loader {
    filter: invert(100%);
}

/* 确保底部矩形文字也应用反白效果 */
body.grayscale .bottom-rectangle-text {
    filter: invert(100%);
}

/* 确保波浪线也应用反白效果 */
body.grayscale a-waves svg path {
    filter: invert(100%);
}

/* 确保椭圆形也应用反白效果 */
body.grayscale a-ellipse {
    filter: invert(100%);
}

/* 确保文字元素也应用反白效果 */
body.grayscale .portfolio-text,
body.grayscale .title-text,
body.grayscale .sub-text {
    filter: invert(100%);
}

/* 确保伪元素也应用反白效果 */
body.grayscale .portfolio-text::before,
body.grayscale .portfolio-text::after {
    filter: invert(100%);
}

/* ========== 新增的优化样式 ========== */

/* 移动端卡片优化 - 避免两次点击问题 */
@media (max-width: 767px) {
  .card p {
    /* 在移动端禁用悬停时的 flex 变化，避免第一次点击只是展开 */
    transition: all 0.3s ease !important;
  }
  
  .card p span {
    /* 在移动端默认就显示为水平文字，避免需要悬停才能看到内容 */
    writing-mode: horizontal-tb !important;
    transform: rotate(0) !important;
    padding: 0.5em !important;
  }
  
  /* 移动端点击反馈 */
  .card p:active {
    background: rgba(219, 219, 219, 0.2) !important;
    border-color: rgba(219, 219, 219, 0.9) !important;
    backdrop-filter: blur(2px) !important;
  }
}

/* 卡片文字混合模式控制 */
.card p.normal-blend {
  mix-blend-mode: normal !important;
}

.card p.normal-blend span {
  mix-blend-mode: normal !important;
}