:root{
  --bg0:#070812;
  --bg1:#0b0f1f;
  --neon:#7c3aed;
  --neon2:#22d3ee;
  --danger:#ff3b3b;
  --ok:#2cff9a;
  --text:#e9ecff;
  --muted:#a8b0d6;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 800px at 70% 20%, rgba(124,58,237,.25), transparent 60%),
              radial-gradient(900px 700px at 20% 70%, rgba(34,211,238,.18), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--text);
  overflow:hidden;
}

:focus{outline:none}
:focus-visible{outline:2px solid rgba(34,211,238,.9); outline-offset:2px; border-radius:10px}

#root::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 2px, transparent 6px);
  mix-blend-mode:overlay;
  opacity:.12;
}
#root::after{
  content:"";
  position:fixed;
  inset:-40px;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity:.06;
  mix-blend-mode:overlay;
}

.canvasWrap{
  position:fixed;
  inset:0;
}

.hud{
  position:fixed;
  top:12px;
  left:12px;
  right:12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  pointer-events:none;
}

.card{
  pointer-events:auto;
  background:rgba(10,12,26,.55);
  border:1px solid rgba(124,58,237,.25);
  box-shadow: 0 10px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(34,211,238,.08);
  backdrop-filter: blur(10px);
  border-radius:16px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
}

.mono{font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(34,211,238,.25);
  background: linear-gradient(180deg, rgba(34,211,238,.18), rgba(124,58,237,.12));
  color:var(--text);
  cursor:pointer;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}
.btn:hover{transform: translateY(-1px); filter: brightness(1.06); border-color: rgba(34,211,238,.45)}
.btn:active{transform: translateY(0px) scale(.99)}
.btn.secondary{border-color: rgba(124,58,237,.25); background: rgba(124,58,237,.12)}

.overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.panel{
  width:min(720px, 100%);
  padding:18px;
}

.title{
  font-size: clamp(22px, 3.2vw, 34px);
  letter-spacing:-0.02em;
  margin:0;
}

.sub{
  margin:8px 0 0 0;
  color:rgba(233,236,255,.78);
  line-height:1.5;
}

.kbd{
  font-family:"JetBrains Mono";
  font-size:12px;
  padding:2px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.grid2{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
@media (min-width: 860px){
  .grid2{grid-template-columns: 1.2fr .8fr}
}

.smallNote{color:rgba(233,236,255,.7); font-size:13px; margin-top:10px}

.toast{
  position:fixed;
  bottom:12px;
  left:12px;
  right:12px;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.toastInner{
  pointer-events:auto;
  max-width: 920px;
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,12,26,.62);
  backdrop-filter: blur(10px);
  color: rgba(233,236,255,.86);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.spinner{
  width:18px;height:18px;border-radius:999px;
  border:2px solid rgba(255,255,255,.18);
  border-top-color: rgba(34,211,238,.9);
  animation: spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.touchControls{
  position:fixed;
  bottom:14px;
  left:14px;
  right:14px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  pointer-events:none;
}
.touchBtn{
  pointer-events:auto;
  width: min(44vw, 220px);
  height: 64px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  color: rgba(233,236,255,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}
.touchBtn:active{filter:brightness(1.15)}

.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width: 860px){
  .hud{
    flex-direction:column;
    align-items:stretch;
  }
  .hudPrimary,
  .hudControls{
    width:100%;
  }
}

@media (max-width: 640px){
  .overlay{
    align-items:flex-end;
    padding:12px;
  }
  .panel{
    padding:16px;
  }
  .toastInner{
    flex-direction:column;
    align-items:flex-start;
  }
}