* { box-sizing: border-box }
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: #111214;
  color: #f5f5f0;
}

.wrap{
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* your blurb area */
header{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

header p{
  font-family: Figtree, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  opacity: .85;
  margin: 0;
  color: #d8d6d0;
  width: 90%; /* mobile default */
  max-width: 46ch;
}

.stage{
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1 / 1;
  margin-top: 24px;
  position: relative;
}

#cv{
  width: 100% !important;
  height: 100% !important;
  display: block;
  touch-action: none;
  cursor: grab;
}

.ctl{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:18px;
  width: 100%;
  padding-bottom: 24px;
}

#bPause{
  font-family:Figtree, sans-serif;
  font-size:18px;
  font-weight:600;
  padding:12px 24px;
  border-radius:999px;
  border:2px solid #f5f5f0;
  background:#f5f5f0;
  color:#111214;
  cursor:pointer;
}
#bPause[aria-pressed="true"]{ background:transparent; color:#f5f5f0; }

.ctl .note{
  font-family:Figtree, sans-serif;
  font-size:13px;
  opacity:.65;
  max-width:38ch;
  text-align:center;
  line-height:1.3;
  color: #b8b6b0;
}

/* ---- desktop / laptop ---- */
@media (min-width: 900px){
  .wrap{
    max-width: 1200px;
    padding: 40px 24px 60px;
  }
  header p{
    width: 50%; /* you asked for 50% centred on desktop */
    max-width: 60ch;
    font-size: 17px;
  }
  .stage{
    max-width: 640px;
  }
}