.toggle-btn {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 10px 50px;
    font-size: 26px;
    border-radius: 5px; 
    background-color: #4CAF50; 
    color: white; 
    border: none; 
    cursor: pointer; 
}

        #writer-container {
            position: relative;
            width: 230px;
            height: 230px;
            margin: 0px auto;
        }
        .grid-background {
            position: absolute;
            top: 5px;
            left: 5px;
            width: 222px;
            height: 222px; 
            border: 2px solid orange; 
            box-sizing: border-box; 
            z-index: -1;
        }
        .grid-background::before,
        .grid-background::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 5px;
            border-top: 2px dashed orange;
            transform-origin: center;
        }
        .grid-background::before {
            top: 50%;
            left: 0;
            transform: rotate(0deg);
        }
        .grid-background::after {
            top: 50%;
            left: 0;
            transform: rotate(90deg);
        }


.yuantton {
    display: inline-flex;
    padding-right: 65px;
    height: 90px;
    background-color: white;
    color: black;
    border-radius: 15px;
    font-size: 60px;
    border: 2px solid black;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.3s ease;
    position: relative;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    padding-left: 20px;
    color: #000;
}

.yuantton::after {
    content: '';
    background: url('o.png') no-repeat center;
    background-size: contain;
    width: 55px;
    height: 50px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.yuantton:hover {
    background-color: #b2b2aa;
    color: #da1e84;
        }

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 1em; 
}

td {
  border: 2px solid #5d5d5d; 
  padding: 10px;
  overflow: hidden;
  word-wrap: break-word;
}

td:nth-child(1) { width: 20%; }
td:nth-child(2) { width: 80%; }

td img {
  max-width: 100%;
  height: auto;
}

 a {
        color: inherit;
        text-decoration: none;
    }
table, td, th {
  color: inherit;
 text-align: center;
}

.fenbi {
    width: 90%;
    margin: 0 auto;
    border: 2px solid #5d5d5d;
    border-radius: 25px; 
    padding: 30px;
  text-align: center;
    box-sizing: border-box;
}
.fenbi a {
    color: #009900;
    text-decoration: none; /* 可选：去掉下划线 */
}

.fenbi a:hover {
    color: #E53333; /* 可选：鼠标悬停时的颜色 */
    text-decoration: underline; /* 可选：鼠标悬停时显示下划线 */
}

.zige {
  display: inline-block;
  position: relative;
  border: 2px solid #d58811;
  padding: 5px;
  margin: 5px;
  border-radius: 15px;
  width: 100px;
  height: 100px;
  cursor: pointer;
  overflow: hidden; /* 防止拼音溢出 */
}
.pinyin {
  position: absolute;
  top: 0.1em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5em;
  white-space: nowrap;
  max-width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis; /* 当拼音太长时显示省略号 */
}
.hanzi { 
transform: translateY(20px);
  display: block;
  font-size: 4em; 
  text-align: center;
}
.fenbia {
  width: 90%;
  margin: 0 auto;
  border: 2px solid #5d5d5d;
  border-radius: 25px; 
  padding: 30px;
  box-sizing: border-box;
  text-align:left;
}