:root { --bg:#0d0a1a; --panel:#171030; --text:#efeaff; --muted:#a99fd0; --accent:#7c5cff; --accent-2:#ff5cf0; --border:rgba(124,92,255,.22); }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:"Segoe UI",system-ui,sans-serif; background:var(--bg); color:var(--text); line-height:1.65; }
.nav { display:flex; justify-content:space-between; align-items:center; padding:16px 6vw; background:rgba(13,10,26,.85); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
.brand { font-weight:800; font-size:1.2em; text-decoration:none; color:var(--text); }
.brand span { color:var(--accent-2); }
.nav nav { display:flex; gap:18px; }
.nav nav a { color:var(--muted); text-decoration:none; font-weight:600; font-size:.9em; }
.nav nav a:hover { color:var(--accent-2); }
.hero { text-align:center; padding:80px 6vw 60px; background:radial-gradient(700px 400px at 50% -20%, rgba(124,92,255,.28), transparent 70%); }
.kicker { color:var(--accent-2); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.8em; }
.hero h1 { font-size:clamp(2rem,6vw,3.4rem); margin:12px 0 12px; }
.hero h1 span { background:linear-gradient(135deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { color:var(--muted); max-width:600px; margin:0 auto 22px; }
.cta-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn { display:inline-block; padding:11px 24px; border-radius:999px; text-decoration:none; font-weight:700; font-size:.92em; background:var(--panel); color:var(--text); border:1px solid var(--border); transition:.2s; }
.btn:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(124,92,255,.3); }
.btn.primary { background:linear-gradient(135deg,var(--accent),var(--accent-2)); border:none; color:#fff; }
.content { max-width:820px; margin:0 auto; padding:20px; }
.section { margin-bottom:38px; }
.section h2 { font-size:1.5em; margin-bottom:18px; border-left:4px solid var(--accent); padding-left:12px; }
.post { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:18px 20px; margin-bottom:14px; }
.post .date { color:var(--accent); font-size:.76em; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.post h3 { font-size:1.08em; margin:4px 0 6px; }
.post p { color:var(--muted); font-size:.92em; }
.chars { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
.char { text-align:center; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:18px 12px; transition:.2s; }
.char:hover { transform:translateY(-4px); }
.portrait { width:74px; height:74px; margin:0 auto 10px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2rem; }
.c1 { background:linear-gradient(135deg,#a78bfa,#7c5cff); } .c2 { background:linear-gradient(135deg,#f87171,#ef4444); }
.c3 { background:linear-gradient(135deg,#60a5fa,#2563eb); } .c4 { background:linear-gradient(135deg,#34d399,#059669); }
.char h4 { margin-bottom:4px; } .char p { color:var(--muted); font-size:.82em; }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.g { aspect-ratio:4/3; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:2.6rem; border:1px solid var(--border); }
.g1 { background:linear-gradient(135deg,#1e1b4b,#312e81); } .g2 { background:linear-gradient(135deg,#7f1d1d,#991b1b); }
.g3 { background:linear-gradient(135deg,#312e81,#701a75); } .g4 { background:linear-gradient(135deg,#0c4a6e,#155e75); }
.g5 { background:linear-gradient(135deg,#3f2d1d,#5b3a1f); } .g6 { background:linear-gradient(135deg,#7c2d12,#c2410c); }
footer { text-align:center; padding:26px; color:var(--muted); font-size:.84em; border-top:1px solid var(--border); }
@media (max-width:600px) { .nav nav { gap:10px; font-size:.82em; } .gallery { grid-template-columns:repeat(2,1fr); } }