:root { --night:#0b0e2a; --panel:#161a44; --line:#2a3070; --gold:#d6a92e; --red:#d0283e;
        --sky:#6fd0ec; --ink:#eef0fb; --dim:#a9aed6; }
* { box-sizing:border-box; }
body { margin:0; background:var(--night); color:var(--ink);
       font:17px/1.55 "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color:var(--sky); }
.top { display:flex; align-items:center; gap:12px; padding:10px 16px; background:#070920;
       border-bottom:3px solid var(--red); flex-wrap:wrap; }
.top .home { display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; }
.top img { width:42px; height:42px; background:#fff; border-radius:6px; }
.top b { font-weight:800; letter-spacing:.12em; }
.top nav { margin-left:auto; display:flex; gap:8px; }
.jump { display:inline-block; color:#fff; text-decoration:none; font-weight:800; letter-spacing:.12em;
        font-size:14px; padding:8px 14px; border:2px solid var(--gold); border-radius:6px; }
.jump:hover, .jump.on { background:var(--gold); color:#0b0e2a; }
.banner { position:relative; }
.banner img { display:block; width:100%; height:auto; max-height:640px; object-fit:cover; object-position:left center; }
.banner .jumps { position:absolute; left:4%; bottom:7%; display:flex; gap:14px; flex-wrap:wrap; }
.banner .jumps a { background:rgba(11,14,42,.85); color:#fff; text-decoration:none; font-weight:900;
        letter-spacing:.14em; font-size:clamp(14px,1.8vw,22px); padding:.7em 1.3em; border:3px solid var(--gold);
        border-radius:8px; }
.banner .jumps a:hover { background:var(--gold); color:#0b0e2a; }
.wrap { max-width:1180px; margin:0 auto; padding:10px 16px 50px; }
.mantra { display:flex; gap:22px; align-items:center; padding-top:26px; }
.mantra svg { flex:0 0 92px; }
.mantra p { margin:0; font-size:19px; }
.mantra q { color:var(--gold); font-weight:800; }
h1 { font-weight:900; letter-spacing:.08em; font-size:30px; margin:22px 0 4px; }
h1 small { display:block; font-size:14px; letter-spacing:.2em; color:var(--gold); }
h2 { font-weight:900; letter-spacing:.1em; font-size:22px; color:var(--gold); margin:34px 0 8px; }
.rule { width:120px; height:4px; background:var(--red); margin:8px 0 22px; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { margin:0; background:var(--panel); border:1px solid var(--line); border-top:4px solid var(--sky);
        border-radius:8px; overflow:hidden; display:flex; flex-direction:column; }
.card img { display:block; width:100%; height:auto; }
.card .noimg { aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
               background:linear-gradient(160deg,#1c2259,#10133a); }
.card figcaption, .card .body { padding:10px 12px 14px; flex:1; display:flex; flex-direction:column; }
.card b { display:block; color:var(--gold); font-size:16px; margin-bottom:3px; }
.card span, .card p { color:var(--dim); font-size:15px; line-height:1.45; margin:0; }
.card .acts { margin-top:auto; padding-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.card .acts a { font-weight:800; letter-spacing:.1em; font-size:13px; text-decoration:none; padding:7px 12px;
                border-radius:6px; border:2px solid var(--sky); color:var(--sky); }
.card .acts a.buy { background:var(--red); border-color:var(--red); color:#fff; }
.card .addon { margin-top:8px; font-size:14px; }
.order { grid-column:span 2; background:linear-gradient(160deg,#1c2259,#10133a); border:2px solid var(--gold);
         border-radius:10px; padding:26px 24px; display:flex; flex-direction:column; justify-content:center;
         align-items:center; text-align:center; gap:14px; }
.order h2 { margin:0; color:var(--ink); }
.order p { margin:0; color:var(--dim); max-width:420px; }
.order .addr { color:var(--ink); font-weight:700; letter-spacing:.04em; user-select:all; }
.btn { display:inline-block; background:var(--red); color:#fff; text-decoration:none; font-weight:900;
       letter-spacing:.14em; font-size:20px; padding:16px 34px; border-radius:8px; box-shadow:0 4px 0 #7d1322; }
.btn:hover { background:#e23149; }
.about { max-width:820px; }
.about p { margin:0 0 14px; }
.about strong { color:var(--gold); }
.about .photo { float:right; width:260px; margin:6px 0 16px 22px; border:3px solid var(--gold); border-radius:8px; }
.post-list { list-style:none; padding:0; margin:0; }
.post-list li { background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--gold);
                border-radius:8px; padding:16px 18px; margin:0 0 16px; }
.post-list a.t { color:var(--ink); font-weight:800; font-size:20px; text-decoration:none; }
.post-list a.t:hover { color:var(--gold); }
.date { color:var(--gold); font-size:14px; letter-spacing:.08em; font-weight:700; }
.post { max-width:780px; }
.post p { margin:0 0 14px; font-size:18px; }
.replies { margin-top:30px; }
.reply { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin:0 0 12px; }
.reply .who { color:var(--gold); font-weight:700; font-size:15px; }
.post .by { color:var(--gold); font-weight:700; margin:-6px 0 16px; }
.post .answered { background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--gold);
                  border-radius:8px; padding:14px 16px; margin:18px 0 0; }
.post .answered .who { color:var(--gold); font-weight:700; font-size:15px; }
.blog-head { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.blog-head .btn { margin-left:auto; }
.ask-box { display:none; }
.ask-box:target { display:block; }
.newsletter a { color:#1b4fa0; }
.invite { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:26px 0 0; }
.invite .inv { display:block; background:var(--panel); border:1px solid var(--line); border-top:4px solid var(--gold);
  border-radius:8px; padding:14px 16px; color:var(--ink); text-decoration:none; }
.invite .inv:hover { border-color:var(--gold); }
.invite .inv img { width:100%; height:auto; border-radius:6px; margin-bottom:8px; }
.invite .inv b { display:block; color:var(--gold); letter-spacing:.06em; }
.invite .inv span { display:block; color:var(--dim); font-size:15px; margin-top:4px; }
@media (max-width:640px) { .invite { grid-template-columns:1fr; } }
.blog-form { text-align:left; }
.blog-form p { text-align:center; }
.blog-form label { display:block; color:var(--dim); font-weight:700; font-size:14px; margin:0 0 12px; }
.blog-form input, .blog-form textarea, .blog-form select { display:block; width:100%; box-sizing:border-box; margin-top:4px; padding:10px;
  font:inherit; font-size:17px; border-radius:6px; border:1px solid var(--line); background:#fff; color:#111; }
.blog-form .two { display:flex; gap:14px; flex-wrap:wrap; }
.blog-form .two label { flex:1 1 200px; }
.blog-form .btn { display:block; margin:6px auto 0; border:0; cursor:pointer; font-size:17px; }
.blog-form .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.reply .answer { margin:12px 0 0 22px; padding:10px 0 0 14px; border-left:3px solid var(--gold); }
.write { margin-top:26px; background:linear-gradient(160deg,#1c2259,#10133a); border:2px solid var(--gold);
         border-radius:10px; padding:22px; text-align:center; }
.write p { color:var(--dim); margin:0 0 14px; }
footer { text-align:center; color:var(--dim); font-size:14px; padding:20px 16px 30px; border-top:1px solid var(--line); }
@media (max-width:980px) { .grid { grid-template-columns:repeat(2,1fr); } .grid3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .grid, .grid3 { grid-template-columns:1fr; } .order { grid-column:auto; }
  .mantra { flex-direction:column; text-align:center; } .top nav { margin-left:0; width:100%; }
  .about .photo { float:none; display:block; margin:0 auto 16px; } }