@import "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);min-height:100vh;font-family:Poppins,Noto Sans SC,Microsoft YaHei,sans-serif;line-height:1.6;transition:background .3s}.container{width:95%;max-width:1400px;margin:0 auto;padding:20px;animation:.5s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes gradientBG{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.header{text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#fffffff2 0%,#ffffffd9 100%);border:1px solid #fff3;border-radius:30px;margin:40px 0 60px;padding:40px 20px;animation:.6s slideInDown;box-shadow:0 20px 60px #00000014}.header h1{background:linear-gradient(45deg,#6c5ce7,#0984e3,#00b894) 0 0/200%;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;justify-content:center;align-items:center;gap:20px;margin-bottom:20px;font-size:3.5rem;font-weight:700;animation:3s infinite gradientBG;display:flex}.header h1 i{color:#6c5ce7;text-shadow:0 5px 15px #6c5ce74d;font-size:3.2rem;animation:3s ease-in-out infinite float}.subtitle{color:#636e72;text-align:center;max-width:800px;margin:0 auto 30px;font-size:1.4rem;font-weight:300;line-height:1.8}.feature-highlights{flex-wrap:wrap;justify-content:center;gap:20px;margin:40px 0;display:flex}.feature-item{color:#6c5ce7;cursor:default;background:linear-gradient(135deg,#6c5ce71a,#9a8cfc1a);border:1px solid #6c5ce71a;border-radius:25px;align-items:center;gap:12px;padding:12px 25px;font-size:1rem;font-weight:500;transition:all .3s;display:flex}.feature-item:hover{background:linear-gradient(135deg,#6c5ce726,#9a8cfc26);transform:translateY(-3px);box-shadow:0 10px 20px #6c5ce726}.feature-item i{background:linear-gradient(45deg,#6c5ce7,#a29bfe);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.3rem}.quick-start{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#fffffff2 0%,#ffffffd9 100%);border:1px solid #fff3;border-radius:25px;margin:40px 0;padding:40px 30px;box-shadow:0 15px 40px #0000001a}.quick-start h3{text-align:center;color:#2d3436;justify-content:center;align-items:center;gap:15px;margin-bottom:40px;font-size:2rem;display:flex}.quick-start h3 i{color:#6c5ce7;font-size:2.2rem;animation:2s ease-in-out infinite pulse}.steps{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));justify-content:center;gap:30px;display:grid}.step{text-align:center;background:#ffffffb3;border:1px solid #ffffff4d;border-radius:20px;padding:30px 20px;transition:all .3s}.step:hover{background:#ffffffe6;transform:translateY(-5px);box-shadow:0 10px 30px #0000001a}.step-number{color:#fff;background:linear-gradient(135deg,#6c5ce7,#a29bfe);border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;margin:0 auto 20px;font-size:1.8rem;font-weight:700;transition:all .3s;display:flex;box-shadow:0 8px 20px #6c5ce74d}.step:hover .step-number{animation:1.5s infinite pulse;transform:scale(1.1)}.step h4{color:#2d3436;margin-bottom:10px;font-size:1.3rem;font-weight:600}.step p{color:#636e72;font-size:.95rem;line-height:1.5}.tip-box{color:#856404;background:linear-gradient(135deg,#fff3cde6,#fff3cdb3);border-left:5px solid #ffc107;border-radius:15px;margin:40px 0;padding:25px 30px;animation:.5s slideInDown;box-shadow:0 10px 30px #ffc1071a}.tip-box h4{color:#856404;align-items:center;gap:12px;margin-bottom:15px;font-size:1.3rem;font-weight:600;display:flex}.tip-box h4 i{color:#ffc107;font-size:1.5rem}.tip-box p{color:#856404;margin-bottom:8px;font-size:1rem;line-height:1.6}.tip-box p:last-child{margin-bottom:0}.main-content{margin:60px 0;animation:.6s .2s both fadeIn}.cards-container{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));justify-content:center;gap:30px;display:grid}.card{color:inherit;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#fffffff2 0%,#ffffffd9 100%);border:1px solid #ffffff4d;border-radius:25px;flex-direction:column;height:100%;padding:35px 30px;text-decoration:none;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:flex;position:relative;overflow:hidden;box-shadow:0 20px 50px #0000001a}.card:before{content:"";z-index:1;border-radius:25px 25px 0 0;height:5px;position:absolute;top:0;left:0;right:0}.card:hover{transform:translateY(-12px)scale(1.02);box-shadow:0 30px 70px #0003}.card-icon{text-align:center;margin-bottom:25px;font-size:3.5rem;transition:all .3s;animation:4s ease-in-out infinite float}.card:hover .card-icon{animation:1s ease-in-out infinite pulse;transform:scale(1.1)}.card h2{text-align:center;background:linear-gradient(45deg,#2d3436,#636e72);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:20px;font-size:2rem;font-weight:700;transition:all .3s}.card:hover h2{background:linear-gradient(45deg,#6c5ce7,#0984e3);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.card p{color:#636e72;text-align:center;flex-grow:1;margin-bottom:25px;font-size:1.1rem;line-height:1.7;transition:all .3s}.card:hover p{color:#2d3436}.card-features{opacity:.9;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:25px;transition:all .3s;display:flex}.card:hover .card-features{opacity:1}.feature-tag{color:#6c5ce7;background:#6c5ce71a;border:1px solid #6c5ce71a;border-radius:20px;padding:8px 16px;font-size:.85rem;font-weight:500;transition:all .3s}.feature-tag:hover{transform:translateY(-2px);box-shadow:0 5px 15px #6c5ce733}.card-footer{text-align:center;margin-top:auto;transition:all .3s}.card:hover .card-footer{transform:translateY(5px)}.btn{color:#fff;cursor:pointer;z-index:1;background:linear-gradient(135deg,#6c5ce7,#a29bfe);border:none;border-radius:50px;padding:16px 45px;font-size:1.2rem;font-weight:600;text-decoration:none;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:inline-block;position:relative;overflow:hidden;box-shadow:0 10px 30px #6c5ce74d}.btn:before{content:"";z-index:-1;opacity:0;background:linear-gradient(135deg,#5a4fcf,#8b7dfb);width:100%;height:100%;transition:opacity .3s;position:absolute;top:0;left:0}.btn:hover{transform:translateY(-3px)scale(1.05);box-shadow:0 20px 40px #6c5ce766}.btn:hover:before{opacity:1}.card:hover .btn{animation:2s infinite pulse}button.btn-secondary,a.btn-secondary{color:#fff;cursor:pointer;appearance:none;vertical-align:middle;background:linear-gradient(135deg,#6c5ce7,#5a67d8);border:none;border-radius:999px;justify-content:center;align-items:center;gap:.35rem;padding:12px 22px;font-family:inherit;font-size:.95rem;font-weight:600;line-height:1.3;text-decoration:none;transition:transform .2s,box-shadow .2s,filter .2s;display:inline-flex;box-shadow:0 6px 18px #6c5ce752}button.btn-secondary:hover,a.btn-secondary:hover{filter:brightness(1.03);transform:translateY(-2px);box-shadow:0 10px 26px #6c5ce766}button.btn-secondary:active,a.btn-secondary:active{transform:translateY(0)}button.btn{appearance:none;font-family:inherit}.coming-soon{cursor:default;opacity:.9;background:linear-gradient(135deg,#00b894,#55efc4)}.coming-soon:hover{animation:none;transform:none;box-shadow:0 10px 30px #00b8944d}#word-match-card .card-icon{color:#6c5ce7}#word-match-card .feature-tag{color:#6c5ce7;background:#6c5ce71a}#word-match-card:hover{border-color:#6c5ce7}#word-match-card:hover h2{background:linear-gradient(45deg,#6c5ce7,#a29bfe);-webkit-text-fill-color:transparent;-webkit-background-clip:text}#mistake-book-card .card-icon{color:#e17055}#mistake-book-card .feature-tag{color:#e17055;background:#e170551a}#mistake-book-card:hover{border-color:#e17055}#mistake-book-card:hover h2{background:linear-gradient(45deg,#e17055,#fd79a8);-webkit-text-fill-color:transparent;-webkit-background-clip:text}#smart-review-card .card-icon{color:#0984e3}#smart-review-card .feature-tag{color:#0984e3;background:#0984e31a}#smart-review-card:hover{border-color:#0984e3}#smart-review-card:hover h2{background:linear-gradient(45deg,#0984e3,#74b9ff);-webkit-text-fill-color:transparent;-webkit-background-clip:text}#visualization-card .card-icon{color:#00b894}#visualization-card .feature-tag{color:#00b894;background:#00b8941a}#visualization-card:hover{border-color:#00b894}#visualization-card:hover h2{background:linear-gradient(45deg,#00b894,#55efc4);-webkit-text-fill-color:transparent;-webkit-background-clip:text}#coming-soon-card .card-icon{color:#fdcb6e}#coming-soon-card .feature-tag{color:#fdcb6e;background:#fdcb6e1a}#coming-soon-card:hover{border-color:#fdcb6e}#coming-soon-card:hover h2{background:linear-gradient(45deg,#fdcb6e,#ffeaa7);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.footer{text-align:center;color:#636e72;background:linear-gradient(135deg,#ffffffe6 0%,#fffc 100%);border-top:2px solid #f0f0f080;border-radius:20px;margin-top:60px;padding:40px 20px;font-size:1rem;animation:.6s .3s both fadeIn;box-shadow:0 10px 30px #0000000d}.footer p:first-child{color:#2d3436;justify-content:center;align-items:center;gap:10px;margin-bottom:10px;font-size:1.1rem;display:flex}.footer p:first-child i{color:#6c5ce7;font-size:1.2rem}.footer p:last-child{opacity:.8;font-size:.95rem;line-height:1.5}@media (width<=1200px){.container{max-width:95%}.header h1{font-size:3rem}.cards-container{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}@media (width<=768px){.container{padding:15px}.header{margin:20px 0 40px;padding:30px 20px}.header h1{flex-direction:column;gap:15px;font-size:2.5rem}.header h1 i{font-size:2.8rem}.subtitle{padding:0 10px;font-size:1.2rem}.feature-highlights{gap:12px}.feature-item{padding:10px 20px;font-size:.9rem}.quick-start{padding:30px 20px}.steps{grid-template-columns:1fr;gap:20px}.cards-container{grid-template-columns:1fr;gap:25px}.card{padding:30px 25px}.card-icon{font-size:3rem}.card h2{font-size:1.8rem}.card p{font-size:1rem}.btn{padding:14px 35px;font-size:1.1rem}}@media (width<=480px){.header h1{font-size:2.2rem}.subtitle{font-size:1.1rem}.feature-highlights{flex-direction:column;align-items:center}.feature-item{justify-content:center;width:100%;max-width:300px}.card{padding:25px 20px}.card h2{font-size:1.6rem}.feature-tag{padding:6px 12px;font-size:.8rem}.footer p:first-child{flex-direction:column;gap:5px}}@media print{.card{break-inside:avoid;box-shadow:none;border:1px solid #ddd}.btn{display:none}.feature-highlights,.quick-start,.tip-box{break-inside:avoid}}@media (prefers-color-scheme:dark){body{color:#ecf0f1;background:linear-gradient(135deg,#2c3e50 0%,#34495e 100%)}.header,.card,.quick-start,.tip-box,.footer{color:#ecf0f1;background:linear-gradient(135deg,#34495ee6 0%,#2c3e50e6 100%)}.card p,.step p,.tip-box p{color:#bdc3c7}.header h2,.card h2,.quick-start h3,.tip-box h4{color:#ecf0f1}.feature-item,.feature-tag{background:#ecf0f11a;border-color:#ecf0f133}.tip-box{color:#f1c40f;background:linear-gradient(135deg,#34495ecc,#2c3e50cc)}}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#ffffff1a;border-radius:5px}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#6c5ce7,#a29bfe);border-radius:5px;transition:all .3s}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#5a4fcf,#8b7dfb)}::selection{color:#fff;background:#6c5ce74d}.loading{text-align:center;color:#636e72;padding:40px;font-size:1.2rem}.loading i{color:#6c5ce7;margin-bottom:20px;font-size:3rem;animation:1.5s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}.mt-1{margin-top:10px}.mt-2{margin-top:20px}.mt-3{margin-top:30px}.mt-4{margin-top:40px}.mt-5{margin-top:50px}.mb-1{margin-bottom:10px}.mb-2{margin-bottom:20px}.mb-3{margin-bottom:30px}.mb-4{margin-bottom:40px}.mb-5{margin-bottom:50px}.p-1{padding:10px}.p-2{padding:20px}.p-3{padding:30px}.p-4{padding:40px}.p-5{padding:50px}.d-none{display:none}.d-block{display:block}.d-flex{display:flex}.d-grid{display:grid}.flex-column{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.align-center{align-items:center}.align-start{align-items:flex-start}.align-end{align-items:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.gap-1{gap:10px}.gap-2{gap:20px}.gap-3{gap:30px}.gap-4{gap:40px}.gap-5{gap:50px}.w-100{width:100%}.w-75{width:75%}.w-50{width:50%}.w-25{width:25%}.h-100{height:100%}.h-75{height:75%}.h-50{height:50%}.h-25{height:25%}.rounded{border-radius:10px}.rounded-lg{border-radius:20px}.rounded-circle{border-radius:50%}.shadow{box-shadow:0 5px 15px #0000001a}.shadow-lg{box-shadow:0 15px 35px #0003}.shadow-none{box-shadow:none}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}.transition{transition:all .3s}.transition-fast{transition:all .15s}.transition-slow{transition:all .5s}.spa-nav[data-v-4394da7c]{z-index:100;background:#ffffffe6;flex-wrap:wrap;justify-content:center;gap:12px;padding:16px;display:flex;position:sticky;top:0;box-shadow:0 4px 20px #0000000f}.spa-nav a[data-v-4394da7c]{color:#6c5ce7;border-radius:20px;padding:8px 14px;font-weight:500;text-decoration:none;transition:background .2s}.spa-nav a[data-v-4394da7c]:hover,.spa-nav a.router-link-active[data-v-4394da7c]{background:#6c5ce726}