*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:radial-gradient(circle at top,#020617 0,#020617 40%,#020617 60%,#020617 100%);
  color:#e5e7eb;
  height:100vh;
}
#app{
  display:flex;
  height:100vh;
  width:100vw;
  overflow:hidden;
}
#side-panel{
  width:320px;
  max-width:100%;
  background:rgba(15,23,42,0.95);
  border-right:1px solid rgba(148,163,184,0.25);
  box-shadow:0 0 40px rgba(0,0,0,0.6);
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:16px;
  backdrop-filter:blur(18px);
}
#side-panel header h1{
  font-size:20px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.subtitle{
  font-size:12px;
  color:#9ca3af;
  margin-top:4px;
}
section h2{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:#9ca3af;
  margin-bottom:6px;
}
.field{
  margin-bottom:10px;
  font-size:13px;
}
.field label{
  display:block;
  margin-bottom:4px;
}
.field input[type="range"]{
  width:100%;
}
.hint{
  font-size:11px;
  color:#9ca3af;
  margin-bottom:6px;
}
textarea{
  width:100%;
  background:rgba(15,23,42,0.9);
  border:1px solid rgba(148,163,184,0.4);
  border-radius:8px;
  color:#e5e7eb;
  padding:6px 8px;
  font-size:11px;
  resize:vertical;
}
button{
  margin-top:6px;
  padding:6px 10px;
  border-radius:999px;
  border:none;
  font-size:12px;
  cursor:pointer;
  background:linear-gradient(135deg,#22d3ee,#4ade80);
  color:#020617;
  font-weight:600;
  margin-right:6px;
  box-shadow:0 0 12px rgba(34,211,238,0.25);
}
button.ghost{
  background:transparent;
  color:#e5e7eb;
  border:1px solid rgba(148,163,184,0.7);
  box-shadow:none;
}
button:hover{
  transform:translateY(-1px);
}
#status{
  margin-top:8px;
  font-size:11px;
  color:#9ca3af;
  white-space:pre-wrap;
}

#viewport{
  flex:1;
  position:relative;
  background:radial-gradient(circle at top,#0b1120 0,#020617 40%,#000 100%);
}
#view3d{
  width:100%;
  height:100%;
  display:block;
}
#hud{
  position:absolute;
  left:12px;
  bottom:12px;
  display:flex;
  gap:10px;
  padding:6px 10px;
  background:rgba(15,23,42,0.75);
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.4);
  font-size:11px;
  backdrop-filter:blur(12px);
}
#hud span{
  color:#9ca3af;
}
#hud span strong{
  color:#e5e7eb;
}

@media(max-width:800px){
  #side-panel{width:260px}
}