| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; | |
| line-height: 1.6; | |
| color: #333; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| padding: 20px; | |
| } | |
| .container { | |
| max-width: 900px; | |
| margin: 0 auto; | |
| background: white; | |
| border-radius: 20px; | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); | |
| overflow: hidden; | |
| } | |
| header { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| padding: 40px; | |
| text-align: center; | |
| } | |
| header h1 { | |
| font-size: 2.5em; | |
| margin-bottom: 10px; | |
| font-weight: 700; | |
| } | |
| .subtitle { | |
| font-size: 1.2em; | |
| opacity: 0.9; | |
| } | |
| section { | |
| padding: 40px; | |
| border-bottom: 1px solid #eee; | |
| } | |
| section:last-child { | |
| border-bottom: none; | |
| } | |
| h2 { | |
| color: #667eea; | |
| margin-bottom: 20px; | |
| font-size: 1.8em; | |
| } | |
| h3 { | |
| color: #555; | |
| margin: 15px 0 10px; | |
| font-size: 1.3em; | |
| } | |
| ul, ol { | |
| margin-left: 20px; | |
| } | |
| li { | |
| margin: 10px 0; | |
| line-height: 1.8; | |
| } | |
| code { | |
| background: #f4f4f4; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| font-family: 'Courier New', monospace; | |
| font-size: 0.9em; | |
| } | |
| a { | |
| color: #667eea; | |
| text-decoration: none; | |
| font-weight: 500; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| .features ul { | |
| display: grid; | |
| gap: 15px; | |
| } | |
| .install-steps, | |
| .config-list, | |
| .usage-steps, | |
| .usage-examples, | |
| .troubleshooting-list { | |
| background: #f8f9fa; | |
| padding: 25px; | |
| border-radius: 10px; | |
| margin-top: 20px; | |
| } | |
| .install-steps ol, | |
| .usage-steps ol { | |
| margin-left: 20px; | |
| } | |
| .install-steps li, | |
| .usage-steps li { | |
| margin: 15px 0; | |
| } | |
| footer { | |
| background: #f8f9fa; | |
| padding: 30px; | |
| text-align: center; | |
| color: #666; | |
| border-top: 1px solid #eee; | |
| } | |
| footer p { | |
| margin: 5px 0; | |
| } | |
| @media (max-width: 768px) { | |
| body { | |
| padding: 10px; | |
| } | |
| header { | |
| padding: 30px 20px; | |
| } | |
| header h1 { | |
| font-size: 2em; | |
| } | |
| section { | |
| padding: 30px 20px; | |
| } | |
| } |