body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}body{background-color:#f4f4f9;color:#333;font-family:Arial,sans-serif;margin:0;padding:0}.container{align-items:center;display:flex;flex-direction:column;padding:30px}.container,nav{max-width:900px;width:100%}nav{margin:0 auto}.text-input{border:1px solid #ccc;border-radius:8px;display:block;font-size:18px;height:150px;margin:10px auto;max-width:800px;padding:15px;resize:none;width:100%}.sentence-container{justify-content:center;margin-top:20px}.word-box{background-color:#fafafa;border:2px dashed #ccc;transition:all .3s ease-in-out}.draggable-word{border:2px solid #000;border-radius:8px;color:#000;font-size:20px;padding:12px 18px;transition:all .3s}.draggable-word:hover{background-color:#f8f9fa}.completion-message{background-color:#28a745;border-radius:5px;font-size:18px;margin-top:20px;padding:10px}.btn-restart{background-color:#ffc107;border:none;color:#000;font-size:16px;font-weight:700;padding:10px 15px;transition:background .3s}.btn-restart:hover{background-color:#e0a800}.audio-list-container{background:#fff;border-radius:12px;box-shadow:0 4px 8px #0000001a;margin:40px auto;max-width:1000px;padding:20px;text-align:center;width:100%}@media (max-width:768px){.container{padding:15px}.text-input{font-size:16px;height:120px;padding:12px}.word-box{font-size:18px;height:40px;line-height:40px;width:40px}.draggable-word{font-size:18px;padding:10px 14px}.completion-message{font-size:16px}.btn-restart{font-size:14px;padding:8px 12px}.audio-list-container{padding:10px}}.home-container{background:#fff;box-shadow:0 4px 8px #0000001a;margin:0 auto;max-width:850px;padding:40px;text-align:center;width:100%}h1{color:#007bff;font-size:32px;margin-bottom:20px}p{color:#555;font-size:18px}.video-wrapper{align-items:center;aspect-ratio:4/3;border-radius:10px;display:flex;justify-content:center;margin:40px auto;max-width:450px;position:relative;width:100%}.video-placeholder{cursor:pointer;height:100%;position:relative;width:100%}.video-placeholder img{border-radius:10px;display:block;height:100%;object-fit:cover;width:100%}.play-button{background:#0000004d;border-radius:50%;color:hsla(0,5%,87%,.789);font-size:32px;left:43%;padding:10px 14px;position:absolute;top:50%;transition:transform .2s ease}.play-button:hover{transform:scale(1.1)}.video-wrapper video{border-radius:10px;height:100%;object-fit:cover;width:100%}@media (max-width:600px){.home-container{padding:20px}h1{font-size:24px}p{font-size:16px}.play-button{font-size:24px;padding:8px 12px}}.navbar{background-color:#007bff;box-shadow:0 4px 8px #0000001a;padding:15px}.nav-container{align-items:center;display:flex;justify-content:space-between;margin:auto;max-width:900px;width:100%}.logo{color:#fff;font-size:22px;font-weight:700;text-decoration:none}.nav-links{align-items:center;display:flex;gap:20px}.nav-links a{color:#fff;font-size:18px;text-decoration:none;transition:.3s}.nav-links a:hover{color:#b7b4b4;text-decoration:none}.dropdown{position:relative}.dropbtn{color:#fff;display:inline-block;font-size:18px;padding:8px 10px;text-decoration:none;transition:background-color .2s ease;transition:.3s}.dropdown-content{background-color:#fff;border-radius:5px;box-shadow:0 4px 10px #f8f4f433;left:0;min-width:150px;opacity:0;position:absolute;top:42px;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease,visibility .2s;visibility:hidden;z-index:999}.dropdown-content a{border-radius:0;color:#413939;display:block;font-size:17px;padding:15px 12px;text-decoration:none;transition:background-color .2s ease}.dropdown-content a:hover{color:#bab8b8}.dropdown:hover .dropdown-content{opacity:1;transform:translateY(0);visibility:visible}@media (max-width:768px){.nav-container{align-items:flex-start;flex-direction:column;gap:10px}.logo{font-size:20px;padding-bottom:10px}.nav-links{flex-direction:column;gap:12px;width:100%}.dropbtn,.nav-links a{background-color:#007bff;font-size:16px;padding:10px;text-align:left;width:100%}.dropdown-content{box-shadow:none;position:relative;top:auto}.dropdown-content,.dropdown:hover .dropdown-content{opacity:1;transform:none;visibility:visible}}.language-switcher{align-items:baseline;color:#fff;cursor:pointer;display:inline-flex;font-size:18px;line-height:1;margin-left:7px;margin-top:2px;padding:0;transition:color .2s ease}.language-switcher:hover{color:#d3d3d3}.exercise-container{align-items:center;background:#fff;box-shadow:0 4px 8px #0000001a;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;margin:0 auto;max-width:930px;padding:20px;position:relative;width:100%}.h2-title{color:#007bff}.h3-title{align-self:flex-end;font-size:16px;margin-bottom:0;margin-right:50px;text-align:right;width:100%}.audio-navigation{align-items:center;display:flex;justify-content:space-between;max-width:850px;padding:0 10px;width:100%}.audio-navigation a{background-color:#a0a0a0;border:none;border-radius:50px;color:#f5f6f8;display:inline-block;font-size:15px;font-weight:700;padding:5px 10px;text-decoration:none;transition:background-color .3s ease,color .3s ease}.audio-navigation a:hover{background-color:#3b3939;text-decoration:none}.audio-navigation .disabled{color:#ccc;font-size:16px}.audio-player{margin:20px 0}.sentence-container{background:#f8f9fa;border-radius:10px;display:flex;flex-wrap:wrap;gap:10px;justify-content:left;margin-bottom:20px;min-height:60px;padding:20px}.word-box{background-color:#fff;border-radius:5px;cursor:pointer;font-size:22px;font-weight:700;height:50px;line-height:50px;position:relative;text-align:center;transition:.2s;width:50px}.word-box.empty{background-color:#e0e0e0;border:2px dashed #a0a0a0;color:#0000;min-height:50px;min-width:50px;pointer-events:auto;transition:all .3s ease-in-out}.word-box.filled{border:2px solid #007bff;box-shadow:0 4px 6px #0003;color:#007bff;transition:all .3s ease-in-out}.word-box:hover{background-color:#0056b3;color:#fff;transform:scale(1.1)}.word-box .edit-button{background:#007bff;border:none;border-radius:5px;bottom:-25px;color:#fff;cursor:pointer;display:none;font-size:14px;left:50%;padding:2px 5px;position:absolute;transform:translateX(-50%)}.word-box:hover .edit-button{display:block}.pinyin-input{border:1px solid #007bff;border-radius:5px;font-size:14px;height:25px;margin-top:5px;text-align:center;width:40px}.word-bank{display:flex;flex-wrap:wrap;gap:10px;justify-content:left;margin-left:20px;margin-top:20px}.draggable-word{background-color:#fff;border:2px solid #007bff;border-radius:5px;color:#333;cursor:grab;display:inline-block;font-size:22px;font-weight:700;margin-bottom:40px;padding:10px 15px;transition:.2s;-webkit-user-select:none;user-select:none}.draggable-word:active{cursor:grabbing}.draggable-word:hover{background-color:#0056b3;transform:scale(1.1)}.completion-message{background:#499ffc;border-radius:10px;color:#fff;font-size:20px;font-weight:700;margin:15px;padding:10px 15px;text-align:center}.btn-restart{background:#f3ed4c;border:1px solid #f3ed4c;border-radius:5px;color:#746666;margin-bottom:25px;margin-top:10px;padding:10px 20px;transition:.3s}.btn-restart,.exercise-btn{cursor:pointer;font-size:14px}.exercise-btn{background-color:#0056b3;border:2px solid #007bff;border-radius:5px;color:#fff;margin:20px 10px 10px;padding:5px 20px}.exercise-btn:hover{background-color:#f3ed4c;border:2px solid #f3ed4c;color:#544c4c}.button-wrapper{display:flex;justify-content:flex-end;padding-right:30px;width:100%}.btn-restart:hover{background-color:#c0b602;border:1px solid #c0b602;color:#362727}@media (max-width:768px){.word-box{font-size:18px;height:40px;line-height:40px;width:40px}.draggable-word{font-size:18px;margin-bottom:30px;padding:8px 12px}.pinyin-input{font-size:13px;height:22px;width:36px}.sentence-container,.word-bank{gap:8px;justify-content:center;margin-left:10px;padding:10px}.completion-message{font-size:18px;padding:8px 12px}.btn-restart{font-size:13px;padding:8px 16px}.exercise-btn{font-size:13px;padding:6px 12px}.button-wrapper{justify-content:center;padding-right:10px}.h3-title{font-size:14px;margin-right:0;text-align:center}}.container{margin:0 auto;max-width:890px;padding:20px}.title{color:#343a40;font-size:24px;margin-bottom:20px}.link-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}.link-item{background-color:#007bff;border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:14px;padding:8px 15px;text-decoration:none;transition:background-color .3s ease}.link-item:hover{background-color:#0056b3}.container{background:#fff;box-shadow:0 4px 8px #0000001a;text-align:center}.audio-list{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(2,1fr);list-style:none;padding:0}.audio-item{background:#f8f9fa;border-radius:10px;box-shadow:0 4px 6px #0000001a;display:flex;flex-direction:column;padding:15px;position:relative}.audio-item-checkbox{bottom:30px;cursor:pointer;position:absolute;right:20px;transform:scale(1.2)}.exercise-text{align-items:center;color:#343a40;font-size:18px;margin-bottom:10px;text-align:left}audio{margin-bottom:10px;margin-top:auto;width:100%}.button-group{align-items:center;display:flex;gap:10px;justify-content:center}.btn-start{background-color:#007bff;border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:14px;padding:8px 15px}.btn-start:hover{background-color:#084d97}.btn-delete{background-color:#c0837b;border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:14px;padding:8px 15px}.btn-delete:hover{background-color:#c5b3b3}.category-save-container{align-items:center;display:flex;gap:10px;justify-content:center;margin-top:20px}.category-select{border:1px solid #ccc;border-radius:5px;font-size:14px;padding:8px 15px}.btn-saving{background:#f3ed4c;border:2px solid #f3ed4c;border-radius:5px;color:#746666;cursor:pointer;font-size:14px;margin-bottom:10px;margin-top:10px;padding:6.5px 12px;transition:.3s}.btn-saving:hover{background:#d6d12b}.btn-saving:disabled{cursor:not-allowed;opacity:.6}.text-list-sidebar h3{color:#007bff;font-size:19px;margin:80px 0 20px;text-align:left}.text-list{list-style:none;margin:0;padding:0}.text-list li{border-bottom:1px solid #eee;padding:10px}.text-list li a{color:#333;display:block;font-size:16px;text-decoration:none;transition:background-color .3s}.text-list li a:hover{color:#007bff}.head-title{margin-left:18px}.grade-page-container{background-color:#fff;box-shadow:0 4px 8px #0000001a;display:flex;margin:0 auto;max-width:930px;width:100%}.text-list-sidebar{background-color:#f9f9f9;border-right:1px solid #eee;flex:0 0 180px;padding:20px}.audio-list-content{flex:1 1;padding:20px}.audio-list-content .container{background:#0000;border-radius:0;box-shadow:none;margin:0;max-width:100%;padding:0;width:100%}@media (max-width:768px){.grade-page-container{flex-direction:column}.text-list-sidebar{border-bottom:1px solid #eee;border-right:none;flex:1 1 100%}.audio-list-content{flex:1 1 100%}}.textbook-container{background:#fff;box-shadow:0 4px 8px #0000001a;box-sizing:border-box;margin:0 auto;max-width:930px;padding:30px 40px 40px;width:100%}.article-navigation{display:flex;justify-content:space-between;margin-bottom:20px;padding:0 20px}.article-navigation a{background-color:#a0a0a0;border:none;border-radius:50px;color:#f5f6f8;font-size:15px;font-weight:700;padding:5px 10px;text-decoration:none;transition:background-color .3s ease,color .3s ease}.article-navigation a:hover{background-color:#716f6f;text-decoration:none}.article-navigation .disabled{color:#ccc;font-size:16px}.textbook-title{color:#343a40;font-size:26px;font-weight:700;letter-spacing:3px;margin-bottom:30px;text-align:center}.textbook-content{word-wrap:break-word;background:#f8f9fa;border-radius:10px;color:#333;font-size:19px;margin-bottom:30px;overflow-wrap:break-word;padding:30px 30px 20px;text-align:left}.audio-button{background-color:#007bff;border:none;border-radius:5px;color:#fff;cursor:pointer;display:inline-block;font-size:16px;margin:20px 10px 10px;padding:10px 20px}.audio-button:hover{background-color:#0056b3}.audio-button:disabled{background-color:#ccc;cursor:not-allowed}.audio-player{margin-top:10px;max-width:400px;width:100%}.indent-block .pinyin,.indent-block .text-char{visibility:hidden}.text-paragraph{font-size:19px;line-height:2.6;margin-bottom:20px;white-space:normal}.text-char{align-items:center;cursor:pointer;display:inline-flex;flex-direction:column;justify-content:flex-end;position:relative;text-align:center}.text-char.highlighted{color:#f57c00;font-weight:700;transition:all .2s ease}.char-block{display:inline-block;margin:0 .05em;text-align:center;vertical-align:bottom;width:1.9em}.char-block .pinyin{color:#555;display:block;font-size:14px;left:0;line-height:1.2;position:relative;top:.2em;transform:none;white-space:nowrap}.char-block .text-char{cursor:pointer;display:block;font-size:19px;line-height:1.6}.char-block .text-char.highlighted{color:#f57c00;font-weight:700;transition:all .2s ease}.punctuation-char{display:inline-block;font-size:18px;line-height:1.6;margin:0 .1em;text-align:center;vertical-align:bottom;width:.9em}.text-char.no-spacing{display:inline-block;margin:0;position:relative}.punctuation-start{display:inline-block;font-size:18px;line-height:2.9;margin-right:-.4em;text-align:center;vertical-align:bottom;width:1.2em}.pinyin{color:#555;font-size:15px;left:75%;line-height:1.2;position:absolute;transform:translateX(-31%);white-space:nowrap}.pinyin-button-container{margin-bottom:15px;text-align:right}.pinyin-toggle-button{background-color:#2c8aef;border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:17px;padding:8px 16px;transition:background-color .3s ease}.pinyin-toggle-button:hover{background-color:#0056b3}.pinyin-toggle-button:active{background-color:#004494;transform:scale(.98)}.associated-audio-section{background:#fff;border-radius:12px;box-shadow:0 4px 8px #0000001a;margin-top:30px;padding:20px}.associated-audio-section h2{color:#343a40;font-size:22px;margin-bottom:15px;text-align:center}.associated-audio-section ul{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr;list-style:none;padding:0}.associated-audio-section li{background:#f8f9fa;border-radius:10px;box-shadow:0 4px 6px #0000001a;padding:15px;text-align:center}.associated-audio-section li p{color:#343a40;font-size:16px;margin-bottom:10px;text-align:left}.associated-audio-section audio{margin-bottom:10px;width:100%}.associated-audio-section button{background-color:#007bff;border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:14px;padding:8px 12px}.associated-audio-section button:hover{background-color:#0056b3}.author{font-size:14px;text-align:right}.grade{color:#007bff;font-size:24px;text-align:center}@media (max-width:768px){.textbook-container{padding:20px 15px}.textbook-content{font-size:18px;padding:20px 10px}.text-paragraph{line-height:2.2;margin-left:0;margin-right:0;text-indent:2em}.text-char{font-size:17px;width:2.1em}.punctuation-start{margin-right:-.2em}.audio-button{font-size:15px;padding:8px 16px}.pinyin-toggle-button{font-size:15px;padding:6px 12px}}
/*# sourceMappingURL=main.709edbe2.css.map*/