Spaces:
Running
Running
| :root { | |
| --bg: #0f0a12; | |
| --card: #1a1220; | |
| --accent: #ff6b9d; | |
| --accent2: #c44dff; | |
| --text: #f5e6ff; | |
| --muted: #b8a0c8; | |
| --border: #3a2a45; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 2rem 1rem; | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| background: linear-gradient(160deg, #0f0a12 0%, #1a0f24 50%, #120a18 100%); | |
| color: var(--text); | |
| min-height: 100vh; | |
| line-height: 1.6; | |
| } | |
| .container { | |
| max-width: 720px; | |
| margin: 0 auto; | |
| } | |
| header { | |
| text-align: center; | |
| margin-bottom: 2.5rem; | |
| } | |
| h1 { | |
| font-size: 2.4rem; | |
| font-weight: 700; | |
| margin: 0 0 0.4rem; | |
| background: linear-gradient(90deg, var(--accent), var(--accent2)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .subtitle { | |
| color: var(--muted); | |
| font-size: 1.05rem; | |
| margin: 0; | |
| } | |
| .card { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 1.5rem 1.6rem; | |
| margin-bottom: 1.25rem; | |
| box-shadow: 0 8px 24px rgba(0,0,0,0.35); | |
| } | |
| h2 { | |
| font-size: 1.15rem; | |
| margin: 0 0 0.85rem; | |
| color: var(--accent); | |
| font-weight: 600; | |
| } | |
| p, li { | |
| color: var(--muted); | |
| font-size: 0.95rem; | |
| } | |
| ul { | |
| padding-left: 1.2rem; | |
| margin: 0.6rem 0; | |
| } | |
| a { | |
| color: var(--accent); | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| .buttons { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.75rem; | |
| margin: 1rem 0; | |
| } | |
| .btn { | |
| display: inline-block; | |
| padding: 0.65rem 1.2rem; | |
| background: linear-gradient(90deg, var(--accent), #ff8fb3); | |
| color: #1a0a12 ; | |
| font-weight: 600; | |
| border-radius: 10px; | |
| text-decoration: none ; | |
| transition: transform 0.15s, box-shadow 0.15s; | |
| } | |
| .btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 18px rgba(255, 107, 157, 0.4); | |
| } | |
| .btn.secondary { | |
| background: linear-gradient(90deg, #8b5cf6, var(--accent2)); | |
| color: white ; | |
| } | |
| .prompt { | |
| background: #120c18; | |
| border-left: 3px solid var(--accent); | |
| padding: 0.7rem 1rem; | |
| margin: 0.6rem 0; | |
| border-radius: 0 8px 8px 0; | |
| font-family: ui-monospace, monospace; | |
| font-size: 0.88rem; | |
| color: #e0c8f0; | |
| } | |
| .note { | |
| font-size: 0.85rem; | |
| opacity: 0.85; | |
| margin-top: 0.8rem; | |
| } | |
| footer { | |
| text-align: center; | |
| margin-top: 2.5rem; | |
| padding-top: 1.5rem; | |
| border-top: 1px solid var(--border); | |
| color: var(--muted); | |
| font-size: 0.85rem; | |
| } | |
| @media (max-width: 500px) { | |
| h1 { font-size: 1.9rem; } | |
| .buttons { flex-direction: column; } | |
| .btn { text-align: center; } | |
| } | |