*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0D0D14;--dark:#1A1A28;--pink:#FF2D6A;--gold:#FFB800;--muted:#A0A0B8}
body{background:var(--bg);color:var(--muted);font-family:'Inter',sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
.header{max-width:900px;margin:0 auto;padding:24px 32px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(160,160,184,0.15)}
.logo{font-family:'Work Sans',sans-serif;font-weight:700;font-size:18px;color:var(--pink)}
nav{display:flex;gap:20px}
.nl{font-size:13px;color:rgba(160,160,184,0.5);cursor:pointer;transition:color 0.2s}
.nl.active,.nl:hover{color:#fff}
.container{max-width:900px;margin:0 auto;padding:0 32px}
.hero{text-align:center;padding:80px 0 60px}
h1{font-family:'Work Sans',sans-serif;font-weight:700;font-size:56px;color:#fff;letter-spacing:-0.03em}
.tagline{font-family:'Lora',serif;font-style:italic;font-size:16px;color:var(--muted);margin-top:8px}
.quest-card{padding:32px;margin-bottom:16px;border:1px solid rgba(160,160,184,0.1);border-radius:12px;background:var(--dark);opacity:0.4;transition:opacity 0.5s,border-color 0.3s}
.quest-card.in-view{opacity:1}
.quest-card:hover{border-color:var(--pink)}
.quest-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--pink);display:inline-block;margin-bottom:8px}
.quest-tag.gold{color:var(--gold)}
h2{font-family:'Work Sans',sans-serif;font-weight:700;font-size:24px;color:#fff;margin-bottom:8px}
.quest-meta{display:flex;gap:20px;margin-top:16px}
.xp{font-size:13px;color:var(--gold);font-weight:700}
.difficulty{font-size:13px;color:var(--muted)}
.footer{max-width:900px;margin:48px auto 0;padding:24px 32px;border-top:1px solid rgba(160,160,184,0.15);display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
@media(max-width:600px){h1{font-size:40px}}