/* 通用样式 */
.room {
  position: absolute;
  width: 100px;
  padding: 1px;
  background: #f5f0e6;
  border: 2px solid #6d4c41;
  border-radius: auto;
  text-align: center;
  z-index: 2;  
}

.connector {
  position: absolute;
  background: #666;
  z-index: 1;
}

.connector1 {
  position: absolute;
  z-index: 1;
}

.footer-links {
    position: fixed; /* 或者使用 absolute，取决于你的布局需求 */
    bottom: 0;
    width: 100%; /* 或者你需要的宽度 */
} 
/* 垂直连接线 */
.v-line {
  width: 2px;
  height: 20px;
}

/* 水平连接线 */
.h-line {
  height: 2px;
  width: 20px;
}

/* 斜线 */
.d-line {
  width: 2px;
  transform: rotate(45deg);
  transform-origin: top left;
}

.masked-animation {
    animation: masked-animation 3s infinite linear;
}
@keyframes masked-animation {
    0% { background-position: 0 0; }
    100% { background-position: -100% 0; }
}

/* 主样式系列 */
.css1, .css2, .css3, .css4, .css5, .css6, .css7, .css8, .css9, .css10 {
    display: inline-block;
    width: 220px;
    height: 22px;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-size: 200% 100%;
}

/* 具体颜色方案 */
.css1 { background-image: -webkit-linear-gradient(left, #28ff28, #2828ff 10%, #e1e100 20%, #ff00ff 30%, #000000 40%, #5b00ae 50%, #0000c6 60%, #aaaaff 70%, #f7acbc 80%, #CCFF66 90%, #28ff28); }
.css2 { background-image: -webkit-linear-gradient(left, #FF0000, #FF9933 10%, #FFFF33 20%, #33FF33 30%, #3333FF 40%, #9900FF 50%, #3333FF 60%, #33FF33 70%, #FFFF33 80%, #FF9933 90%, #FF0000); }
.css3 { background-image: -webkit-linear-gradient(left, #141414, #FFCCCC 10%, #99FF99 20%, #66FF66 30%, #FFFF66 40%, #9966FF 50%, #FFFF33 60%, #999999 70%, #FF0000 80%, #00FFCC 90%, #0000FF); }
.css4 { background-image: -webkit-linear-gradient(left, #0000C6, #66FF66 10%, #00EC00 20%, #141414 30%, #FFFF99 40%, #0000C6 50%, #FF00FF 60%, #00EC00 70%, #141414 80%, #FFFF99 90%, #0000C6); }
.css5 { background-image: -webkit-linear-gradient(left, #FF6666, #FFFFCC 10%, #3333FF 20%, #FF6666 30%, #FFFFCC 40%, #3333FF 50%, #FF6666 60%, #FFFFCC 70%, #3333FF 80%, #FF6666 90%, #FFFFCC); }
.css6 { background-image: -webkit-linear-gradient(left, #FF6666, #FFCC66 10%, #CCFF66 20%, #66FF66 30%, #66FFCC 40%, #6699FF 50%, #9966FF 60%, #FF66FF 70%, #999999 80%, #00FF00 90%, #33FF33); }
.css7 { background-image: -webkit-linear-gradient(left, #FF6666, #FFFFCC 10%, #3333FF 20%, #FF6666 30%, #FFFFCC 40%, #FF9999 50%, #FFFF99 60%, #99FF99 70%, #99FFFF 80%, #CC99FF 90%, #FF9999); }
.css8 { background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db); }
.css9 { background-image: -webkit-linear-gradient(left, #141414, #FFFF66 10%, #9933FF 20%, #141414 30%, #FFFF66 40%, #9933FF 50%, #141414 60%, #FFFF66 70%, #9933FF 80%, #ffa000 90%, #141414); }
.css10 { background-image: -webkit-linear-gradient(left, #28ff28, #5b00ae 10%, #0000c6 20%, #aaaaff 30%, #f7acbc 40%, #CCFF66 50%, #ffa060 60%, #ffa040 70%, #ffa020 80%, #ffa000 90%, #ffff00); }

/* 特殊效果 */
.css11_jt {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22));
    -webkit-background-clip: text;
    background-clip: text;
    -o-background-clip: text;
    -moz-background-clip: text;
}

.css11 {
    color: #f2f;
    background: -webkit-linear-gradient(180deg, #f2f, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
    background: -moz-linear-gradient(90deg, #4169E1, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
    background: -ms-linear-gradient(90deg, #4169E1, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
    background: -o-linear-gradient(90deg, #4169E1, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -ms-background-clip: text;
    -o-background-clip: text;
    animation: ran 5s linear infinite;
}
@keyframes ran { from { background-position: 0 0; } to { background-position: 200px 0; } }

/* 动态阴影效果 */
.css12 {
    text-shadow: 0px 1px 0px #999, 0px 1px 0px #888, 0px 1px 0px #777, 0px 1px 0px #666, 0px 1px 0px #555, 0px 1px 0px #444, 0px 1px 7px #001135;
    color: aqua;
}

.css13 {
    text-shadow: 1px 1px 6px deeppink;
    color: deeppink;
}

/* 渐变背景动画 */
.css14 {
    background-image: -webkit-linear-gradient(left, blue, #66ffff 10%, #cc00ff 20%, #CC00CC 30%, #CCCCFF 40%, #00FFFF 50%, #CCCCFF 60%, #CC00CC 70%, #CC00FF 80%, #66FFFF 90%, blue);
    -webkit-animation: masked-animation 3s linear infinite;
}

/* 彩虹闪烁效果 */
.css15 {
    --interval: 2s;
    text-shadow: 0 0 5px var(--color1), 0 0 5px var(--color2), 0 0 5px var(--color3), 0 0 5px var(--color4);
    will-change: filter, color;
    filter: saturate(60%);
    animation: flicker steps(100) var(--interval) 2s infinite;
}
.css15:nth-of-type(1) { --color1: azure; --color2: orangered; --color3: mediumblue; --color4: dodgerblue; font-family: Gruppo; }
.css15:nth-of-type(2) { --color1: pink; --color2: mediumblue; --color3: dodgerblue; --color4: azure; font-family: Bad Script; }
/* 其他nth-of-type样式保持不变... */

/* 动态变形动画 */
.css17 {
    background-image: -webkit-linear-gradient(left, #fbff00, #ff7600 10%, #ff0000 20%, #CC00CC 30%, #CCCCFF 40%, #00FFFF 50%, #CCCCFF 60%, #cc0000 70%, #ccff00 80%, #ff0404 90%, #fff000);
    -webkit-animation: ani34 4s forwards infinite;
    text-shadow: 0px 1px 1px red;
    font-weight: bold;
}
@keyframes ani34 {
    70% { text-shadow: 1px 2px 2px red; opacity: 0.8; }
}

/* 其他动画类（如.css18-.css34）保持原有结构，建议检查关键帧时间轴和属性变化是否符合预期 */

/* 文字阴影效果 */
.css25 { text-shadow: 1px 1px 6px green; color: green; }
.css26 { text-shadow: 1px 1px 6px purple; color: purple; }
.css27 { text-shadow: 1px 1px 6px blue; color: blue; }
.css28 { text-shadow: 1px 1px 6px pink; color: pink; }
.css29 { text-shadow: 1px 1px 6px yellow; color: yellow; }
.css30 { text-shadow: 1px 1px 6px orange; color: orange; }
.css31 { text-shadow: 1px 1px 6px red; color: red; }
.css32 { text-shadow: 1px 1px 6px red; color: red; }
.css33 { text-shadow: 1px 1px 6px blue; color: blue; }
.css34 { text-shadow: 1px 1px 6px green; color: green; }