/* Shared styles for the Cosmos Catalogue */
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:#06070d;
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  color:#e8eaf6;
  overflow:hidden;
}
canvas{display:block;position:fixed;top:0;left:0;z-index:1}

/* Top bar with title and back button */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:20px;
  padding:18px 28px;
  background:linear-gradient(180deg,rgba(0,0,0,0.7),transparent);
  pointer-events:none;
}
.back-btn{
  pointer-events:auto;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:22px;
  padding:9px 18px;
  color:#fff;text-decoration:none;
  font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  transition:all 0.25s ease;
}
.back-btn:hover{background:rgba(100,140,255,0.2);border-color:rgba(100,140,255,0.4);transform:translateX(-3px)}
.demo-title{
  font-size:13px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;
  opacity:0.85;
}
.demo-num{
  display:inline-block;
  padding:3px 10px;border-radius:6px;
  background:linear-gradient(135deg,#667eea,#764ba2);
  font-size:11px;font-weight:700;
  margin-right:10px;
}

/* Description card bottom-left */
.info-card{
  position:fixed;bottom:24px;left:24px;z-index:100;
  background:rgba(10,12,28,0.7);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;
  padding:18px 22px;
  max-width:380px;
  box-shadow:0 12px 40px rgba(0,0,0,0.5);
}
.info-card h2{
  font-size:18px;margin-bottom:8px;
  background:linear-gradient(90deg,#a78bfa,#60a5fa,#34d399);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  font-weight:700;
}
.info-card p{font-size:12.5px;line-height:1.6;opacity:0.85}
.info-card .tech-tags{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.info-card .tag{
  font-size:9.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  padding:3px 9px;border-radius:6px;
  background:rgba(167,139,250,0.15);
  border:1px solid rgba(167,139,250,0.25);
  color:#c4b5fd;
}

/* Controls panel bottom-right */
.controls-card{
  position:fixed;bottom:24px;right:24px;z-index:100;
  background:rgba(10,12,28,0.7);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;
  padding:16px 20px;
  min-width:220px;
}
.controls-card h3{
  font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  opacity:0.6;margin-bottom:10px;
}
.ctrl-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:8px 0;font-size:12px;
}
.ctrl-row label{opacity:0.8;font-weight:500}
.ctrl-row input[type=range]{
  flex:1;max-width:120px;
  -webkit-appearance:none;
  height:3px;border-radius:2px;
  background:rgba(255,255,255,0.15);
  outline:none;
}
.ctrl-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:linear-gradient(135deg,#a78bfa,#60a5fa);
  cursor:pointer;box-shadow:0 0 8px rgba(167,139,250,0.6);
}
.ctrl-row select{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:6px;padding:4px 8px;
  color:#fff;font-size:11px;
  cursor:pointer;
}
.ctrl-row .val{
  font-family:monospace;font-size:11px;
  color:#60a5fa;min-width:40px;text-align:right;
}
.ctrl-btn{
  width:100%;
  background:rgba(167,139,250,0.15);
  border:1px solid rgba(167,139,250,0.3);
  border-radius:8px;padding:8px;
  color:#c4b5fd;font-size:11px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;
  cursor:pointer;
  transition:all 0.2s;
  margin-top:6px;
}
.ctrl-btn:hover{background:rgba(167,139,250,0.25);transform:translateY(-1px)}