| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); | |
| color: #e0e0e0; | |
| min-height: 100vh; | |
| } | |
| .container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 2rem 1.5rem; | |
| } | |
| header { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| header h1 { | |
| font-size: 2.5rem; | |
| color: #a78bfa; | |
| margin-bottom: 0.5rem; | |
| } | |
| .subtitle { | |
| font-size: 1.1rem; | |
| color: #94a3b8; | |
| } | |
| .hero { | |
| text-align: center; | |
| padding: 2rem; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .emoji-hero { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| color: #cbd5e1; | |
| } | |
| h2 { | |
| color: #a78bfa; | |
| margin-bottom: 1rem; | |
| font-size: 1.5rem; | |
| } | |
| .feature-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .feature-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 0.75rem; | |
| padding: 1.25rem; | |
| text-align: center; | |
| border: 1px solid rgba(167, 139, 250, 0.15); | |
| transition: transform 0.2s, border-color 0.2s; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-2px); | |
| border-color: rgba(167, 139, 250, 0.4); | |
| } | |
| .feature-icon { | |
| font-size: 2rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .feature-card h3 { | |
| color: #c4b5fd; | |
| margin-bottom: 0.4rem; | |
| font-size: 1rem; | |
| } | |
| .feature-card p { | |
| font-size: 0.85rem; | |
| color: #94a3b8; | |
| } | |
| .levels { | |
| margin-bottom: 2rem; | |
| } | |
| .level-list { | |
| list-style: none; | |
| counter-reset: level; | |
| } | |
| .level-list li { | |
| counter-increment: level; | |
| padding: 0.75rem 1rem; | |
| margin-bottom: 0.5rem; | |
| background: rgba(255, 255, 255, 0.03); | |
| border-radius: 0.5rem; | |
| border-left: 3px solid #a78bfa; | |
| } | |
| .level-list li::before { | |
| content: counter(level) ". "; | |
| color: #a78bfa; | |
| font-weight: bold; | |
| } | |
| .install { | |
| margin-bottom: 2rem; | |
| } | |
| .install p { | |
| margin-bottom: 0.75rem; | |
| color: #94a3b8; | |
| } | |
| pre { | |
| background: rgba(0, 0, 0, 0.3); | |
| border-radius: 0.5rem; | |
| padding: 1rem; | |
| overflow-x: auto; | |
| } | |
| code { | |
| color: #a78bfa; | |
| font-family: "Fira Code", "Courier New", monospace; | |
| font-size: 0.9rem; | |
| } | |
| footer { | |
| text-align: center; | |
| padding-top: 1.5rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| color: #64748b; | |
| } | |
| footer a { | |
| color: #a78bfa; | |
| text-decoration: none; | |
| } | |
| footer a:hover { | |
| text-decoration: underline; | |
| } | |