:root{ --bg:#0f1117; --fg:#f7f8ff; --muted:#bfc6ff; --bd:#252a40;
  --p1:#d85b7a; --p1bg:#f4dce5; --p2:#c06a2b; --p2bg:#f6e3c8; --p3:#e4c05a; --p3bg:#1f2748; }
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial;background:linear-gradient(180deg,#0f1117,#111426);color:var(--fg)}
.topbar{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--bd);background:#0f1117d0;backdrop-filter:blur(8px);z-index:2}
.brand{font-weight:900;cursor:pointer}
main{padding:16px;max-width:1100px;margin:0 auto}
h1{font-size:22px;margin:12px 0 8px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:#141a33;border:1px solid var(--bd);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.3);cursor:pointer;transition:transform .15s ease}
.card:hover{transform:translateY(-2px)}
.card img{width:100%;display:block}
.card h2{margin:10px 12px}
.card .muted{margin:0 12px 12px}
.muted{color:var(--muted)}
.hidden{display:none}
.scene{display:grid;grid-template-columns:1fr;gap:12px;max-width:880px;margin:20px auto}
.scene img{width:100%;border-radius:12px;border:1px solid var(--bd)}
.text{background:#121733;border:1px solid var(--bd);border-radius:12px;padding:12px}
.tip{margin-top:6px;color:#ffd97a}
.actions{display:flex;gap:10px;justify-content:center;margin:16px 0}
.btn{padding:10px 14px;border:1px solid var(--bd);border-radius:12px;background:linear-gradient(180deg,#1e2546,#141a33);color:#fff;cursor:pointer}
.btn.small{padding:6px 10px}
.tooltip{position:fixed;max-width:280px;background:#141a33;color:#fff;border:1px solid var(--bd);padding:10px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:3}