:root{
  --bg:#030712; --panel:#0a1220; --line:rgba(255,255,255,.08);
  --mint:#00ffc6; --glass:rgba(255,255,255,.06); --text:#e5f2ef;
}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:linear-gradient(180deg,#01040a,#0a1426);color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
.topbar{position:sticky;top:0;backdrop-filter:blur(8px);background:rgba(2,6,23,.55); border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:14px 18px;z-index:20}
.brand{font-weight:700;letter-spacing:.2px}.mint{color:var(--mint)}
.badge{border:1px solid var(--line);padding:6px 10px;border-radius:999px;color:#cbd5e1;font-size:.85rem}
.btn{background:var(--glass);border:1px solid var(--line);color:#fff;padding:10px 14px;border-radius:10px;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,#0ea5e9,#10b981);border:0}
.container{max-width:1200px;margin:22px auto;padding:0 16px}
.card{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:16px 16px 22px}
.scene{width:100%;height:520px;border-radius:12px;border:1px solid var(--line);background:#06101a}
.grid{display:grid;gap:12px}
.grid.three{grid-template-columns:repeat(3,1fr)}
.tile{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:14px}
.tile h3{margin:.2rem 0 .4rem}.tile p{color:#cbd5e1}
.footer{color:#9fb;opacity:.7;text-align:center;padding:24px}
#hud{position:fixed;inset:auto 0 20px 0;display:flex;justify-content:center;pointer-events:none;z-index:15}
#hud .bar{background:rgba(0,0,0,.35);border:1px solid var(--line);backdrop-filter:blur(6px);padding:8px 12px;border-radius:12px;display:flex;gap:16px;pointer-events:auto}
.chip{border:1px solid var(--line);padding:8px 10px;border-radius:999px;color:#cbd5e1;background:rgba(255,255,255,.06)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:30}
.modal.hidden{display:none}
.modal-content{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;min-width:320px}
.modal-content input{width:100%;padding:10px;border-radius:10px;border:1px solid var(--line);background:#0b1324;color:#fff;margin:.3rem 0 1rem}
.voice{position:fixed;right:16px;bottom:88px;background:rgba(0,0,0,.35);border:1px solid var(--line);backdrop-filter:blur(10px);padding:12px;border-radius:14px;z-index:16}
.voice h4{margin:.2rem 0 .6rem}
.voice .small{font-size:.85rem;color:#cbd5e1}
.minihelp{position:absolute;left:16px;bottom:88px;background:rgba(0,0,0,.35);border:1px solid var(--line);padding:10px;border-radius:12px}
kbd{background:#0003;border:1px solid #fff2;color:#cfe;padding:2px 6px;border-radius:6px}
@media (max-width:900px){.grid.three{grid-template-columns:1fr} .scene{height:420px}}