@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&display=swap);:root{--node-size:70px;--icon-size:32px;--text-color:#4B4B4B;--bg-color:#f7faff;--border-color:#e0e8f0;--header-green:#28a745;--correct-green:#28a745;--incorrect-red:#dc3545;--active-shadow:#a9b0b8;--active-outline-color:#4A90E2;--active-lesson-node-bg:#ffffff;--active-lesson-node-border:#CB544F;--active-lesson-node-shadow:#CB544F;--active-lesson-node-icon:#000000;--book-icon-color:#000;--completed-color:#ffc107;--completed-shadow:#e0a800;--completed-icon-color:#000000;--completed-border-color:#cccccc;--locked-color:#a9b0b8;--selected-blue:#007bff;--selected-blue-shadow:#0056b3;--review-incorrect-color:#a9d7ff;--ht-menu-primary-color:#007bff;--ht-menu-hover-bg:#e9f2ff;--ht-menu-panel-bg:#fff;--ht-menu-border-color:#ddd;--ht-menu-dark-text:#212529;--ht-menu-light-text:#f8f9fa;--toggle-off-bg:#ccc;--toggle-on-bg:var(--header-green);--toggle-slider-bg:white;--tooltip-bg:rgba(44, 62, 80, 0.95);--tooltip-text:#ecf0f1}body{font-family:Nunito,sans-serif;background-color:var(--bg-color);color:var(--text-color);margin:0;box-sizing:border-box;overflow-x:hidden;display:grid;grid-template-columns:auto 1fr;gap:2rem}body.reading-view-active{display:flex;overflow-y:hidden;gap:0;height:100vh}body.reading-view-active .main-content{padding:0;flex-grow:1}.mobile-menu-toggle,.mobile-overlay{display:none}.left-sidebar{position:sticky;top:0;height:100vh;width:200px;background-color:var(--ht-menu-panel-bg);padding:20px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--ht-menu-border-color);flex-shrink:0}.app-logo{font-family:Nunito,sans-serif;font-size:1.6rem;font-weight:900;color:var(--ht-menu-primary-color);text-align:center;margin-bottom:20px}.app-logo span{font-weight:400;font-size:1rem;color:#555;position:relative;bottom:2px}.main-menu{list-style:none;padding:0;margin:0;width:100%}.main-menu li{position:relative}.main-menu a{display:flex;align-items:center;gap:1rem;padding:12px 15px;border-radius:8px;text-decoration:none;font-weight:800;font-size:1.1rem;color:var(--ht-menu-dark-text);transition:all .2s;border:1px solid transparent;position:relative}.main-menu a:hover:not(.active){background-color:var(--ht-menu-hover-bg);border-color:var(--ht-menu-border-color)}.main-menu a.active{background-color:var(--ht-menu-primary-color);color:var(--ht-menu-light-text);font-weight:700;border-color:var(--ht-menu-primary-color)}.main-menu a svg{width:28px;height:28px;stroke:var(--ht-menu-dark-text);stroke-width:2.5;flex-shrink:0}.main-menu a.active svg{stroke:var(--ht-menu-light-text)}.profile-widget{margin-top:auto;padding:1rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:15px}#profile-avatar-wrapper{width:54px;height:54px;border:3px solid var(--ht-menu-border-color);border-radius:50%;overflow:hidden;flex-shrink:0}#profile-avatar-wrapper img{width:100%;height:100%;object-fit:cover}#auth-status-container{width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}.discord-auth-btn{width:100%;padding:8px 10px;border-radius:8px;border:2px solid var(--ht-menu-primary-color);background-color:var(--ht-menu-primary-color);color:var(--ht-menu-light-text);font-weight:700;cursor:pointer;transition:background-color .2s;font-size:.95rem}.discord-auth-btn:hover{background-color:#0069d9;border-color:#0069d9}#logged-in-info{display:flex;flex-direction:column;align-items:center;gap:5px}#logoutButton{display:block}#auth-status-container #loginButton[style*="display: block"]+#logged-in-info #logoutButton{display:none!important}#logged-in-info[style*="display: none"] #logoutButton{display:none!important}#discord-username-display{font-weight:800;color:var(--text-color);font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.discord-auth-btn-small{background-color:transparent;border:1px solid var(--border-color);color:var(--text-color);font-weight:600;padding:4px 10px;font-size:.8rem;max-width:100px}.discord-auth-btn-small:hover{background-color:var(--ht-menu-hover-bg)}.profile-widget button{display:none}.profile-widget img{width:100%;height:100%;border-radius:50%;object-fit:cover}.main-content{grid-column:2;padding-top:.5rem}#app-view{display:flex;flex-direction:column;height:100%}.hsk-level-selector-container{padding:1rem 2rem;flex-shrink:0;display:flex;justify-content:center;background-color:var(--bg-color);border-bottom:1px solid var(--border-color)}#path-content-container{flex-grow:1;overflow-y:auto;padding-top:1rem}#custom-hsk-level-selector{position:relative;width:100%;max-width:350px}#custom-hsk-level-button{width:100%;padding:.75rem 1.25rem;border-radius:12px;border:2px solid var(--border-color);background-color:var(--ht-menu-panel-bg);color:var(--ht-menu-dark-text);font-family:Nunito,sans-serif;font-weight:800;font-size:1.1rem;cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 0 0 #e0e8f0;transition:all .2s}#custom-hsk-level-button:hover{border-color:var(--active-shadow)}#custom-hsk-level-button::after{content:'▼';font-size:.8rem;opacity:.6}#custom-hsk-level-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;width:100%;background-color:var(--ht-menu-panel-bg);border:1px solid var(--ht-menu-border-color);border-radius:12px;box-shadow:0 5px 15px rgba(0,0,0,.1);z-index:20;max-height:70vh;overflow-y:auto}#custom-hsk-level-menu.visible{display:block}.hsk-level-option-item{padding:12px 20px;cursor:pointer;font-weight:700;font-size:1rem}.hsk-level-option-item:hover{background-color:var(--ht-menu-hover-bg)}.hsk-level-menu-header{padding:10px 20px 5px 20px;font-weight:800;font-size:.85rem;color:var(--text-color);opacity:.7;border-bottom:1px solid var(--border-color);pointer-events:none}#app-view{display:block}body.lesson-is-open .mobile-menu-toggle,body.mobile-menu-open .mobile-menu-toggle{display:none}.unit-section{display:grid;grid-template-rows:auto 1fr;gap:2.5rem 2rem;justify-content:center;align-items:start;max-width:550px;margin:0 auto 5rem auto;position:relative}.unit-section.layout-path-right{grid-template-areas:"header header" "animation path";grid-template-columns:1fr 100px}.unit-section.layout-path-left{grid-template-areas:"header header" "path animation";grid-template-columns:100px 1fr}.unit-header-wrapper{grid-area:header;grid-column:1/-1;text-align:center}.unit-header{display:inline-block;padding:1rem 3rem;border-radius:16px;background-color:var(--header-green);border:3px solid var(--header-green);color:#fff;box-shadow:0 5px 0 0 var(--header-green),0 10px 0 0 #186228}.unit-header h1{margin:0;font-size:1.5rem;font-weight:900}.path-container{display:flex;flex-direction:column;align-items:center;gap:25px}.animation-placeholder{grid-area:animation;display:flex;justify-content:center;align-items:center;align-self:center}.animation-placeholder img{max-width:70%}.path-wrapper{grid-area:path;display:flex;justify-content:center;width:100px}.vocab-container{position:absolute;top:calc(100% + 1rem);z-index:5}.unit-section.layout-path-right .vocab-container{left:0}.unit-section.layout-path-left .vocab-container{right:0}.vocab-toggle-btn{font-family:Nunito,sans-serif;font-weight:800;font-size:1rem;color:var(--text-color);background-color:#fff;border:2px solid var(--border-color);border-radius:10px;padding:.5rem 1rem;cursor:pointer;box-shadow:0 3px 0 0 #e0e8f0;transition:all .2s;opacity:.8}.vocab-toggle-btn:hover{border-color:var(--active-shadow);opacity:1}.vocab-toggle-btn span{font-weight:400;color:var(--locked-color)}.vocab-list{display:none;position:absolute;top:calc(100% + 8px);left:0;width:300px;background-color:var(--ht-menu-panel-bg);border:1px solid var(--ht-menu-border-color);border-radius:12px;box-shadow:0 5px 15px rgba(0,0,0,.1);padding:.75rem;max-height:300px;overflow-y:auto}.vocab-list.visible{display:block}.vocab-item{display:flex;align-items:center;padding:.6rem .5rem;border-bottom:1px solid var(--border-color)}.vocab-item:last-child{border-bottom:none}.vocab-char{font-size:1.3rem;font-weight:700;color:var(--text-color);flex:0 0 35%}.vocab-pinyin{font-size:.9rem;font-weight:400;color:#777;flex:0 0 35%}.vocab-def{font-size:.9rem;font-weight:600;color:var(--ht-menu-primary-color);flex:1 1 30%;text-align:right}.unit-header-wrapper{position:relative}.path-node{position:relative;width:var(--node-size);height:var(--node-size)}.path-node.locked .node-content{cursor:not-allowed}.node-content{position:relative;cursor:pointer;width:100%;height:100%}.node-icon{position:relative;width:100%;height:100%;background-color:#fff;border:2px solid var(--border-color);border-radius:16px;box-shadow:0 4px 0 0 #e0e8f0;transition:all .15s ease-out}.node-content:active .node-icon{transform:translateY(4px);box-shadow:none}.button-top{width:100%;height:100%;display:flex;justify-content:center;align-items:center;font-size:2.2rem;font-weight:900;transition:color .2s;color:#000}.path-node.locked .button-top{color:var(--locked-color)}.path-node.active .node-icon{border-color:#5e8c58;box-shadow:0 4px 0 0 #5e8c58;background-color:#fff}.path-node.active .button-top{color:#232323;font-size:2.2rem}.path-node.completed .node-icon{background-color:#fff;border-color:#5e8c58;box-shadow:0 4px 0 0 #5e8c58}.path-node.completed .button-top{color:#4a90e2;font-size:1.5rem}.lesson-view{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fff;z-index:100;flex-direction:column}.lesson-header{padding:1rem 2rem;display:flex;justify-content:flex-end;position:absolute;top:0;right:0;width:100%;z-index:10;box-sizing:border-box;background-color:transparent}.lesson-header .lesson-logo{display:block;position:absolute;top:1rem;left:2rem;margin:0;font-size:1.4rem}.lesson-header .lesson-logo span{font-size:.9rem}#close-lesson-btn{background:0 0;border:none;font-size:2rem;color:#ccc;cursor:pointer}.lesson-main{flex-grow:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;padding:4rem 2rem 1rem 2rem;max-width:950px;margin:0 auto;width:100%;box-sizing:border-box}.lesson-main.dev-lab-scrollable{overflow-y:auto;padding-bottom:5rem}.lesson-prompt{font-size:1.5rem;color:#333;font-weight:800;margin-bottom:2rem}#content-mascot-wrapper{display:flex;align-items:center;justify-content:center;gap:2rem;width:100%}#question-content-slot{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center}#question-content-slot.full-width-for-match{width:100%}#lesson-mascot-container{flex:0 0 120px;display:none;order:2}#lesson-mascot-img{max-width:100%;max-height:150px}.character-card{text-align:center;background:#f7faff;border-radius:20px;padding:2rem;width:100%;max-width:640px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;min-height:250px;margin-bottom:1rem}#question-character-display{font-size:clamp(4rem, 15vw, 7rem);font-weight:900;color:var(--text-color)}#question-pinyin-display{font-size:1.75rem;color:#777;margin-top:-1rem;font-weight:400}#audio-play-btn{background-color:var(--header-green);border:none;width:120px;height:120px;border-radius:50%;cursor:pointer;display:flex;justify-content:center;align-items:center;box-shadow:0 8px 0 0 #218838;transition:all .15s ease-out}#audio-play-btn:active{transform:translateY(8px);box-shadow:none}#audio-play-btn svg{width:60px;height:60px;fill:white}#question-wrapper.audio-mode #question-pinyin-display{margin-top:1rem}.answer-options{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%;max-width:640px;margin-top:1.5rem}.option-btn{background-color:#fff;border:2px solid var(--border-color);border-radius:12px;cursor:pointer;transition:all .2s;box-shadow:0 4px 0 0 #e0e8f0;font-weight:700}.option-btn:hover:not(:disabled){border-color:#a9b0b8;box-shadow:0 4px 0 0 #a9b0b8}.option-btn:active:not(:disabled){transform:translateY(4px);box-shadow:none}.option-btn:disabled{cursor:not-allowed}.answer-options-text .option-btn{padding:1.2rem;font-size:1.2rem;min-height:100px;display:flex;justify-content:center;align-items:center}.answer-options-char .option-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;font-size:2.5rem;min-height:100px}.answer-options-char .pinyin-in-btn{font-size:1rem;font-weight:400;color:#888;margin-top:.25rem}.option-btn.correct{background-color:#e6f8d9;border-color:var(--correct-green);color:var(--correct-green);box-shadow:0 4px 0 0 #9fceaa!important}.option-btn.incorrect{background-color:#f8d7da;border-color:var(--incorrect-red);color:var(--incorrect-red);box-shadow:0 4px 0 0 #f1a9b0!important}.intro-option-btn{background-color:#fff;border:2px solid var(--border-color);border-radius:12px;cursor:pointer;transition:all .2s;box-shadow:0 4px 0 0 #e0e8f0;min-height:140px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:1rem .5rem .5rem .5rem}.intro-option-btn:active:not(:disabled){transform:translateY(4px);box-shadow:none}.intro-option-btn:disabled{cursor:not-allowed}.intro-image-display{font-size:4rem;line-height:1;flex-grow:1;display:flex;align-items:center}.intro-text-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;border-top:2px solid var(--border-color);padding-top:.5rem;margin-top:.5rem}.intro-text-wrapper .pinyin-display{font-size:1rem;font-weight:400;color:#888}.intro-text-wrapper .char-display{font-size:2rem;font-weight:900;color:var(--text-color);line-height:1.2}@keyframes wiggle-hint-animation{0%,10%,100%{transform:rotate(0)}2%{transform:rotate(3deg)}6%{transform:rotate(-3deg)}8%{transform:rotate(1deg)}}.wiggle-hint{animation:wiggle-hint-animation 3s infinite}#introduction-card-container,#matching-pairs-container,#sentence-scramble-container{width:100%}#sentence-display-card{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;width:100%;max-width:640px;box-sizing:border-box;background:#f7faff;border-radius:20px;min-height:180px;position:relative;margin-bottom:2rem}#chinese-sentence-content{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center;align-items:center}.sentence-char-group{display:flex;flex-direction:column;align-items:center;position:relative}.sentence-char{font-size:clamp(3.5rem, 12vw, 5rem);font-weight:900;color:var(--text-color);line-height:1}.sentence-pinyin{font-size:1.2rem;color:#777;font-weight:400;margin-top:.5rem}.sentence-char-group.highlighted .sentence-char,.sentence-char-group.highlighted .sentence-pinyin{color:var(--header-green)}#new-word-bubble{background-color:var(--header-green);color:#fff;padding:.5rem 1rem;border-radius:12px;font-size:1rem;font-weight:700;position:absolute;top:-42px;left:50%;transform:translateX(-50%);white-space:nowrap;z-index:10;box-shadow:0 4px 10px rgba(0,0,0,.15);display:none}#new-word-bubble::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--header-green)}.sentence-audio-btn{background-color:var(--selected-blue);border:none;width:50px;height:50px;border-radius:50%;cursor:pointer;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 0 0 var(--selected-blue-shadow);transition:transform .15s ease-out,box-shadow .15s ease-out,background-color .15s ease-out;flex-shrink:0}.sentence-audio-btn.is-playing{transform:translateY(2px);box-shadow:0 2px 0 0 var(--selected-blue-shadow);background-color:#555;cursor:not-allowed}.sentence-audio-btn:active{transform:translateY(2px);box-shadow:0 2px 0 0 var(--selected-blue-shadow)}.sentence-audio-btn:disabled{background-color:#555;box-shadow:none;cursor:not-allowed}.sentence-audio-btn svg{width:24px;height:24px;fill:white}.answer-options-sentence .option-btn{height:auto;min-height:100px;padding:1rem;display:flex;justify-content:center;align-items:center}.sentence-option-inner-wrapper{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap}.sentence-option-word-group{display:flex;flex-direction:column;align-items:center;flex-shrink:0;min-width:4rem}.sentence-option-word-group .char{font-size:1.6rem;font-weight:900;line-height:1.2;white-space:nowrap}.sentence-option-word-group .pinyin{font-size:.9rem;color:#777;margin-top:.25rem}#submit-action-wrapper{display:none;align-items:flex-end;justify-content:center;gap:1.5rem;width:100%;padding:0;box-sizing:border-box}#submit-action-wrapper #lesson-mascot-container{order:1}.submit-btn{background-color:var(--header-green);color:#fff;padding:1.2rem 2.5rem;border:none;border-radius:12px;font-size:1.2rem;font-weight:800;cursor:pointer;box-shadow:0 6px 0 0 #218838;transition:all .15s ease-out;min-width:200px}.submit-btn:active{transform:translateY(4px);box-shadow:none}#sentence-construction-area{background:#f7faff;min-height:80px;border-bottom:2px solid #e0e8f0;padding:1rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;border-radius:12px}#word-bank-area{padding:1rem 0 .5rem 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}.word-btn{padding:.75rem 1.25rem;font-size:1.2rem;background-color:#fff;border:2px solid var(--border-color);border-radius:12px;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 0 0 #e0e8f0}.word-btn:hover:not(:disabled){border-color:#a9b0b8;box-shadow:0 4px 0 0 #a9b0b8}.word-btn:active:not(:disabled){transform:translateY(4px);box-shadow:none}.word-btn.hidden{opacity:0;pointer-events:none}#matching-pairs-container{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:640px;width:100%}.matching-column{display:flex;flex-direction:column;gap:1rem}.match-card{background-color:#fff;border:2px solid var(--border-color);border-radius:12px;padding:1.2rem;min-height:60px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 0 0 #e0e8f0;display:flex;justify-content:center;align-items:center}.match-card:hover:not(.matched){border-color:#a9b0b8;box-shadow:0 4px 0 0 #a9b0b8}.match-card.selected{border-color:var(--selected-blue);box-shadow:0 4px 0 0 var(--selected-blue-shadow);color:var(--selected-blue);transform:translateY(-2px)}.match-card.matched{background-color:#e9ecef;border-color:#d1d8e0;box-shadow:none;opacity:.6;cursor:default}@keyframes incorrect-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}.match-card.incorrect-flash{animation:incorrect-shake .4s;border-color:var(--incorrect-red);box-shadow:0 4px 0 0 var(--incorrect-red)}#introduction-card-container{display:flex;flex-direction:column;justify-content:center;align-items:center;perspective:1000px;padding-bottom:1rem}#intro-card-prompt{color:#888;font-weight:700;font-size:1.1rem;margin-top:2rem;min-height:1.5em}.flip-card{display:none}.feedback-footer{position:fixed;bottom:4rem;left:50%;transform:translateX(-50%);width:auto;max-width:90%;display:flex;visibility:hidden;justify-content:center;align-items:center;padding:.5rem .8rem;font-size:1.5rem;font-weight:800;z-index:103;background-color:#fff;border-radius:20px;box-shadow:0 -2px 10px rgba(0,0,0,.05);box-sizing:border-box;border:3px solid var(--border-color)}.feedback-footer.correct{border-color:var(--correct-green)}.feedback-footer.incorrect{border-color:var(--incorrect-red)}.feedback-footer.visible{visibility:visible}.feedback-footer.mascot-placeholder{background-color:transparent;box-shadow:none}.feedback-footer.mascot-placeholder #feedback-text{display:none}.feedback-footer.correct #feedback-text{color:var(--correct-green)}.feedback-footer.incorrect #feedback-text{color:var(--incorrect-red)}.feedback-footer #lesson-mascot-container{position:relative;order:2;flex-shrink:0}.feedback-footer #lesson-mascot-img{max-height:80px}.progress-bar-container{position:fixed;bottom:1rem;left:1rem;right:1rem;display:flex;height:16px;background-color:#e9ecef;z-index:101;border-radius:8px;overflow:hidden;box-sizing:border-box}.progress-segment{height:100%;transition:width .5s cubic-bezier(.175, .885, .32, 1.275)}.progress-segment.correct{background-color:var(--correct-green)}.progress-segment.incorrect{background-color:var(--incorrect-red)}.progress-segment.review-segment{background-color:var(--selected-blue)}.progress-segment.review-segment-incorrect{background-color:var(--review-incorrect-color)}.feedback-timer{width:32px;height:32px;border-radius:50%;display:none;background:conic-gradient(var(--header-green) var(--a),#e9ecef 0deg)}.feedback-timer.animating{display:block;animation:timer-spin linear;animation-duration:2s}#celebration-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(40,40,60,.5);display:flex;justify-content:center;align-items:center;z-index:1000;visibility:hidden;opacity:0;transition:opacity .4s ease-in-out,visibility .4s ease-in-out}#celebration-overlay.visible{visibility:visible;opacity:1}.celebration-image-wrapper{position:relative;display:flex;justify-content:center;align-items:center}#celebration-gif{max-width:80%;max-height:90vh;object-fit:contain}.celebration-text-content{position:absolute;top:15vh;left:50%;transform:translateX(-50%);z-index:1001;text-align:center;font-family:Nunito,sans-serif;color:#fff}.celebration-subtitle{margin:0;font-size:1rem;font-weight:400;text-transform:uppercase;letter-spacing:.3em;opacity:.8}.celebration-subtitle::after{content:'';display:block;width:60px;height:1px;background-color:#fff;margin:1rem auto 1.2rem;opacity:.5}.celebration-title{margin:0;font-size:clamp(2.5rem, 8vw, 4.5rem);font-weight:900;text-shadow:0 4px 20px rgba(0,0,0,.35)}#review-interstitial{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--bg-color);z-index:150;display:flex;justify-content:center;align-items:center;text-align:center;visibility:hidden;opacity:0}#review-interstitial.visible{visibility:visible;opacity:1}.review-interstitial-content h2{font-size:2rem;color:var(--text-color);font-weight:800;margin-bottom:.5rem}.review-interstitial-content p{font-size:1.2rem;color:#888}#writing-practice-container{display:none;flex-direction:column;justify-content:center;align-items:center;width:100%;gap:1.5rem;padding-bottom:2rem}#lesson-writing-svg-container,#writing-svg-container{width:350px;height:350px;max-width:90vw;max-height:90vw;border:2px solid var(--border-color);background-color:#fff;position:relative;touch-action:none;box-shadow:0 4px 8px rgba(0,0,0,.1);border-radius:8px}#lesson-writing-hanzi-svg,#writing-hanzi-svg{display:block;width:100%;height:100%}#lesson-writing-user-canvas,#writing-user-canvas{position:absolute;top:0;left:0;pointer-events:none}#lesson-writing-feedback-overlay,#writing-feedback-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;font-size:8rem;font-weight:900;opacity:0;visibility:hidden;transition:opacity .2s ease-out,visibility .2s ease-out;pointer-events:none;text-shadow:2px 2px 5px rgba(0,0,0,.3)}#lesson-writing-feedback-overlay.visible,#writing-feedback-overlay.visible{opacity:1;visibility:visible}#lesson-writing-feedback-overlay.correct-feedback,#writing-feedback-overlay.correct-feedback{color:var(--correct-green)}#lesson-writing-feedback-overlay.incorrect-feedback,#writing-feedback-overlay.incorrect-feedback{color:var(--incorrect-red)}#lesson-writing-hanzi-svg .practice-grid-line,#writing-hanzi-svg .practice-grid-line{stroke:var(--border-color);stroke-width:2;stroke-dasharray:20,20}#lesson-writing-hanzi-svg .stroke-guide-faint,#writing-hanzi-svg .stroke-guide-faint{fill:#e9ecef;stroke:none}#lesson-writing-hanzi-svg .stroke-guide-current,#writing-hanzi-svg .stroke-guide-current{fill:var(--selected-blue);stroke:none;animation:writing-pulse 2s infinite}#lesson-writing-hanzi-svg .stroke-completed,#writing-hanzi-svg .stroke-completed{fill:var(--text-color);stroke:none}@keyframes writing-pulse{0%{opacity:1}50%{opacity:.6}100%{opacity:1}}#lesson-writing-hanzi-svg .stroke-direction-arrow,#writing-hanzi-svg .stroke-direction-arrow{fill:var(--incorrect-red);animation:writing-pulse 1.5s ease-in-out infinite}#blitz-game-container{display:none;flex-direction:column;align-items:center;width:100%;gap:1.5rem}#main-game-area{display:flex;flex-direction:row;align-items:flex-start;gap:2rem;width:100%;justify-content:center}#game-stats{display:flex;justify-content:space-between;width:100%;max-width:550px;font-size:1.5rem;font-weight:800;color:var(--text-color);padding:0 1rem;box-sizing:border-box}#game-grid{display:grid;flex-basis:550px;flex-shrink:0;width:100%;max-width:550px;aspect-ratio:1/1;gap:.75rem}.grid-cell{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:16px;display:flex;justify-content:center;align-items:center;box-shadow:inset 0 2px 4px rgba(75,75,75,.05);transition:background-color .2s}.game-button{width:90%;height:90%;font-size:clamp(1.5rem, 8vw, 2.5rem);font-family:Nunito,sans-serif;font-weight:400;color:var(--text-color);background-color:#fff;border:2px solid #dde8f3;border-bottom-width:5px;border-radius:12px;cursor:pointer;display:flex;justify-content:center;align-items:center;animation:pop-in .3s cubic-bezier(.175,.885,.32,1.275);transition:transform .1s ease-out,box-shadow .1s ease-out,border-color .1s ease-out}.game-button:hover{border-color:var(--active-outline-color);transform:translateY(-2px)}.game-button:active{transform:translateY(2px);border-bottom-width:2px}.game-button.correct-flash{animation:correct-pop .4s forwards;background-color:#e6f8d9;border-color:var(--correct-green)}.game-button.incorrect-flash{animation:incorrect-shake .4s forwards;background-color:#f8d7da;border-color:var(--incorrect-red)}@keyframes pop-in{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes correct-pop{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.9}100%{transform:scale(.5);opacity:0}}#dev-toolbox{flex-basis:300px;flex-shrink:0;padding:1.5rem;border:2px dashed var(--border-color);border-radius:16px;background-color:#fff;box-sizing:border-box;max-height:550px;overflow-y:auto}#dev-toolbox h3{margin-top:0;text-align:center;color:var(--text-color)}.settings-grid{display:grid;grid-template-columns:1fr;gap:.8rem;margin-bottom:1.5rem}.setting-item{display:flex;flex-direction:column}.setting-item label{font-weight:700;margin-bottom:.25rem;font-size:.9rem}.setting-item input{width:100%;padding:.5rem;border-radius:8px;border:1px solid var(--border-color);font-size:1rem;box-sizing:border-box}#apply-settings-btn{width:100%;padding:.8rem;font-size:1.1rem;background-color:var(--selected-blue);color:#fff;border:none;border-radius:12px;cursor:pointer;box-shadow:0 4px 0 0 var(--selected-blue-shadow)}#add-char-btn{width:100%;padding:.5rem;margin-top:.5rem;margin-bottom:1rem;font-size:1rem;background-color:#6c757d;color:#fff;border:none;border-radius:8px;cursor:pointer;box-shadow:0 3px 0 0 #5a6268;transition:all .15s ease-out}#add-char-btn:active{transform:translateY(3px);box-shadow:none}#active-items-display{padding:.5rem;background-color:#f0f4f8;border:1px solid var(--border-color);border-radius:8px;min-height:2.5em;line-height:1.5;word-wrap:break-word;font-size:.9rem;color:#555}#writing-view{flex-direction:column;align-items:center;justify-content:space-between;height:100%;padding:2rem;box-sizing:border-box}.writing-tool-controls{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center;margin-bottom:2rem}#custom-writing-text-selector{position:relative;min-width:300px;max-width:400px;width:100%}#custom-writing-text-selector-button{width:100%;padding:.75rem 1.25rem;border-radius:12px;border:2px solid var(--border-color);background-color:var(--ht-menu-panel-bg);color:var(--ht-menu-dark-text);font-family:Nunito,sans-serif;font-weight:800;font-size:1.1rem;cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 0 0 #e0e8f0;transition:all .2s}#custom-writing-text-selector-button:hover{border-color:var(--active-shadow)}#custom-writing-text-selector-button::after{content:'▼';font-size:.8rem;opacity:.6}#custom-writing-text-selector-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;width:100%;background-color:var(--ht-menu-panel-bg);border:1px solid var(--ht-menu-border-color);border-radius:12px;box-shadow:0 5px 15px rgba(0,0,0,.1);z-index:20;max-height:70vh;overflow-y:auto}#custom-writing-text-selector-menu.visible{display:block}.writing-tool-controls .hsk-group-header{padding:10px 15px 5px;font-weight:900;font-size:.9rem;color:var(--text-color);border-top:1px solid var(--border-color)}.writing-tool-controls #custom-writing-text-selector-menu .hsk-group-header:first-child{border-top:none}.writing-tool-controls .hsk-option-item{padding:10px 15px 10px 30px;cursor:pointer;font-weight:600}.writing-tool-controls .hsk-option-item:hover{background-color:var(--ht-menu-hover-bg)}.writing-tool-actions{display:flex;gap:.75rem}.writing-tool-actions button{padding:.75rem 1.5rem;border-radius:12px;border:2px solid var(--border-color);background-color:var(--ht-menu-panel-bg);color:var(--ht-menu-dark-text);font-family:Nunito,sans-serif;font-weight:700;font-size:1rem;cursor:pointer;box-shadow:0 4px 0 0 #e0e8f0;transition:all .2s}.writing-tool-actions button:hover{border-color:var(--active-shadow)}.writing-tool-actions button:active{transform:translateY(4px);box-shadow:none}.writing-tool-content{display:flex;gap:2rem;max-width:900px;align-items:flex-start;overflow-y:auto;padding-bottom:2rem}.writing-tool-left-panel{flex:1;min-width:250px;max-width:50%;background-color:var(--ht-menu-panel-bg);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem;box-shadow:0 2px 5px rgba(0,0,0,.05);flex-shrink:1}.writing-paragraph-display{font-size:1.8rem;line-height:2;color:var(--text-color);text-align:left;margin:0}.writing-char-interactive{cursor:pointer;border-bottom:2px dotted var(--selected-blue);transition:background-color .2s;border-radius:3px;padding:0 2px}.writing-char-interactive:hover{background-color:var(--ht-menu-hover-bg)}.writing-char-interactive.highlighted-for-practice{background-color:#ffe0b2;border-color:#ff9800;color:#d35400}.writing-char-interactive.completed-char{background-color:#e6f8d9;border-color:var(--correct-green);color:var(--correct-green)}.writing-tool-info-panel{flex:0 0 350px;max-width:50%;display:flex;flex-direction:column;gap:1rem;align-items:center;flex-shrink:0}.current-char-info{text-align:center;background-color:var(--ht-menu-panel-bg);border:1px solid var(--border-color);border-radius:12px;padding:1rem;width:100%;box-shadow:0 2px 5px rgba(0,0,0,.05)}.current-char-pinyin{font-size:1.4rem;color:#777;margin-bottom:.5rem}.current-char-def{font-size:1.1rem;color:var(--ht-menu-primary-color);font-weight:600}#writing-svg-container{max-width:450px;aspect-ratio:1/1;margin:2rem auto}#writing-tool-hanzi-svg,#writing-tool-user-canvas{width:100%;height:100%}@media (max-width:768px){#writing-view{padding:1rem}.writing-tool-controls{flex-direction:column;align-items:stretch;margin-bottom:1.5rem}#custom-writing-text-selector{max-width:100%}.writing-tool-actions{width:100%;justify-content:space-around}.writing-tool-actions button{flex:1;font-size:.9rem;padding:.6rem 1rem}.writing-tool-content{display:flex;flex-direction:column;gap:.75rem;max-width:100%;align-items:center;order:2}.writing-tool-left-panel{width:100%;max-width:350px}.writing-tool-right-panel{flex:none;width:100%;max-width:none;display:flex;flex-direction:column;gap:1.5rem;align-items:center}#writing-svg-container{order:1;width:100%;height:auto;max-width:300px;max-height:300px;margin-top:0;margin-bottom:.7rem}.current-char-info{order:2;width:100%;max-width:350px;padding:0}.writing-paragraph-display{font-size:1.4rem;line-height:1.8;margin:0;width:100%}.current-char-pinyin{font-size:1.2rem}.current-char-def{font-size:1rem}#writing-feedback-overlay{font-size:5rem}}#subscription-view{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 5rem);padding:2rem;box-sizing:border-box;width:100%}.subscription-content{background-color:var(--ht-menu-panel-bg);border:1px solid var(--border-color);border-radius:16px;padding:3rem;max-width:600px;width:100%;box-shadow:0 5px 20px rgba(0,0,0,.08);text-align:center}.subscription-title{font-size:2.2rem;font-weight:900;color:var(--ht-menu-primary-color);margin-bottom:.8rem}.subscription-tagline{font-size:1.1rem;color:#666;margin-bottom:2rem}.premium-benefits{list-style:none;padding:0;margin:0 0 2.5rem 0;text-align:left}.benefit-item{display:flex;align-items:center;font-size:1.1rem;color:var(--text-color);margin-bottom:1rem;line-height:1.4}.benefit-item:last-child{margin-bottom:0}.benefit-item .check-icon{width:24px;height:24px;stroke:var(--correct-green);stroke-width:2.5;margin-right:.75rem;flex-shrink:0}.subscribe-btn{background-color:var(--header-green);color:#fff;padding:1.2rem 2.5rem;border:none;border-radius:12px;font-size:1.3rem;font-weight:800;cursor:pointer;box-shadow:0 6px 0 0 #218838;transition:all .15s ease-out;width:auto;min-width:250px;margin-bottom:1rem}.subscribe-btn:hover{background-color:#218838}.subscribe-btn:active{transform:translateY(4px);box-shadow:none}.subscription-terms{font-size:.9rem;color:#888;margin-top:1rem}.subscription-terms a{color:var(--ht-menu-primary-color);text-decoration:none;font-weight:600}.subscription-terms a:hover{text-decoration:underline}@media (max-width:768px){#subscription-view{padding:1rem}.subscription-content{padding:2rem}.subscription-title{font-size:1.8rem}.benefit-item,.subscription-tagline{font-size:1rem}.subscribe-btn{font-size:1.1rem;padding:1rem 2rem;min-width:unset;width:100%}}#dictionary-view{display:none;box-sizing:border-box;width:100%}.dictionary-section{padding:2rem;display:flex;flex-direction:column;gap:1.5rem}.dictionary-title{font-size:2rem;font-weight:900;color:var(--ht-menu-primary-color);text-align:center;margin-top:0;margin-bottom:1rem}.search-bar-container{display:flex;gap:10px;margin-bottom:1.5rem}#dictionary-search-input{flex-grow:1;padding:1rem 1.2rem;border:2px solid var(--border-color);border-radius:12px;font-size:1.1rem;outline:0;transition:border-color .2s,box-shadow .2s}#dictionary-search-input:focus{border-color:var(--ht-menu-primary-color);box-shadow:0 0 0 3px rgba(0,123,255,.25)}#dictionary-search-button{background-color:var(--ht-menu-primary-color);color:var(--ht-menu-light-text);padding:.8rem 1.5rem;border:none;border-radius:12px;font-size:1.1rem;font-weight:700;cursor:pointer;box-shadow:0 4px 0 0 var(--selected-blue-shadow);transition:all .15s ease-out}#dictionary-search-button:active{transform:translateY(4px);box-shadow:none}.dictionary-results{display:flex;flex-direction:column;gap:1rem}.initial-message{text-align:center;color:#888;font-style:italic;padding:2rem;border:1px dashed var(--border-color);border-radius:8px}.dictionary-card{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:12px;padding:1rem 1.5rem;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;box-shadow:0 2px 5px rgba(0,0,0,.05)}.dictionary-card-char{font-size:2.5rem;font-weight:900;color:var(--text-color);line-height:1}.dictionary-card-pinyin{font-size:1.2rem;color:#777;font-weight:400}.dictionary-card-def{font-size:1.1rem;color:#555;font-weight:600;margin-top:.5rem}#reading-view{height:100%}.hidden{display:none!important}#text-lesson-container{padding:3rem;overflow-y:auto;height:100%;box-sizing:border-box}.top-controls{display:flex;justify-content:center;align-items:center;gap:1.5rem;padding:1.5rem;margin-bottom:0}#hsk-text-selector{padding:.5rem 1rem;border-radius:8px;border:2px solid var(--border-color);background-color:var(--ht-menu-panel-bg);color:var(--dark-text);font-family:Nunito,sans-serif;font-weight:700;font-size:1rem;cursor:pointer;min-width:200px;transition:border-color .2s}#hsk-text-selector:focus{outline:2px solid var(--primary-blue)}.top-control-btn{padding:.5rem 1rem;border-radius:8px;border:2px solid var(--border-color);background-color:var(--ht-menu-panel-bg);color:var(--dark-text);text-decoration:none;font-weight:700;font-size:1rem;cursor:pointer;transition:all .2s}.top-control-btn:hover{border-color:var(--primary-blue);color:var(--primary-blue)}.audio-instruction{color:#888;font-size:1rem;font-weight:600;width:100%;text-align:center;margin-top:1rem}.pinyin-toggle-wrapper{display:flex;align-items:center;gap:1rem;white-space:nowrap}.toggle-switch{position:relative;display:inline-block;width:48px;height:24px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--toggle-off-bg);transition:.4s;border-radius:24px}.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:var(--toggle-slider-bg);transition:.4s;border-radius:50%}input:checked+.slider{background-color:var(--toggle-on-bg)}input:checked+.slider:before{transform:translateX(24px)}#text-container{max-width:800px;margin:0 auto;font-size:34px;font-weight:600;line-height:2.5;text-align:left;color:var(--dark-text)}#text-container span.interactive-word{cursor:pointer;border-bottom:2px dotted var(--correct-green);transition:background-color .2s;border-radius:3px;padding:0 2px;display:inline-flex;flex-direction:column;align-items:center;line-height:1.2;vertical-align:text-bottom}#text-container span.interactive-word:hover{background-color:var(--ht-menu-hover-bg)}.interactive-word .chinese-char{font-size:34px;line-height:1.2}.interactive-word .pinyin-text{font-size:16px;color:#888;opacity:0;transition:opacity .2s,margin-top .2s,height .2s;height:0;overflow:hidden}body.show-pinyin #text-container span.interactive-word .pinyin-text{opacity:1;height:auto;margin-top:3px}body.show-pinyin #text-container{line-height:2.8}#pdf-viewer-container{width:100%;height:100%;position:relative;background-color:var(--bg-color)}#pdf-render-area{width:100%;height:100%;overflow:auto;text-align:center}#pdf-render-area canvas{width:100%;height:auto;display:block;margin:0;box-shadow:0 4px 12px rgba(0,0,0,.1)}#pdf-viewer-container.pdf-dark-mode #pdf-render-area canvas{filter:invert(1) hue-rotate(180deg)}#pdf-render-area canvas.interactive-cursor{cursor:pointer}#pdf-controls{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:1rem;padding:.75rem 1.25rem;background-color:rgba(30,30,30,.75);backdrop-filter:blur(5px);border-radius:12px;border:1px solid rgba(255,255,255,.2);color:#fff;z-index:10}#pdf-controls button{background-color:var(--selected-blue);color:var(--ht-menu-light-text);border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-weight:700}#pdf-close-btn{background-color:#6c757d;margin-right:auto}#pdf-controls button:disabled{background-color:#555;cursor:not-allowed}.pdf-dark-toggle-wrapper{display:flex;align-items:center;gap:.5rem;border-left:1px solid #777;padding-left:1rem}#tooltip{position:absolute;display:none;padding:15px;background-color:var(--tooltip-bg);color:var(--tooltip-text);border-radius:6px;z-index:1000;max-width:300px;pointer-events:none;box-shadow:0 2px 10px rgba(0,0,0,.2);transition:background-color .3s,color .3s}#tooltip .word{font-size:20px;font-weight:700;color:var(--correct-green)}#tooltip .pinyin{font-size:16px;color:#888;margin:5px 0}#tooltip .definition{font-size:14px}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.loading-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(136,136,136,.3);border-radius:50%;border-top-color:#888;animation:spin 1s ease-in-out infinite;-webkit-animation:spin 1s ease-in-out infinite}#reading-options-btn{display:none}.reading-submenu{display:none;margin-top:5px;margin-bottom:10px}.reading-submenu.visible{display:block}.reading-submenu a{display:flex;align-items:center;gap:.75rem;font-size:.9rem;font-weight:700;color:var(--ht-menu-dark-text);text-decoration:none;background-color:transparent;border:1px solid transparent;border-radius:8px;padding:8px 15px 8px 59px;transition:all .2s;white-space:nowrap;box-sizing:border-box;width:100%}.reading-submenu a:hover{color:var(--ht-menu-primary-color);border-color:var(--ht-menu-border-color);background-color:var(--ht-menu-hover-bg)}.reading-submenu a svg{width:20px;height:20px;stroke:var(--ht-menu-dark-text);stroke-width:2;flex-shrink:0;transition:stroke .2s}.reading-submenu a:hover svg{stroke:var(--ht-menu-primary-color)}#custom-hsk-selector{position:relative;min-width:375px}#custom-hsk-button{width:100%;padding:.5rem 1rem;border-radius:8px;border:2px solid var(--border-color);background-color:var(--ht-menu-panel-bg);color:var(--dark-text);font-family:Nunito,sans-serif;font-weight:700;font-size:1rem;cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:center}#custom-hsk-button::after{content:'▼';font-size:.7rem;opacity:.6}#custom-hsk-menu{display:none;position:absolute;top:calc(100% + 5px);left:0;width:100%;background-color:var(--ht-menu-panel-bg);border:1px solid var(--ht-menu-border-color);border-radius:12px;box-shadow:0 5px 15px rgba(0,0,0,.1);z-index:20;max-height:70vh;overflow-y:auto}#custom-hsk-menu.visible{display:block}.hsk-group-header{padding:10px 15px 5px;font-weight:900;font-size:.9rem;color:var(--text-color);border-top:1px solid var(--border-color)}#custom-hsk-menu .hsk-group-header:first-child{border-top:none}.hsk-option-item{padding:10px 15px 10px 30px;cursor:pointer;font-weight:600}.hsk-option-item:hover{background-color:var(--ht-menu-hover-bg)}@media (max-width:1024px){.unit-section.layout-path-left .vocab-container,.unit-section.layout-path-right .vocab-container{left:50%;right:auto;transform:translateX(-50%);width:90%;max-width:350px}.vocab-list{left:50%;transform:translateX(-50%);width:100%}.review-interstitial-content{padding:0 2rem}#pinyin-toggle-wrapper{position:fixed;bottom:20px;right:20px;z-index:30}#custom-hsk-selector{flex-grow:1;min-width:unset}#custom-hsk-menu{width:auto;left:20px;right:20px}body,body.reading-view-active{display:block;height:auto;overflow:visible}.left-sidebar{position:fixed;top:0;left:0;width:280px;height:100%;z-index:101;transform:translateX(-100%);transition:transform .3s ease-in-out;padding-top:60px;box-shadow:4px 0 15px rgba(0,0,0,.1);overflow-y:auto}body.mobile-menu-open .left-sidebar{transform:translateX(0)}.mobile-menu-toggle{display:flex;position:fixed;top:1rem;left:1rem;z-index:102;background:var(--ht-menu-panel-bg);border:2px solid var(--border-color);border-radius:12px;width:48px;height:48px;align-items:center;justify-content:center;cursor:pointer}.mobile-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:100}body.mobile-menu-open .mobile-overlay{display:block}.main-content{padding:0 1rem;margin-top:1rem}body.reading-view-active .main-content{padding:0;height:calc(100vh - 5rem);margin-top:0}#app-view{margin-top:1rem}.lesson-main{padding:1rem}.lesson-prompt{flex-shrink:0;margin-bottom:1rem;margin-top:1rem}#content-mascot-wrapper{overflow-y:visible;gap:1rem}.answer-options-sentence{grid-template-columns:1fr}.sentence-option-word-group{flex-shrink:1;min-width:unset;gap:.25rem}.sentence-option-word-group .char{font-size:1.2rem}.sentence-option-word-group .pinyin{font-size:.75rem}.sentence-option-inner-wrapper{gap:.5rem}.lesson-spacer{flex-grow:1}.lesson-header .lesson-logo{display:none}#lesson-mascot-container{flex-basis:90px;flex-shrink:1;align-self:center}.character-card{min-height:180px;padding:1rem}#audio-play-btn{width:90px;height:90px;box-shadow:0 6px 0 0 #218838}#audio-play-btn:active{transform:translateY(6px)}#audio-play-btn svg{width:45px;height:45px}#question-pinyin-display{font-size:1.25rem}#matching-pairs-container{grid-template-columns:1fr 1fr}#sentence-display-card{min-height:120px;padding:1rem}#chinese-sentence-content{gap:.8rem}.sentence-pinyin{font-size:.9rem}#new-word-bubble{font-size:1rem;padding:.6rem 1rem}.dictionary-section{padding:1.5rem}.dictionary-title{font-size:1.6rem}#dictionary-search-input{padding:.8rem 1rem;font-size:1rem}#dictionary-search-button{padding:.6rem 1rem;font-size:1rem}.dictionary-card-char{font-size:2rem}.dictionary-card-pinyin{font-size:1rem}.dictionary-card-def{font-size:1rem}#text-lesson-container{padding:1.5rem 1.5rem 1.5rem 1.5rem}#text-container,.interactive-word .chinese-char{font-size:26px}.top-controls{margin-top:0;margin-bottom:0}.interactive-word .pinyin-text{font-size:13px}#main-game-area{flex-direction:column;align-items:center}#dev-toolbox{margin-top:2rem;width:100%;max-width:550px;max-height:none}.settings-grid{grid-template-columns:1fr 1fr}#game-grid{flex-basis:auto;flex-shrink:1}.audio-instruction{flex-grow:1;text-align:center;padding:0 50px;box-sizing:border-box}#reading-options-btn svg{width:24px;height:24px}#reading-options-menu #pdf-upload-button{justify-content:center}}@media (min-width:1025px){.unit-section.layout-path-right{grid-template-columns:220px 100px}.unit-section.layout-path-left{grid-template-columns:100px 220px}.word-btn{font-size:1.6rem;padding:1rem 1.5rem}.intro-image-display{min-height:150px}}.icon-display-size{font-size:clamp(4rem, 12vw, 6rem);line-height:1;display:inline-flex;align-items:center;justify-content:center}.material-icons{color:var(--text-color);-webkit-user-select:none;-moz-user-select:none;user-select:none}.custom-svg-icon-display-size{max-width:100%;height:auto;object-fit:contain;width:clamp(5rem,18vw,8rem);height:clamp(5rem,18vw,8rem);vertical-align:middle;flex-shrink:0}.custom-svg-icon-display-size{max-width:100%;height:auto;object-fit:contain;width:clamp(4rem,12vw,6rem);height:clamp(4rem,12vw,6rem);vertical-align:middle;flex-shrink:0}.char-fallback{font-weight:900;color:var(--text-color)}#question-character-display,.intro-image-display{display:flex;justify-content:center;align-items:center}@media (max-width:1024px){.left-sidebar .profile-widget{flex-direction:row;justify-content:space-between;align-items:center}.left-sidebar #auth-status-container{flex-direction:column;gap:5px;align-items:flex-start;flex-grow:1;justify-content:center}.left-sidebar #logged-in-info{display:flex!important;flex-direction:column;align-items:flex-start;width:100%;gap:2px}.left-sidebar #discord-username-display{display:block!important;text-align:left;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.left-sidebar .discord-auth-btn{width:100%;padding:5px 10px;font-size:.8rem}.left-sidebar .discord-auth-btn-small{width:auto;padding:3px 8px;font-size:.75rem;align-self:flex-start;max-width:none;flex-shrink:0}}.benefit-item .benefit-title-large{font-size:1.1em;font-weight:700}.benefit-item .benefit-description-small{font-size:.9em;line-height:1.5}.benefit-item .benefit-indented{padding-left:15px;margin-top:5px}#read-full-text-btn .stop-icon{display:none}#read-full-text-btn .play-icon,#read-full-text-btn .stop-icon{width:24px;height:24px}#read-full-text-btn.is-speaking{background-color:var(--correct-green);border-color:var(--correct-green)}#read-full-text-btn.is-speaking .play-icon{display:none}#read-full-text-btn.is-speaking .stop-icon{display:block;stroke:white}#typing-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;padding:2rem;box-sizing:border-box;overflow-y:auto}.typing-tool-controls{display:flex;justify-content:center;align-items:center;gap:2rem;padding:1rem 0;margin-bottom:2rem}#custom-typing-text-selector{position:relative;min-width:375px;max-width:600px}#custom-typing-text-selector-button{width:100%;padding:.5rem 1rem;border-radius:8px;border:2px solid var(--border-color);background-color:var(--ht-menu-panel-bg);color:var(--text-color);font-family:Nunito,sans-serif;font-weight:700;font-size:1rem;cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:center}#custom-typing-text-selector-button::after{content:'▼';font-size:.7rem;opacity:.6}#custom-typing-text-selector-menu{display:none;position:absolute;top:calc(100% + 5px);left:0;width:100%;background-color:var(--ht-menu-panel-bg);border:1px solid var(--ht-menu-border-color);border-radius:12px;box-shadow:0 5px 15px rgba(0,0,0,.1);z-index:20;max-height:70vh;overflow-y:auto}#custom-typing-text-selector-menu.visible{display:block}#typing-text-area{max-width:800px;width:100%;margin-bottom:2rem;background-color:var(--ht-menu-panel-bg);border:1px solid var(--border-color);border-radius:12px;padding:2rem;box-shadow:0 4px 10px rgba(0,0,0,.05)}#typing-paragraph-display{font-size:2.2rem;line-height:2;color:var(--text-color);text-align:left;margin:0;white-space:pre-wrap}.typing-segment{cursor:default;transition:all .2s;border-radius:4px;padding:0 2px}.current-segment-highlight{background-color:#ffedc7;font-weight:700;color:#d35400}.correct-segment{background-color:#e6f8d9;color:var(--correct-green);border-bottom:2px solid var(--correct-green);font-weight:700}.incorrect-segment{background-color:#f8d7da;color:var(--incorrect-red);border-bottom:2px solid var(--incorrect-red);font-weight:700}#typing-input-wrapper{width:100%;max-width:800px;display:flex;flex-direction:column;align-items:center;gap:.5rem}#typing-input-field{width:100%;padding:1rem 1.5rem;border:2px solid var(--selected-blue);border-radius:12px;font-size:1.5rem;font-family:Nunito,sans-serif;font-weight:600;outline:0;transition:border-color .2s;box-sizing:border-box}#typing-input-field:focus{border-color:var(--ht-menu-primary-color);box-shadow:0 0 0 3px rgba(0,123,255,.25)}#typing-feedback-display{min-height:1.5rem;font-size:1rem;font-weight:700;color:#888}@media (max-width:768px){#typing-view{padding:1rem}.typing-tool-controls{flex-direction:column;width:100%}#custom-typing-text-selector{min-width:unset;width:100%}#typing-text-area{padding:1rem}#typing-paragraph-display{font-size:1.5rem;line-height:1.8}#typing-input-field{font-size:1.2rem}}#text-container span.interactive-word,.typing-word-wrap{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;vertical-align:top;line-height:1.2;margin-right:.5rem;cursor:pointer;border-bottom:2px dotted transparent}#text-container span.interactive-word .pinyin-text,.typing-word-wrap .pinyin-text{display:none;font-size:.7em;text-align:center;line-height:1;color:#888}body.show-pinyin #text-container span.interactive-word .pinyin-text,body.show-pinyin .typing-word-wrap .pinyin-text{display:block}body.show-pinyin #text-container,body.show-pinyin #typing-paragraph-display{line-height:2.8}