* {margin:0;padding:0;box-sizing:border-box;}
.typewriter-container{--background:0 0% 100%;--foreground:217 33% 17%;--brand-primary:243 75% 59%;--brand-primary-foreground:0 0% 100%;--card:0 0% 100%;--card-foreground:217 33% 17%;--card-border:220 13% 91%;--muted:220 14% 96%;--muted-foreground:215 16% 47%;--border:220 13% 91%;--shadow-elegant:0 10px 30px -10px rgb(77 83 232 / 0.15);--shadow-glow:0 10px 30px -10px rgb(77 83 232 / 0.3), 0 0 40px rgb(77 83 232 / 0.1);--gradient-brand:linear-gradient(135deg, hsl(243 75% 59%), hsl(243 75% 65%));--gradient-noise:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0deg;--tw-skew-x:0deg;--tw-skew-y:0deg;--tw-scale-x:1;--tw-scale-y:1;--primary:243 75% 59%;--primary-foreground:0 0% 100%;--secondary:0 0% 100%;--secondary-foreground:217 33% 17%;--secondary-border:220 13% 91%;--accent:220 14% 96%;--accent-foreground:217 33% 17%;--hover:243 75% 65%;--destructive:0 84% 60%;--destructive-foreground:0 0% 100%;--input:0 0% 100%;--input-border:220 13% 91%;--ring:243 75% 59%;--shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-card:0 4px 24px 0 rgb(0 0 0 / 0.1);--gradient-glow:linear-gradient(90deg, transparent, hsl(243 75% 59% / 0.3), transparent);--transition-smooth:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);--transition-spring:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);--radius:0.75rem;color:hsl(var(--foreground));line-height:1.5;--tw-gradient-from:hsl(var(--background));--tw-gradient-stops:var(--tw-gradient-from), hsl(var(--muted) / 0.2), var(--tw-gradient-to, transparent);--tw-gradient-to:hsl(var(--background));box-sizing:border-box;margin:0;align-items:center;position:relative;max-height:30vh;margin-bottom:2rem;background-color:hsl(var(--card) / 0.8);border-width:1px;border-color:hsl(var(--card-border));border-radius:0.75rem;box-shadow:var(--shadow-elegant);transition:all;transition-duration:300ms;backdrop-filter:blur(4px);outline:2px solid #e5e7eb;outline-offset:2px;padding:1rem;min-width:810px;max-width:810px;overflow-y:scroll;}
.copy-button {position:sticky;bottom:10px;float:right;background-color:#4d53e8;color:white;border:none;border-radius:20px;padding:6px 12px;display:flex;align-items:center;gap:6px;cursor:pointer;font-size:14px;box-shadow:0 2px 5px rgba(0,0,0,0.2);transition:all 0.3s ease;z-index:10;}.copy-button:hover {background-color:#3b41d1;transform:translateY(-2px);}.copy-button i {font-size:16px;}.copy-button.copied {background-color:#2ecc71;}
.typewriter-text{--background:0 0% 100%;--foreground:217 33% 17%;--brand-primary:243 75% 59%;--brand-primary-foreground:0 0% 100%;--card:0 0% 100%;--card-foreground:217 33% 17%;--card-border:220 13% 91%;--muted:220 14% 96%;--muted-foreground:215 16% 47%;--border:220 13% 91%;--shadow-elegant:0 10px 30px -10px rgb(77 83 232 / 0.15);--shadow-glow:0 10px 30px -10px rgb(77 83 232 / 0.3), 0 0 40px rgb(77 83 232 / 0.1);--gradient-brand:linear-gradient(135deg, hsl(243 75% 59%), hsl(243 75% 65%));--gradient-noise:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0deg;--tw-skew-x:0deg;--tw-skew-y:0deg;--tw-scale-x:1;--tw-scale-y:1;--primary:243 75% 59%;--primary-foreground:0 0% 100%;--secondary:0 0% 100%;--secondary-foreground:217 33% 17%;--secondary-border:220 13% 91%;--accent:220 14% 96%;--accent-foreground:217 33% 17%;--hover:243 75% 65%;--destructive:0 84% 60%;--destructive-foreground:0 0% 100%;--input:0 0% 100%;--input-border:220 13% 91%;--ring:243 75% 59%;--shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-card:0 4px 24px 0 rgb(0 0 0 / 0.1);--gradient-glow:linear-gradient(90deg, transparent, hsl(243 75% 59% / 0.3), transparent);--transition-smooth:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);--transition-spring:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);--radius:0.75rem;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;--tw-gradient-from:hsl(var(--background));--tw-gradient-stops:var(--tw-gradient-from), hsl(var(--muted) / 0.2), var(--tw-gradient-to, transparent);--tw-gradient-to:hsl(var(--background));box-sizing:border-box;margin:0;padding:0;font-size:1rem;line-height:1.625;color:hsl(var(--muted-foreground));white-space:nowrap;transform:translateX(-54px);}
body {font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;font-weight:400;line-height:1.6;color:#262626;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}h1 {font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;font-weight:700;font-size:3rem;line-height:1.2;}
h2 {font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;font-weight:600;font-size:2.5rem;line-height:1.3;}h3 {font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;font-weight:500;font-size:1.25rem;line-height:1.5;}h4, h5, h6 {font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;font-weight:600;}p {font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;font-weight:400;line-height:1.6;}
/* Main 内容区域样式 */
.main-content {width:100%;margin-top:72px;}
.pixel-background{position:absolute !important;top:0;left:0;right:0;bottom:0 !important;width:100%;height:100% !important;pointer-events:none;z-index:1 !important;}.grid-pattern{width:100%;height:100%;opacity:0.4;background-image:linear-gradient(rgba(0,0,0,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.03) 1px,transparent 1px);background-size:24px 24px}.noise-texture{position:absolute;inset:0;opacity:0.2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");background-size:256px 256px}.pixel-decoration{position:absolute;background:rgba(77,83,232,0.1);border-radius:2px;animation:pixel-bounce 2s ease-in-out infinite alternate}.pixel-1{top:5rem;left:2.5rem;width:2rem;height:2rem;animation-delay:0s}.pixel-2{top:8rem;right:5rem;width:1.5rem;height:1.5rem;animation-delay:1s}.pixel-3{bottom:10rem;left:25%;width:1rem;height:1rem;animation-delay:2s}.pixel-4{bottom:15rem;right:33%;width:1.25rem;height:1.25rem;animation-delay:0.5s}@keyframes pixel-bounce{0%{transform:translateY(0px)}100%{transform:translateY(-10px)}}.hero-content{padding:5rem 0 3rem;text-align:center;position:relative;z-index:10}.hero-content h1{font-size:3rem;font-weight:bold;margin-bottom:1.5rem;line-height:1.2;color:#262626}.hero-content h3{font-size:1.25rem;color:#666666;margin-bottom:3rem;font-weight:500}.preview-gallery{padding:0 1.5rem 5rem;position:relative;z-index:10}.gallery-card:hover{box-shadow:0 20px 40px rgba(0,0,0,0.15);border-color:rgba(77,83,232,0.5)}.gallery-navigation{display:flex;justify-content:center;margin-bottom:2rem}.nav-tabs{position:relative;background:#f5f5f5;border-radius:0.5rem;padding:0.25rem}.nav-indicator{position:absolute;top:0.25rem;bottom:0.25rem;background:white;box-shadow:0 1px 2px rgba(0,0,0,0.05);border-radius:0.375rem;transition:all 0.3s ease-out;width:calc(50% - 4px);left:2px}.nav-indicator.active-1{transform:translateX(100%)}.nav-tab{position:relative;z-index:10;padding:0.75rem 2rem;border-radius:0.375rem;font-size:0.875rem;font-weight:500;transition:all 0.2s ease;min-width:140px;background:none;border:none;cursor:pointer;color:#262626}.nav-tab.active{color:#262626}.nav-tab:not(.active):hover{color:#4d53e8;transform:translateY(-1px)}
.container{width:-webkit-fill-available;max-width:1200px;margin:0 auto;padding:0 1.5rem;position:relative;z-index:10;height:100%;display:flex;align-items:center;justify-content:center;gap:10px}.shiny-wrapper{position:relative;display:flex;justify-content:center;align-items:center;width:100%}.shiny-wrapper .shiny-shadow {aspect-ratio: 1.5 / 1;background-image: url(https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/static/image/normal.2aae77c3.png);background-size: 100% 100%;bottom: 0;left: 50%;position: absolute;transform: translateX(-50%) translateY(50%);width: 200px;}.final-shadow {left: 50% !important;}
.container-vertical-center {max-width:1200px!important;margin:0 auto;padding:0 1.5rem;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:30vh;}
.container-vertical-article{margin:0 auto;padding:1.5rem 1.5rem;display:flex;flex-direction:column;justify-content:start;align-items:center;overflow-y:visible;height:auto;}
.mdbox {max-width:810px!important;margin:0 auto;border-radius:15px;border-width:1.5px;border-style:solid;border-color:#dcdcf8;margin-bottom:20px;overflow-y:hidden;max-height:120vh;display:flex;flex-direction:column;padding:24px 24px}
/* Hero Section - 首屏关键样式 */
.hero-section {min-height:auto;background:white;display:flex;flex-direction:column;position:relative;overflow:auto;padding:40px 0;}
.hero-content {padding:5rem 0 3rem;text-align:center;position:relative;z-index:10;}
.hero-content h1 {font-size:3rem;font-weight:bold;margin-bottom:1.5rem;line-height:1.2;color:#3f3f3f;}
.hero-content h3 {font-size:1.25rem;color:#666666;margin-bottom:3rem;font-weight:500;}
.keyword {color:#5d43f5;}
.section-header{text-align:center;margin-bottom:4rem;}.section-header h2{font-size:2.5rem;font-weight:bold;color:#262626;margin-bottom:1rem}.section-header p{text-align:justify;font-size:0.9rem}.section-header ol{text-align:justify;font-size:0.9rem}
/* 关键按钮样式 */
.shiny-button {align-items:center;background-color:#212635;border:3px solid transparent;border-radius:10px;box-shadow:0 4px 16px 0 rgba(0, 0, 0, 0.14);color:#fff;display:flex;font-size:22px;font-weight:400;height:60px;justify-content:center;line-height:32px;overflow:hidden;position:relative;width:180px;z-index:1;text-decoration:none;}
.shiny-wrapper {position:relative;display:inline-block;justify-items:center;align-items:center;}
.align-flex-start {justify-content:flex-start !important;}
/* 画廊布局样式 */
.banner-container {display:flex;width:100%;max-width:1200px !important;margin:0 !important; 
padding:20px 0;gap:60px;align-items:center;min-height:auto !important; 
}
/* 左侧文本区域 */
.text-section {flex:1;color:rgb(59, 59, 59);padding:40px;justify-items:center;align-items:center;letter-spacing:0.5cap;}
.text-section h1 {text-align:center;font-size:3rem;font-weight:bold;margin-bottom:1.5rem;line-height:1.2;color:#262626;}
.text-section h3 {text-align:center;font-size:1.25rem;color:#666666;margin-bottom:3rem;font-weight:500;}
@keyframes pointAnimation {0%, 100% { transform:translateX(0); }
50% { transform:translateX(10px); }}
/* 底部按钮 */
.action-button {position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg, #4d53e8 0%, #5f5cf6 100%);color:white;padding:12px 32px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:
0 4px 12px rgba(99, 102, 241, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.1);z-index:15;overflow:hidden;}
.action-button::before {content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);transition:left 0.5s ease;}
.action-button:hover::before {left:100%;}
.action-button:hover {transform:translateX(-50%) translateY(-2px);box-shadow:
0 8px 20px rgba(99, 102, 241, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.2);}
.nav-link{text-decoration:none;color:inherit;transition:color 0.3s ease}
.nav-link:hover{color:#4772ff}
.features-section{padding:5rem 4rem;background:#ffffff;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap;}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.feature-item{text-align:center}.feature-icon{width:4rem;height:4rem;background:rgba(77,83,232,0.05);border-radius:1rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem}.feature-icon .icon,.feature-icon i {width:2rem;height:2rem;color:#4d53e8;font-size:1.6rem; display:flex;align-items:center;justify-content:center;line-height:1;}.feature-title{font-size:1.25rem;font-weight:600;color:#262626;margin-bottom:0.75rem}.feature-description{color:#666666;line-height:1.5}
/* 响应式设计更新 */
@media (max-width:1024px) {.hero-section {min-height:auto !important;height:auto; /* 允许内容撑开 */}
.banner-container {flex-direction:column;gap:30px;/* 减少gap避免溢出 */
padding:15px 0;/* 减少padding */
max-width:100% !important;}
.text-section {text-align:center;padding:15px 0;/* 减少padding */}
.text-section h1 {font-size:2.5rem;}
.gallery-container {max-width:100vh;}}
@media (max-width:768px) {.hero-section {height:auto; /* 小屏幕允许滚动 */
min-height:100vh;}
.container {padding:0 1rem;align-items:flex-start;/* 顶部对齐，避免居中导致的溢出 */
padding-top:20px;}
.text-section h1 {font-size:2rem;}
.text-section h3 {font-size:1rem;}}
@media (max-width:480px) {.banner-container {padding:10px;}
.text-section h1 {font-size:1.8rem;}
.action-button {padding:12px 30px;font-size:14px;}}
/* 动画效果 */
@keyframes fadeInLeft {from {opacity:0;transform:translateX(-50px);}
to {opacity:1;transform:translateX(0);}}
@keyframes fadeInRight {from {opacity:0;transform:translateX(50px);}
to {opacity:1;transform:translateX(0);}}
/* 响应式 - 移动端关键样式 */
@media (max-width:768px) {.hero-content h1 {font-size:2rem;}
.hero-content h3 {font-size:1rem;}
.align-flex-start {justify-content:center !important;}
.shiny-button {font-size:16px;height:44px;width:132px;}}

/* 进度条容器 */
.step-progress-container {position:relative;}
.step-item {position:relative;padding-left:25px; /* 为进度条和数字留出空间 */
margin-bottom:1rem;cursor:pointer;}
.step-progress-line {position:absolute;left:0;top:0;bottom:0;width:5px;background-color:#e5e7eb; /* 默认灰色 */
transition:background-color 0.4s ease;z-index:1;}
.step-header {display:flex;align-items:center;padding:0.5rem 0;position:relative;z-index:2;}
.step-title {font-weight:600;font-size:1.125rem;color:#262626;}
.step-content {max-height:0;overflow:hidden;transition:max-height 0.3s ease;}
.step-content p {padding:0.5rem 0 1rem;margin:0;color:#666666;line-height:1.7;font-weight:500;}
.step-content ul{list-style-type:disc; /* 显示圆点符号 */
padding:0 0 0.5rem 20px; /* 调整内边距，为圆点留出空间 */
margin:0;color:#666666;line-height:1.7;font-weight:500;}
.step-content ul li {margin-bottom:0.5rem; /* 增加列表项之间的间距 */}.step-item.active .step-content {max-height:200px; /* JS会覆盖此值 */
}
/* 动态进度动画 */
@keyframes progressFill {from {height:0%;}
to {height:100%;}}.step-item.active .step-progress-line {animation:progressFill 0.4s ease-out forwards;}
/* 悬停效果 */
.step-item:hover .step-progress-line {background:linear-gradient(to bottom, 
rgba(77, 83, 232, 0.5) 0%, 
rgba(95, 92, 246, 0.5) 100%);}
.interactive-steps {list-style:none;padding:0;margin:2rem 0;max-width:800px;}
.step-item {margin-bottom:1rem;transition:all 0.3s ease;}
.step-header {display:flex;align-items:center;padding:1rem 0;cursor:pointer;transition:color 0.2s ease;}
.step-header:hover {color:#4d53e8;}
.step-title {font-weight:600;font-size:1.125rem;color:#262626;flex:1;}
.step-icon {color:#4d53e8;transition:transform 0.3s ease;margin-left:1rem;}
.step-item.active .step-content {max-height:200px;}
.step-item.active .step-icon {transform:rotate(180deg);}
@media (max-width:768px) {.step-progress-container {padding-left:25px;}
.step-progress-line {left:12px;}
.step-header {padding:0.75rem 0;}
.step-title {font-size:1rem;}
.step-content {margin-left:38px;}
}