*{margin:0;padding:0;box-sizing:border-box}@keyframes slideIn{0%{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}:root{--primary:#1890ff;--primary-dark:#096dd9;--bg-light:#f5f5f5;--bg-white:#fff;--border:#e8e8e8;--text-primary:#333;--text-secondary:#666;--text-tertiary:#999}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-light);color:var(--text-primary);line-height:1.6}.container{min-height:100vh}.header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:80px 24px;text-align:center}.title{font-size:48px;font-weight:700;margin-bottom:16px}.description{font-size:18px;opacity:.9}.main{max-width:1200px;margin:0 auto;padding:48px 24px}.section{margin-bottom:48px}.sectionTitle{font-size:24px;font-weight:600;margin-bottom:24px;display:flex;align-items:center;gap:12px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:16px;gap:16px}.card{display:flex;align-items:center;gap:16px;background:var(--bg-white);padding:20px 24px;border-radius:12px;text-decoration:none;color:var(--text-primary);transition:all .3s;box-shadow:0 2px 8px rgba(0,0,0,.04)}.card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.1)}.cardId{width:32px;height:32px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}.cardName{flex:1 1;font-size:16px;font-weight:500}.cardArrow{color:var(--primary);font-size:18px;opacity:0;transition:opacity .3s}.card:hover .cardArrow{opacity:1}.tutorial{background:var(--bg-white);border-radius:12px;padding:32px}.tutorialItem{display:flex;gap:20px;padding:16px 0;border-bottom:1px solid var(--border)}.tutorialItem:last-child{border-bottom:none}.tutorialStep{width:40px;height:40px;background:var(--primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0}.tutorialItem h3{font-size:16px;margin-bottom:4px}.tutorialItem p{font-size:14px;color:var(--text-secondary)}.tutorialItem code{background:var(--bg-light);padding:2px 6px;border-radius:4px;font-size:13px}.previewContainer{display:flex;min-height:100vh}.previewSidebar{width:240px;background:var(--bg-white);border-right:1px solid var(--border);padding:24px 0}.previewSidebarTitle{font-size:12px;color:var(--text-tertiary);text-transform:uppercase;padding:0 24px;margin-bottom:12px}.previewMenuItem{padding:12px 24px;cursor:pointer;font-size:14px;color:var(--text-secondary);text-decoration:none;display:block}.previewMenuItem:hover{background:var(--bg-light)}.previewMenuItem.active{background:rgba(24,144,255,.1);color:var(--primary)}.previewMain{flex:1 1;overflow:auto}.previewHeader{height:56px;background:var(--bg-white);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px}.previewBack{color:var(--text-secondary);text-decoration:none;font-size:14px}.previewContent{padding:24px}