/* B.O.P.S. portfolio embed */
* { margin:0; padding:0; box-sizing:border-box; }

body {
  width:100vw;
  height:100vh;
  overflow:hidden;
  background:#050505;
  color:#d8d0bf;
  font-family:"Courier New", monospace;
}

#app {
  display:flex;
  flex-direction:column;
  width:100vw;
  height:100vh;
  background:#050505;
}

#stage {
  flex:1;
  min-height:0;
  display:grid;
  place-items:center;
  padding:14px;
  background:#050505;
}

#canvas {
  display:block;
  width:min(100%, calc(100vh - 122px));
  height:min(100%, calc(100vh - 122px));
  max-width:100%;
  max-height:100%;
  border:1px solid rgba(255,245,227,0.10);
  box-shadow:0 18px 80px rgba(0,0,0,0.38);
  image-rendering:auto;
}

#ui {
  flex:0 0 auto;
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px 14px;
  align-items:center;
  border-top:1px solid #17182B;
  background:#0a0a0b;
  padding:12px 14px;
}

#ui header {
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

#piece-title {
  min-width:0;
  overflow:hidden;
  color:#fff5e3;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.14em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

.header-actions {
  display:flex;
  flex-shrink:0;
  align-items:center;
  gap:7px;
}

#audio-btn,
#stop-btn {
  min-width:58px;
  border:1px solid #fff5e3;
  background:#fff5e3;
  color:#050505;
  cursor:pointer;
  font-family:inherit;
  font-size:9px;
  font-weight:700;
  letter-spacing:0.12em;
  padding:8px 10px;
  text-transform:uppercase;
}

#stop-btn {
  background:transparent;
  color:#fff5e3;
}

#audio-btn:hover,
#stop-btn:hover,
#audio-btn.live {
  border-color:#D0A23A;
  background:#D0A23A;
  color:#050505;
}

#build-marker {
  color:#7f7a72;
  font-size:8px;
  font-weight:700;
  letter-spacing:0.10em;
  text-transform:uppercase;
}

#trait-panel,
#switcher {
  display:none;
}

#ui footer {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

#signal-status {
  color:#7f7a72;
  font-size:8px;
  font-weight:700;
  letter-spacing:0.10em;
  text-transform:uppercase;
}

#beat-dot {
  color:#343230;
  font-size:14px;
  line-height:1;
  transition:color 0.04s;
}

#beat-dot.flash {
  color:#D0A23A;
}

@media (max-width: 620px) {
  #stage {
    padding:10px;
  }

  #ui {
    grid-template-columns:1fr;
  }

  #ui header {
    align-items:flex-start;
    flex-direction:column;
  }

  #ui footer {
    justify-content:flex-start;
  }
}