:root{--primary-green:#E8F5E9;--secondary-green:#C8E6C9;--accent-green:#81C784;--dark-text:#2E4C3C;--light-text:#4A7662;--card-bg:#FFFFFF;--shadow:rgba(46, 76, 60, 0.1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:'PingFang SC','Microsoft YaHei',sans-serif;line-height:1.6;color:var(--dark-text);background-color:var(--primary-green);background-image:radial-gradient(var(--accent-green) 1px,transparent 1px);background-size:20px 20px;padding:15px;overflow-x:hidden}.container{max-width:1200px;margin:0 auto;padding:0 10px}header{text-align:center;padding:20px 15px;margin-bottom:20px;background-color:var(--card-bg);border-radius:16px;box-shadow:0 4px 12px var(--shadow);position:relative;overflow:hidden}header::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--accent-green),var(--secondary-green))}h1{color:var(--dark-text);font-size:1.8rem;margin-bottom:10px}.subtitle{color:var(--light-text);font-size:1rem;max-width:100%;margin:0 auto}.nav-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px;background-color:var(--card-bg);padding:12px;border-radius:16px;box-shadow:0 4px 12px var(--shadow)}.tab-button{padding:10px 16px;background-color:var(--secondary-green);border:none;border-radius:50px;color:var(--dark-text);font-weight:700;cursor:pointer;transition:all .3s ease;font-size:.9rem}.tab-button:hover{background-color:var(--accent-green);transform:translateY(-2px)}.tab-button.active{background-color:var(--accent-green);box-shadow:0 4px 8px var(--shadow)}.tab-button.loading{position:relative;color:transparent}.tab-button.loading::after{content:"";position:absolute;width:16px;height:16px;top:50%;left:50%;margin-left:-8px;margin-top:-8px;border:2px solid transparent;border-top-color:var(--dark-text);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.tab-content{display:none;background-color:var(--card-bg);padding:20px;border-radius:16px;box-shadow:0 4px 12px var(--shadow);margin-bottom:20px;width:100%;overflow-x:auto;min-height:200px}.tab-content.active{display:block;animation:fadeIn .5s ease}.tab-content.loading{display:flex;justify-content:center;align-items:center}.loading-spinner{width:40px;height:40px;border:4px solid var(--secondary-green);border-top:4px solid var(--accent-green);border-radius:50%;animation:spin 1s linear infinite}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}h2{color:var(--dark-text);border-bottom:2px solid var(--accent-green);padding-bottom:8px;margin-bottom:15px;font-size:1.5rem}h3{color:var(--light-text);margin:20px 0 12px;font-size:1.2rem}h4{color:var(--light-text);margin:15px 0 8px;font-size:1rem}.table-container{overflow-x:auto;margin:15px 0;border-radius:10px;box-shadow:0 2px 8px var(--shadow);width:100%}table{width:100%;border-collapse:collapse;min-width:600px;font-family:Arial,sans-serif}td,th{padding:10px 12px;text-align:left;border-bottom:1px solid var(--secondary-green);font-size:.9rem;font-family:Arial,sans-serif}th{background-color:var(--secondary-green);color:var(--dark-text);font-weight:700}tr:last-child td{border-bottom:none}tr:hover{background-color:rgba(200,230,201,.3)}.rule-card{background-color:var(--primary-green);border-left:4px solid var(--accent-green);padding:15px;margin:15px 0;border-radius:0 8px 8px 0;font-size:.9rem}.rule-card h4{margin-top:0;color:var(--dark-text)}.example-words-container{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;font-family:Arial,sans-serif}.example-word{display:inline-block;background-color:var(--secondary-green);padding:4px 10px;border-radius:20px;font-size:.85rem;white-space:nowrap;flex-shrink:0;font-family:Arial,sans-serif}.syllable-example-words{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;font-family:Arial,sans-serif}.syllable-example-word{display:inline-block;background-color:var(--secondary-green);padding:4px 10px;border-radius:20px;font-size:.85rem;white-space:nowrap;flex-shrink:0;font-family:Arial,sans-serif}.letter,.phonetic{font-family:Arial,sans-serif}table .letter,table .phonetic{font-family:Arial,sans-serif}.tip-box{background-color:#e1f5fe;border-left:4px solid #4fc3f7;padding:15px;margin:15px 0;border-radius:0 8px 8px 0;font-size:.9rem}@media (max-width:768px){body{padding:10px}header{padding:15px 10px}h1{font-size:1.5rem}.subtitle{font-size:.9rem}.tab-button{padding:8px 14px;font-size:.85rem}.tab-content{padding:15px 10px}h2{font-size:1.3rem}h3{font-size:1.1rem}td,th{padding:8px 10px}.table-container{border-radius:8px}table{min-width:500px}.example-words-container{gap:4px}.example-word{font-size:.8rem;padding:3px 8px}}@media (max-width:480px){h1{font-size:1.3rem}.tab-button{width:100%;margin-bottom:6px}.nav-tabs{flex-direction:column}table{min-width:400px}.example-words-container{gap:3px}.example-word{font-size:.75rem;padding:2px 6px}}footer{text-align:center;padding:15px;color:var(--light-text);font-size:.8rem;margin-top:20px}.syllable-example{font-family:monospace;font-size:1rem;padding:8px;background-color:var(--primary-green);border-radius:5px;margin:8px 0;text-align:center}.syllable-part{display:inline-block;padding:4px 8px;margin:0 2px;background-color:var(--secondary-green);border-radius:4px;font-family:Arial,sans-serif}.syllable-type{display:inline-block;padding:2px 6px;margin:0 4px;border-radius:3px;font-size:.7rem;font-weight:700;font-family:Arial,sans-serif}.open-syllable{background-color:#c8e6c9;color:#2e4c3c}.closed-syllable{background-color:#ffcdd2;color:#b71c1c}.magic-e-syllable{background-color:#bbdefb;color:#0d47a1}.syllable-structure{display:flex;justify-content:center;margin:12px 0}.structure-part{padding:6px 10px;margin:0 2px;background-color:var(--secondary-green);border-radius:4px;text-align:center;font-family:Arial,sans-serif}.structure-label{font-size:.7rem;color:var(--light-text);margin-top:4px;font-family:Arial,sans-serif}.vc-definition{background-color:var(--primary-green);padding:12px;border-radius:8px;margin:12px 0}.vc-definition h4{margin-top:0}.vc-item{display:flex;align-items:flex-start;margin-bottom:8px}.vc-label{font-weight:700;min-width:80px;padding-right:8px}.vc-content{flex:1}