:root{--component-color-0:#FF6B6B;--component-color-1:#4ECDC4;--component-color-2:#45B7D1;--component-color-3:#96CEB4;--component-color-4:#FFEAA7;--component-color-5:#DDA0DD;--external-radical-color:#d9534f;--component-color-0-light:#FF6B6B40;--component-color-1-light:#4ECDC440;--component-color-2-light:#45B7D140;--component-color-3-light:#96CEB440;--component-color-4-light:#FFEAA740;--component-color-5-light:#DDA0DD40;--component-color-0-pale:#FF6B6B10;--component-color-1-pale:#4ECDC410;--component-color-2-pale:#45B7D110;--component-color-3-pale:#96CEB410;--component-color-4-pale:#FFEAA710;--component-color-5-pale:#DDA0DD10;--etymology-pictophonetic-color:#4CAF50;--etymology-pictographic-color:#FF9800;--etymology-ideographic-color:#2196F3;--etymology-none-color:#9E9E9E;--etymology-semantic-default-color:#2196F3;--etymology-phonetic-default-color:#FF9800;--etymology-pictophonetic-light:#4CAF5020;--etymology-pictographic-light:#FF980020;--etymology-ideographic-light:#2196F320;--etymology-none-light:#9E9E9E20;--etymology-semantic-default-light:#2196F320;--etymology-phonetic-default-light:#FF980020}.component-color-0{color:var(--component-color-0)}.component-color-1{color:var(--component-color-1)}.component-color-2{color:var(--component-color-2)}.component-color-3{color:var(--component-color-3)}.component-color-4{color:var(--component-color-4)}.component-color-5{color:var(--component-color-5)}.component-bg-0{background-color:var(--component-color-0)}.component-bg-1{background-color:var(--component-color-1)}.component-bg-2{background-color:var(--component-color-2)}.component-bg-3{background-color:var(--component-color-3)}.component-bg-4{background-color:var(--component-color-4)}.component-bg-5{background-color:var(--component-color-5)}.component-border-0{border-color:var(--component-color-0)}.component-border-1{border-color:var(--component-color-1)}.component-border-2{border-color:var(--component-color-2)}.component-border-3{border-color:var(--component-color-3)}.component-border-4{border-color:var(--component-color-4)}.component-border-5{border-color:var(--component-color-5)}.external-radical-color{color:var(--external-radical-color)}.external-radical-bg{background-color:var(--external-radical-color)}.external-radical-border{border-color:var(--external-radical-color)}.etymology-pictophonetic{color:var(--etymology-pictophonetic-color)}.etymology-pictographic{color:var(--etymology-pictographic-color)}.etymology-ideographic{color:var(--etymology-ideographic-color)}.etymology-none{color:var(--etymology-none-color)}.etymology-bg-pictophonetic{background-color:var(--etymology-pictophonetic-color)}.etymology-bg-pictographic{background-color:var(--etymology-pictographic-color)}.etymology-bg-ideographic{background-color:var(--etymology-ideographic-color)}.etymology-bg-none{background-color:var(--etymology-none-color)}.etymology-border-pictophonetic{border-color:var(--etymology-pictophonetic-color)}.etymology-border-pictographic{border-color:var(--etymology-pictographic-color)}.etymology-border-ideographic{border-color:var(--etymology-ideographic-color)}.etymology-border-none{border-color:var(--etymology-none-color)}.etymology-semantic-default{color:var(--etymology-semantic-default-color)}.etymology-phonetic-default{color:var(--etymology-phonetic-default-color)}.etymology-bg-semantic-default{background-color:var(--etymology-semantic-default-color)}.etymology-bg-phonetic-default{background-color:var(--etymology-phonetic-default-color)}.etymology-border-semantic-default{border-color:var(--etymology-semantic-default-color)}.etymology-border-phonetic-default{border-color:var(--etymology-phonetic-default-color)}.legend-bloc-container{padding:8px;max-width:100%;box-sizing:border-box}.legend-bloc-grid{display:grid;gap:8px}.external-radical-bloc{padding:8px 10px;background-color:white;border:2px solid var(--external-radical-color);border-radius:6px;cursor:default;position:relative}.external-radical-header{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.external-radical-char{font-weight:700;font-size:16px;color:var(--external-radical-color)}.external-radical-badge{font-size:10px;color:#fff;background-color:var(--external-radical-color);padding:2px 6px;border-radius:8px;font-weight:700;white-space:nowrap}.component-radical-badge,.external-radical-badge{display:inline-block;font-size:10px;font-weight:700;color:white;background-color:var(--external-radical-color,#d9534f);padding:2px 6px;border-radius:4px;margin-left:4px;letter-spacing:.5px;text-transform:uppercase}.component-radical-badge+.component-radical-badge,.external-radical-badge+.external-radical-badge{margin-left:4px}@media (max-width:600px){.component-etymology-badge,.component-radical-badge,.external-radical-badge{font-size:9px;padding:1px 4px}}.component-bloc{padding:8px 10px;background-color:white;border:2px solid;border-radius:6px;cursor:pointer;transition:all .2s ease;transform:scale(1);position:relative}.component-bloc:hover{transform:scale(1.01)}.component-bloc.selected{transform:scale(1.02)}.component-bloc-header{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.component-char{font-weight:700;font-size:16px;min-width:0;flex-shrink:1}.component-radical-badge{font-size:10px;color:#fff;padding:2px 6px;border-radius:8px;font-weight:700;white-space:nowrap;flex-shrink:0}.component-info-container{display:flex;align-items:center;flex-wrap:wrap;gap:3px;margin-left:auto;justify-content:flex-end;flex-shrink:0}.component-stroke-count{font-size:11px;color:#666;background-color:#f0f0f0;padding:2px 5px;border-radius:8px;white-space:nowrap}.component-stroke-badge{display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:white;border-radius:50%;font-size:10px;font-weight:700}.component-meaning{margin-top:6px;width:100%;padding:6px 8px;background-color:#f8f9fa;border-radius:4px;font-size:11px;color:#666;line-height:1.3;box-sizing:border-box;text-align:left}.component-meaning.selected{background-color:rgba(255,255,255,.1)}.component-meaning-title{font-size:11px;display:block;margin-bottom:2px;text-align:left;font-weight:700}.component-meaning-text{font-size:11px;display:inline-block;text-align:left}.no-data-warning{border:1px solid #ddd;border-radius:8px;padding:16px;background-color:#fff3cd}.no-data-warning p{margin:0;color:#856404;font-size:12px}.component-etymology-badge{font-size:10px;font-weight:700;color:white;padding:2px 6px;border-radius:10px;margin-left:4px;white-space:nowrap;text-transform:uppercase}.component-etymology-badge.semantic{background-color:var(--etymology-semantic-default-color,#2196F3)}.component-etymology-badge.phonetic{background-color:var(--etymology-phonetic-default-color,#FF9800)}@media (max-width:600px){.component-etymology-badge{font-size:9px;padding:1px 4px}}.etymology-bloc-container{padding:8px;max-width:100%;box-sizing:border-box}.etymology-bloc-grid{display:grid;gap:8px}.etymology-main-bloc{padding:8px 10px;background-color:white;border:2px solid var(--etymology-color);border-radius:6px;cursor:pointer;transition:all .2s ease;transform:scale(1);position:relative}.etymology-main-bloc:hover{transform:scale(1.01)}.etymology-main-bloc.expanded{background-color:rgba(var(--etymology-color-rgb),.05)}.etymology-main-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.etymology-type-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.etymology-type-label{font-weight:700;font-size:14px;color:var(--etymology-color)}.etymology-type-badge{font-size:10px;color:#fff;padding:2px 6px;border-radius:8px;font-weight:700;white-space:nowrap}.etymology-collapse-icon{font-size:12px;color:var(--etymology-color);transition:transform .2s ease}.etymology-main-bloc.collapsed .etymology-collapse-icon{transform:rotate(-90deg)}.etymology-component-bloc{padding:8px 10px;background-color:white;border:2px solid;border-radius:6px;cursor:pointer;transition:all .2s ease;transform:scale(1)}.etymology-component-bloc:hover{transform:scale(1.01)}.etymology-component-bloc.selected{transform:scale(1.02)}.etymology-component-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.etymology-component-char{font-weight:700;font-size:16px;min-width:0;flex-shrink:1}.etymology-component-badge{font-size:10px;color:#fff;padding:2px 6px;border-radius:8px;font-weight:700;white-space:nowrap;flex-shrink:0;margin-left:auto}.etymology-description-bloc{padding:8px 10px;background-color:white;border:2px solid var(--etymology-color);border-radius:6px;position:relative}.etymology-description-header{display:flex;align-items:center;margin-bottom:6px}.etymology-description-badge{font-size:10px;color:#fff;padding:2px 6px;border-radius:8px;font-weight:700;white-space:nowrap}.etymology-description-meaning{padding:6px 8px;background-color:#f8f9fa;border-radius:4px;font-size:11px;color:#555;line-height:1.4;box-sizing:border-box;text-align:left}.etymology-description-text{font-size:11px;display:block;text-align:left;line-height:1.4}.etymology-type-tag{font-size:10px;color:#fff;padding:2px 6px;border-radius:8px;font-weight:700;white-space:nowrap}.etymology-type-tag.pictophonetic{background-color:var(--etymology-pictophonetic-color)}.etymology-type-tag.pictographic{background-color:var(--etymology-pictographic-color)}.etymology-type-tag.ideographic{background-color:var(--etymology-ideographic-color)}.etymology-type-tag.none{background-color:var(--etymology-none-color)}.etymology-component-tag{font-size:10px;color:#fff;padding:2px 6px;border-radius:8px;font-weight:700;white-space:nowrap}.etymology-component-tag.semantic{background-color:var(--etymology-semantic-default-color)}.etymology-component-tag.phonetic{background-color:var(--etymology-phonetic-default-color)}.etymology-character-bloc{display:flex;align-items:center;gap:8px;padding:8px 12px;border:2px solid;border-radius:8px}.etymology-character-bloc.semantic{border-color:var(--etymology-semantic-default-color);background-color:var(--etymology-semantic-default-light)}.etymology-character-bloc.phonetic{border-color:var(--etymology-phonetic-default-color);background-color:var(--etymology-phonetic-default-light)}.etymology-character-display{font-size:20px;font-weight:700}.etymology-character-display.semantic{color:var(--etymology-semantic-default-color)}.etymology-character-display.phonetic{color:var(--etymology-phonetic-default-color)}@media (max-width:480px){.etymology-bloc-container{padding:6px}.etymology-component-header,.etymology-main-header{gap:6px}.etymology-component-char,.etymology-type-label{font-size:14px}}.etymology-container{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;flex-wrap:wrap}.etymology-explanation{flex:1 1 250px;min-width:250px;padding:1px 16px;background-color:#f8f9fa;border-radius:8px;border:1px solid #e9ecef;text-align:left}@media (max-width:768px){.etymology-container{flex-direction:column;align-items:flex-start;gap:12px}.etymology-explanation{width:100%;margin-top:8px;min-width:unset}}.etymology-component-bloc.non-selectable{cursor:default!important;opacity:.7}.etymology-component-bloc.non-selectable:hover{transform:none!important;background-color:white!important}.etymology-component-bloc:not(.non-selectable):hover{transform:scale(1.01)}.etymology-component-bloc:not(.non-selectable).selected{transform:scale(1.02)}.pinyin-text{font-family:M PLUS Rounded\ 1c,sans-serif;font-weight:800;font-style:normal;text-transform:lowercase;font-optical-sizing:auto;font-size:12px}.etymology-component-bloc.external-radical{border-style:dashed;background-color:#fafafa!important}.etymology-component-bloc.external-radical:hover{background-color:#fafafa!important;transform:none!important}.cardText{font-size:20px}.cardText,.cardTitle{line-height:1.5;color:#374151;margin:0;text-align:left;word-wrap:break-word;overflow-wrap:break-word}.cardTitle{font-size:22px}.cardPinyinText{font-size:20px;line-height:1}.definition-bloc-container{font-family:Arial,sans-serif;width:100%;box-sizing:border-box;margin-bottom:10px}.definition-main-line{display:flex;align-items:center;gap:16px;width:100%;padding:8px 10px;background-color:#fff;border:2px solid #e9ecef;border-radius:12px}.definition-section-title{font-size:16px;font-weight:700;color:#333;flex-shrink:0}.definition-highlight-character{font-size:22px;flex-shrink:0;line-height:1}.definition-text-area{flex:1 1 auto;padding:8px 10px;background-color:#f8f9fa;border-radius:6px;border:1px solid #e9ecef;min-height:3em;display:flex;flex-direction:column;justify-content:center;text-align:left}.definition-actual-text{line-height:1.6;color:#555}.definition-actual-text,.definition-message{font-size:14px;margin:0;text-align:left;width:100%}.definition-message{font-style:italic}.definition-message.error{color:#c62828}.definition-message.no-data{color:#757575}.handwritten-strokes-bloc{display:flex;flex-direction:column;align-items:center;width:100%}.handwritten-practice-main-title{text-align:center;width:100%}.classifier-section{margin-bottom:0;padding:2px 0 2px 12px;text-align:left}.classifier-pair{display:inline-flex;flex-direction:column;align-items:center;gap:2px;margin-right:12px;margin-bottom:4px}.classifier-grid{display:flex;flex-wrap:wrap;gap:4px;align-items:flex-start}.dictionary-bloc-container{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:16px;border:1px solid #e2e8f0;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);overflow:hidden}.dictionary-bloc-header{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:white;padding:1rem;text-align:center}.dictionary-bloc-title{font-size:24px;font-weight:700;margin:0;text-shadow:0 1px 2px rgba(0,0,0,.1)}.dictionary-bloc-content{padding:1.5rem}.dictionary-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-bottom:2rem}.info-card{background:white;border-radius:12px;padding:1.25rem;border:1px solid #e5e7eb;box-shadow:0 1px 3px 0 rgba(0,0,0,.1);transition:all .2s ease-in-out}.info-card:hover{transform:translateY(-2px);box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.info-card-title{display:flex;align-items:center;gap:.5rem;font-size:16px;font-weight:600;color:#374151;margin-bottom:.75rem;border-bottom:2px solid #f3f4f6;padding-bottom:.5rem}.info-card-icon{font-size:18px}.info-item{display:flex;align-items:center;margin-bottom:.5rem;gap:.5rem}.info-label{font-size:12px;color:#6b7280;font-weight:500;min-width:80px}.info-value{font-size:14px;color:#1f2937;font-weight:500}.chinese-text{font-size:18px!important;font-weight:600!important}.pos-section{background:white;border-radius:12px;padding:1.5rem;border:1px solid #e5e7eb;box-shadow:0 1px 3px 0 rgba(0,0,0,.1)}.pos-section-title{display:flex;align-items:center;gap:.75rem;font-size:20px;font-weight:700;color:#1f2937;margin-bottom:1.5rem;border-bottom:3px solid #3b82f6;padding-bottom:.75rem}.pos-tags-grid{display:grid;gap:1rem}.pos-tag-card{background:white;border-radius:12px;border:1px solid #e5e7eb;overflow:hidden;transition:all .3s ease-in-out}.pos-tag-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px -5px rgba(0,0,0,.1)}.pos-tag-header{padding:1rem;border-bottom:1px solid #f3f4f6;background:linear-gradient(135deg,#fafbfc,#f8fafc)}.pos-tag-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:8px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.pos-tag-description{font-size:12px;color:#6b7280;font-style:italic}.pos-classifiers{font-size:11px;color:#9ca3af;margin-top:.25rem}.pos-definitions{padding:1rem;background:#fafbfc}.definitions-title{font-size:13px;font-weight:600;color:#374151;margin-bottom:.5rem;display:flex;align-items:center;gap:.25rem}.definitions-list{color:#4b5563;font-size:14px;line-height:1.5}.pos-examples{padding:1rem;background:#f8fafc;border-top:1px solid #e5e7eb}.examples-title{font-size:13px;font-weight:600;color:#374151;margin-bottom:.75rem;display:flex;align-items:center;gap:.25rem}.example-item{margin-bottom:.5rem;padding:.5rem;background:white;border-radius:6px;border-left:3px solid #3b82f6}.example-label{font-size:11px;color:#6b7280;font-weight:500;text-transform:uppercase}.example-text{font-size:14px;color:#1f2937;margin-left:.5rem}.example-text.chinese{font-size:16px;font-weight:600}.example-text.translation{font-style:italic;color:#4b5563}.sandhi-section{background:linear-gradient(135deg,#fef3c7,#fde68a);border:1px solid #f59e0b;border-radius:12px;padding:1.25rem;margin-top:1.5rem}.sandhi-title{display:flex;align-items:center;gap:.5rem;font-size:16px;font-weight:600;color:#92400e;margin-bottom:.75rem}.sandhi-explanation{color:#78350f;font-size:14px;line-height:1.6;background:rgba(255,255,255,.7);padding:.75rem;border-radius:8px}.metadata-section{background:linear-gradient(135deg,#f3f4f6,#e5e7eb);border-radius:12px;padding:1.25rem;margin-top:1.5rem;border:1px solid #d1d5db}.metadata-title{display:flex;align-items:center;gap:.5rem;font-size:16px;font-weight:600;color:#374151;margin-bottom:1rem}.metadata-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.metadata-item{display:flex;align-items:center;gap:.5rem;font-size:12px}.metadata-label{color:#6b7280;font-weight:500}.metadata-value{color:#1f2937;font-weight:600}@media (max-width:768px){.dictionary-info-grid{gap:1rem}.dictionary-info-grid,.metadata-grid{grid-template-columns:1fr}.pos-definitions,.pos-examples,.pos-tag-header{padding:.75rem}}.word-title-bloc{width:100%;overflow:visible;position:relative;z-index:0}.word-title-bloc.layout-float:after{content:"";display:table;clear:both}.word-hanzi-section{display:flex;align-items:center;overflow:visible;position:relative}.word-definition-section,.word-pinyin-section,.word-sandhi-section{text-align:justify;font-size:16px}.word-sandhi-section{display:flex;align-items:baseline;gap:.2em}.sandhi-arrow{font-size:1.5em}.sandhi-label{font-size:.9em;font-weight:500}.hanzi-container{display:flex;flex-direction:row;overflow:visible!important}.word-title-bloc.layout-float .word-hanzi-section{float:left;margin:5px 15px 5px 5px}.word-title-bloc.layout-float .word-pinyin-section,.word-title-bloc.layout-float .word-sandhi-section{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.word-title-bloc.layout-stacked .word-hanzi-section{float:none;margin-right:0;width:100%;display:flex;justify-content:flex-start}.word-title-bloc.layout-stacked .word-definition-section,.word-title-bloc.layout-stacked .word-pinyin-section,.word-title-bloc.layout-stacked .word-sandhi-section{width:100%;text-align:left;float:none}.word-title-bloc.layout-stacked .word-pinyin-section,.word-title-bloc.layout-stacked .word-sandhi-section{white-space:normal;overflow:visible;text-overflow:clip}.audio-bloc-container{margin:16px 0;padding:0}.audio-content{display:flex;flex-direction:column;gap:8px}.audio-loading{background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;color:#6c757d}.audio-error,.audio-loading{display:flex;align-items:center;gap:8px;padding:12px}.audio-error{background-color:#fee;border:1px solid #fcc;border-radius:8px;color:#d00}.error-text{color:#d00!important;flex:1}.retry-button{background-color:#fff;border-color:#d00;color:#d00}.retry-button:hover{background-color:#fee}.audio-unavailable{display:flex;align-items:center;gap:8px;padding:12px;background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;color:#6c757d}.generate-button{background-color:#fff;border-color:#6c757d;color:#6c757d}.audio-player,.generate-button:hover{background-color:#f8f9fa}.audio-player{border:1px solid #e9ecef;border-radius:12px;padding:16px;box-shadow:0 2px 4px rgba(0,0,0,.05)}.audio-controls{display:flex;align-items:center;gap:12px;margin-bottom:8px}.play-pause-button{background-color:#fff;border:1px solid #dee2e6;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.play-pause-button:hover{background-color:#e9ecef;transform:scale(1.05)}.audio-info{flex:1;display:flex;flex-direction:column;gap:4px}.word-display{display:flex;align-items:center}.audio-word{font-size:18px;font-weight:600;color:#495057}.time-display{display:flex;align-items:center}.time-text{font-size:12px;color:#6c757d;font-family:Courier New,monospace}.volume-icon{color:#6c757d;opacity:.7}.audio-progress{width:100%;height:4px;background-color:#e9ecef;border-radius:2px;overflow:hidden;position:relative}.audio-progress-bar{height:100%;background:linear-gradient(90deg,#007bff,#0056b3);border-radius:2px;transition:width .1s ease}@media (max-width:480px){.audio-controls{gap:8px}.audio-word{font-size:16px}.play-pause-button{width:36px;height:36px}.audio-player{padding:12px}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.play-pause-button:focus-visible{outline:2px solid #007bff;outline-offset:2px}.generate-button:focus-visible,.retry-button:focus-visible{outline:2px solid #007bff;outline-offset:2px}.audio-player:hover{box-shadow:0 4px 8px rgba(0,0,0,.1);transition:box-shadow .2s ease}.audio-progress:hover .audio-progress-bar{background:linear-gradient(90deg,#0056b3,#004085)}